mordern CSS display, font

강정우·2022년 12월 20일
2

HTML, CSS

목록 보기
16/27
post-thumbnail

display

block

  • div, h1~h6, p, ol, ul, li, hr, table, form
  • 항상 다음 라인에 표시
  • 화면의 전체 너비를 차지
  • width, height, margin, padding property 설정가능
  • block 요소안에 inline 요소 포함 가능

inline

  • span, a, strong, img, br, input, select, textarea, button
  • 새로운 라인 표시 X
  • content 너비만큼 가로폭 차지
  • width, height, margin, padding 등의 property 지정 불가
    • 상, 하 여백은 line-height로 지정 가능
  • inline 특성을 가지는 요소 뒤에 공백이 있을 경우, default로 4px이 자동 지정
  • inline 특성을 가지는 요소안에 block 특성을 가지는 요소를 포함할 수 없다.

inline-block

  • inline 요소와 같이 한 라인에 표시 + block 요소와 같이 width, height, margin, padding등의 property 지정가능
  • content 너비만큼 가로폭 차지
  • 하지만 이때 \n 이나 띄어쓰기가 들어가면 역시 4px의 공간이 생기기에 이땐 태그 끝을 붙여서 작성해주어야한다.
방법 1
<div>hello</div><div>
universe</div>
방법 2
<div>hello</div><
div>universe</div>
방법 3
<div>hello</div><!--
--><div>universe</div>

none

  • 해당 요소가 차지하는 공간까지 안 보임

visibility

  • visible
  • hidden : 해당 요소의 공간은 보임 하지만 content는 안 보임
  • collapse : table 요소에 사용하며 행이나 열을 안 보이게 함
  • none : table 요소의 row나 column을 보이지 않게 함

font

주요 값

  • medium : 기본 브라우저 default 크기 (통상 16px)
  • xx-samll, x-small, small, large, x-lartge, xx-large : medium에 대한 상대값
  • smaller, larger : 부모 요소의 상대값
  • length : px, %, em, rem : css 단위룰 사용한 설정값 rem이 가장 안전할 듯

font-family

  • font-family는 여러 값을 설정해 둔다. 사용자가 없는 폰트가 있을 수 있기 때문.
  • 통상 3개정도 설정하고 마지막 3번째는 generic-family font가 들어있어야 한다.

    generic-family : serif, sans-serif, monospace, cursive, fantasy

순으로 많이 설정한다.

font-variant

  • small-caps : 소문자를 소문자 크기의 대문자로 바꾸기

font 단축 property

font : font-style(옵션) font-variant(옵션) font-weight(옵션) font-size(필수) 
       line-height(옵션) font-family(필수)

letter-spaceing, word-spacing

  • 글자간 공간 설정
  • 단어간 공간 설정

text-align

  • 글자 수평 정렬 설정
  • left, right, center, justify

text-decoration

  • line-through
  • overline, underline

white-space

property 값 space and tab 줄바꿈 자동 줄바꿈
normal 병합 병합 O
nowrap 병합 병합 X
pre 보존 보존 X
pre-wrap 보존 보존 O
pre-line 병합 보존 O
* pre : html 문서상에 내가 작성한 대로 보여줌 nowrap : 줄바꿈이 다 사라지고 한 줄로 나옴 pre-wrap : html 문서상에 내가 작성한 줄바꿈을 바탕으로 반응형으로 바뀜

text-overflow

  • 문자열이 넘칠경우에 자동 줄바꿈이 되지 않은 문자열 처리 설정, 다음 조건이 설정되어있는 상태에서 설정 가능
  1. width 값 설정
  2. white-space : nowrap 설정
  3. overflow가 visible 이외의 값 설정
  • clip : 텍스트를 잘라냄
  • ellipsis : 나머지 텍스트를 (...)로 표시
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글