1. Display 속성 알아보기 "display" 속성은 css의 많은 속성 중에서도 아주 중요합니다. 각 HTML 요소는 블록 혹은 인라인으로 나타나게 되는데, display 속성으로 "block" 혹은 "inline"을 의도적으로 지정할 수 있습니다. 뿐만 아니라 마크업된 요소가 원래 존재하지 않는 것처럼 "none"을 지정할 수도 있습니다. 이외에 많은 값들이 새로 추가되었지만, 익스플로러의 경우는 익스플로러 버전9 이상의 브라우저에서만 안정적으로 지원되며 아직은 그 사용빈도가 높지 않습니다.1-1. "display" 속성으로 block, inline 값 지정하기HTML에서 는 블록 요소이고, 은 인라인 요소지만, 다음 예제에서는 css에서 요소가 ㅇ니라인으로 요소는 블록으로 표현되도록 만들었습니..

1. list-style-position으로 목록 지정하기목록이 지정된 블록 영역의 "안쪽(inside)" 혹은 "바깥쪽(outside)"에 블릿을 표현합니다. 다음의 예제에서 그 결과를 확인할 수 있습니다. insidelist item1list item2list item3outsidelist item1list item2list item3 2. list-style-image으로 이미지 블릿 지정하기"list-style-image" 속성은 블릭을 이미지로 표현할 수 있게 하는데, 그 이미지의 위치를 섬세하게 지정할 수는 없기 때문에 보통 실무자들은 "background" 속성을 활용하는 편입니다. "list-style-image" 속성을 사용할 경우 불러 올 이미지의 경로는 "url()"로 지정합니다. l..

1. list-style-type으로 목록 타입 지정하기목옥에는 과 이 있습니다. "비순차적"인 목록은 항목 앞에 disc, circle, square 형태의 블릿(bullet) 표시가 생깁니다. "순차적"인 목록은 각 항목 별로 숫자가 붙는데, 알파벳이나 로마숫자로 변경할 수도 있습니다. css에서는 , 관계없이 모든 형태의 블릿과 넘버가 가능합니다.1-1. 비순차적 목록(Unordered List, ul) 타입 지정하기 이때 지정할 대상은 개별 항목인 보다는 모체에 해당하는 이나 요소에 지정하는 것이 좋습니다. 이와 같은 타입들은 각 항목을 꾸미기 위한 것이기보다 항목을 그룹화(Grouping)하려는 목적이 더 크기 때문입니다. 1-2. 순차적 목록(Ordered List, ol) 타입 지정하기요소를..

1. 수직 정렬(Vertical Align) 속성"vertical-align" 속성은 인라인 요소끼리의 위, 아래 간격을 맞출 수 있습니다. 값으로 baseline, sub, super, top, text-top, middle, bottom, text-bottom 등의 다양한 값을 가지고 있으며, 백분율(%)을 지정할 수도 있고, 정밀하게 작업할 경우 길이값을 적용할 수도 있습니다. 2. 글의 줄바꿈 처리하기인라인 요소인 "글(text)"은 자신을 감싸고 있는 상위 블록 요소의 "width(가로)"를 넘어서게 되면 자연스럽게 줄을 바꾸게 됩니다. 이렇게 줄이 바뀌는 것에 대해서 다음의 두 가지 속성을 살펴봅니다.2-1. 단어를 깨뜨려 줄바꿈을 지정하는 "word-break" 속성"width"를 지정한 영..

1.글자 들여쓰기긴 단락의 경우 첫 줄의 텍스트를 한 글자 정도 들여쓰기라기 위해 "text-indent" 속성을 활용합니다. 간격을 마이너스 값으로 지정하면 화며에서 글자가 보이지 않도록 만들 수 있습니다. 이 방법은 css를 이용해 메뉴를 만들거나 본문의 텍스트를 이미지로 변환하는 경우 활용합니다. 2. 영문의 대/고문자 관련영문의 경우 css를 통해 대문자와 소문자를 변경하는 방법으로 "text-transform"속성과 "font-variant"속성이 있습니다. ※ HTML 문서를 작성할 경우 대문자로만 작성하게 되면 익스플로러 버전 6에서 css를 통한 대/소문자 병경이 안 될 수 있습니다. 1-1. 대문자와 소문자로 변경하는 "text-transform"속성의 값은 다음과 같습니다. 1-2. "..

1. 글의 정렬 방법"text-align" 속성은 블록 요소에 지정하면 그 내부에 포함된 글이나 인라인 요소들이 영향을 받습니다.left 왼쪽 정렬 center 가운데 정렬 right 오른쪽 정렬 justify 양쪽 정렬 2. 글의 간격 조절하기글자와 글자 사이의 간격은 "letter-spacing"속성을 사용하고, 단어 간의 간격은 "word-spacing"을 사용합니다. 줄 간격은 "line-height" 속성으로 지정합니다. ※ 주의할 점은 본문에 한글과 영문, 숫자 등이 섞여 있는 경우 각 종류 별 간격이 달라 보일 수 있는 점입니다. 한글 자간은 어울려 보이는데 영문은 좁아 보이거나, 숫자는 거의 붙어버리는 경우가 있을 수 있습니다. 2-1. 자간 조절(letter-spacing) 2-2. 단어..