font, 단위와 값
font-size, font-style, font-weight, font-family, font, line-height
font-size: 24px;
font-style: italic;
font-weight: bold;
font-family: Gill Sans Extrabold, sans-serif;
line-height: 2;
font: italic 100 20px/1.5 'Times New Roman', Times, serif;
font-size
의 기본값은 브라우저마다 약간의 차이점은 있지만, 일반적으로16px
입니다.font-style
은 일반적으로italic
만 사용하는데, font의 모양을 이렇게 약간 누워있는 모양으로 변경해줍니다.font-weight
는 font의굵기
를 변경합니다.bold
외에도 100단위의 숫자 값으로 지정할 수 있습니다. 기본값은400
입니다.font-family
는 글씨체를 정할 수 있습니다. 값을 중복으로 입력하는 경우, 앞의 값이 우선순위가 되어 적용되지 않으면 후순위의 값을 적용합니다.font
는 위의 속성들을 단축해서 사용할 수 있습니다. 대신, 값들을 적는 순서를 지켜야 합니다.font-style
과font-weight
의 순서는 상관없지만 가장 앞쪽에 작성해야 하고, 그 다음font-size
를 작성하는데line-height
가 있다면/
오른쪽에line-height
의 값을 작성하고, 마지막에font-family
값을 나열하면 됩니다.- font가 여러 줄에 작성될 때, 줄 간의 간격을 변경해줍니다. 일반적으로는 숫자를 많이 사용하는데
normal
이나em, px, %
등의 직접적인 수치도 입력이 가능합니다.
letter-spacing, word-spacing
<p>my name is p tag</p>
p {
letter-spacing: 5px;
word-spacing: -15px;
}
letter-spacing
은 글자간의 간격을 의미하고,word-spacing
은 단어간의 간격을 의미합니다.- 두 속성 모두 디자인적인 요소를 위해 특별히 변경하지 않는 경우가 아니면
웹 접근성
을 저해시킬 수 있으므로, 기본값을 변경하지 않는 것이 좋습니다.
text-align, text-indent
div, span {
text-align: center;
background-color: pink;
}
text-align
은 font를 중앙 정렬시킵니다.span
은display
속성값이inline
이여서,font
의 공간만큼만 영역을 차지하기 때문에, 중앙정렬을 할 공간이 없어서 속성값이block
인 경우에만 적용됩니다.center
외에left, right
도 가능합니다.text-indent
는 font를 들여쓰기 합니다.text-align
과 같이display
속성값이block
인 경우에만 적용됩니다.
text-decoration
text-decoration: underline green dotted 5px
text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness
4가지의 축약형 속성입니다.text-decoration
은font
속성과 달리 값을 순서와 상관없이 작성해도 됩니다.
word-break
width: 100px;
background-color: skyblue;
block
요소에width
값을 정해줬을 때, 한글은 한 줄의 너비가width
값이 됐을 때 자동으로 개행을 합니다. 한글과 달리 영어는width
영역 밖으로 나가도 개행을 하지 않습니다.word-break: break-all
로 영어도 한글과 같이 일정 너비 이상 넘어가지 않게 할 수 있습니다.work-break: keep-all
로 한글도 영어와 같이 일정 너비 이상 넘어가게 할 수 있습니다.
text-transform
<p>this is capitalized</p>
p {
text-transform: capitalize;
}
- 소문자와 대문자를 변경해주는 속성입니다. 한글은 소문자, 대문자 구분이 없기 때문에 적용되지 않습니다.
uppercase
,lowercase
를 사용하면 요소 전체를 대문자, 소문자로 변경할 수 있습니다.- 그렇다고 실제
html
의 요소 값이 변경되는 것은 아닙니다.
css
의 모든 속성에는 해당 속성에 사용 가능한 값이 정해져 있습니다. 값 뿐만 아니라 값을 사용하는 단위도 정해져 있어서 해당 속성에 사용 가능한 단위와 함께 값을 입력해야 합니다.
px(픽셀) - 절대 길이
- 전통적으로는 화면에 나타나는 하나의 점을 의미합니다. 절대길이이기 때문에 값이 변하지는 않지만, 장치의 크기에 따라
픽셀
의 크기가 변하기 때문에 그 부분을 유의해야 합니다. cm, mm, Q, in, pc, pt
등의 절대길이를 나타내는 단위들이 있지만,px
로 변환되어 사용되기 때문에 실질적으로 잘 사용되지는 않습니다.
em, rem, vw, vh, vmin, vmax - 상대 길이
em
은 부모 요소의font
크기에 영향을 받습니다.2em
은 부모 요소의 2배 크기입니다. 부모 요소가 없는 최상단 요소일 때의 기본값1em
은16px
입니다.rem
은 부모 요소와 상관없이,1rem
의 값이16px
로 정해져 있습니다.px
을 사용하지 않고,rem
을 사용하는 이유는rem
은 사용자가 임의로 브라우저에서 글꼴의 크기를 설정할 수 있습니다. 값을 변화할 수 있기 때문에px
보다는rem
을 사용하는 것이웹 접근성
을 높일 수 있습니다.- 장치의 화면에 나오는 화면을 뷰포트라고 합니다.
vw
,vh
는뷰포트
의 너비와 높이의 값에 비례합니다. 값은 비율로 계산되어100vh
는뷰포트
높이의100%
를 차지합니다.vmin
,vmax
는뷰포트
의 환경에 따라 변화합니다. 일반적인 환경의 화면에서는 너비의 값이 높이의 값보다 크기 때문에,vmin
이 높이가 되고vmax
가 너비가 됩니다.
계산식(함수) - calc(), min(), max()
<p>안녕하세요. 저는 px로 입력된 값입니다.
<p>안녕하세요. 저는 calc로 계산된 값입니다.</p>
p:first-of-type {
width: 300px;
background-color: red;
}
p:last-of-type {
width: calc(900px / 3);
background-color: blue;
}
calc()
는css
속성값을 계산할 수 있게 해주는 함수입니다.min()
,max()
는 최솟값과, 최댓값을 계산해주는 함수입니다. 3개 이상의 값도 나열해서 사용할 수 있습니다.
Author And Source
이 문제에 관하여(font, 단위와 값), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@luna238/CSS-font-단위와-값저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)