2018. 2. 6. 11:11ㆍ웹 표준 퍼블리싱 바이블
1. Display 속성 알아보기
"display" 속성은 css의 많은 속성 중에서도 아주 중요합니다. 각 HTML 요소는 블록 혹은 인라인으로 나타나게 되는데, display 속성으로 "block" 혹은 "inline"을 의도적으로 지정할 수 있습니다. 뿐만 아니라 마크업된 요소가 원래 존재하지 않는 것처럼 "none"을 지정할 수도 있습니다. 이외에 많은 값들이 새로 추가되었지만, 익스플로러의 경우는 익스플로러 버전9 이상의 브라우저에서만 안정적으로 지원되며 아직은 그 사용빈도가 높지 않습니다.
1-1. "display" 속성으로 block, inline 값 지정하기
HTML에서 <div>는 블록 요소이고, <span>은 인라인 요소지만, 다음 예제에서는 css에서 <div>요소가 ㅇ니라인으로 <span>요소는 블록으로 표현되도록 만들었습니다. "width" 속성은 블록 요소에만 적용되므로 "display:block"을 지정한 요소에 크기가 지정되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .block{display: inline; width: 300px; background-color: orange;} .inline{display: block; width: 300px; background-color: lime;} </style> </head> <body> <div class="block">div:block elements</div> <sapn class="inline">span:inline elements</span> </body> </html>
|
1-2. "didplay" 속성의 값으로 none을 지정하면?
"display" 속성의 값을 "none"으로 지정할 경우 브라우저는 해당 요소가 원래 없었던 것으로 간주합니다. 때문에 웹 접근성 차원에서 주의할 필요가 있습니다. 다음의 코드에서 선택된 브라우저에서 표현되지 못하게 됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .none{display: none;} </style> </head> <body> <p class="none">앙큼한유채`s 일상 Story</p> </body> </html>
|
display 속성의 값으로 "none"이 지정되었다면, 브라우저에서 나타나지 않게 됩니다. 개발자도구에서 해당 요소가 흐리게 표현되었음을 알 수 있습니다.
1-3. "inline-block"을 지정하면 인라인과 블록의 속성을 다 가질 수 있습니다.
css2 버전에서 추가된 "inline-block"은 인라인과 블록의 특징을 다 가지는 값입니다. 인라인 요소는 크기를 가질 수 없고, 블록 요소는 텍스트 정렬이 적용되지 않습니다. 하지만 "inline-block"이 지정되면 크기 지정도 가능하고, 상위 요소에서 "text-align" 속성을 지정하면 정렬도 적용되므로 게시판 하단의 페이징 부분을 꾸미는데 아주 유용합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .paging{text-align: center;} .paging a{display: inline-block; padding: 5px 8px; border: 1px solid black; background-color: orange; font-weight: bold;} </style> </head> <body> <p class="paging"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> </p> </body> </html>
|
"list-item"을 값으로 지정하면, 해당 요소가 목록의 형태로 나타납니다. 지정하는 요소가 인라인 요소라도 결과는 목록과 같이 블록 형태로 나타납니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area{width: 200px; margin: 0 auto; border: 1px solid;} .list{display: list-item;} </style> </head> <body> <div class="area"> <span class="list">list item1</span> <span class="list">list item2</span> <span class="list">list item3</span> <span class="list">list item4</span> <span class="list">list item5</span> <span class="list">list item6</span> </div> </body> </html>
|
1-5. 테이블의 형태를 표현할 수 있는 다양한 값을 지원합니다.
테이블 형태를 표현하기 위해서 "table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group"등의 값들을 활용할 수 있습니다.
2. Visibility 속성 알아보기
이 속성의 기본값은 "visible"이며 "hidden"을 지정할 경우에는 지정된 요소가 보이지 않게 됩니다. 앞서 살펴본 "display:none"의 경우는 원래 없었던 것처럼 표현되지만, "visibility:hidden"의 경우에는 보이지만 않고 그 공간은 그대로 유지되는 특징이 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> *{margin: 0; padding: 0;} .visible{visibility: hidden;} </style> </head> <body> <p>Paragraph Line1</p> <p class="visibility">Paragraph Line2</p> <p>Paragraph Line3</p> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-5. 목록(List) 스타일 - 2 (0) | 2018.02.05 |
|---|---|
| 4-5. 목록(List) 스타일 - 1 (0) | 2018.02.02 |
| 4-4. 서체(font)와 글(text) 스타일 - 8 (0) | 2018.02.01 |
| 4-4. 서체(font)와 글(text) 스타일 - 7 (0) | 2018.01.31 |
| 4-4. 서체(font)와 글(text) 스타일 - 6 (0) | 2018.01.30 |