🎨 CSS 개요
✍️ CSS 폰트 관련 속성
✏️ CSS font(size, style, weight)
color
폰트의 색깔을 지정해주는 property로 사용한다.
font-size
폰트의 크기를 지정해주는 property로 사용한다.
기본 설정 값은 16px이다.
단위로는 px, %, em 등을 사용한다.
font-style
폰트의 스타일을 지정해주는 property로 사용한다.
italic, oblique 값이 위 property에 대응하는 값으로 상응한다.
value로 normal 사용시 부모 특성을 상속받지 않는다.
font-weight
폰트의 굵기를 지정해주는 property로 사용한다.
기본 초기값은 normal이며 수치상으로 400과 동일하다.
<stron>과 의미적으로 상이하며 단순히 굵게 표시하고자 할 때 사용한다.
font 스타일이 지원하는 수치일 경우 해당 property 사용이 가능하다.
✏️ font(family)
font 스타일을 적용하는 property로 사용한다.
아래와 같은 코드가 있을 때 순차적으로 값을 폰트에 적용시킨다.
예를 들어 1번째가 지원이 안되고 2번째가 지원이 될 경우
.serif class 내용에 해당하는 폰트의 글꼴 BlinkMacSystemFont로 적용된다.
폰트 패밀리를 여러개로 나누어 쓰는 이유는 해당 글꼴이 없을 때
최종적으로 브러우저가 지원하는 글꼴을 적용시키기 위함이다.
마지막 글꼴에는 브라우저가 최소한으로 지원하는 기본 글꼴을 적는다.
적용하고자 하는 글꼴에 공백이 있을 경우 아래와 같이
작음 따옴표를 사용하여 '글 꼴'처럼 만들어준다.
.serif {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
✏️ line-height
폰트의 위 아래의 공백을 포함한 간격을 line-height라고 부른다.
동일한 내용과 같은 크기 서로 다른 폰트를 갖고 있는 content가 있다고 했을 때
폰트 스타일에 따라 라인 하이트가 달라진다.
따라서 스타일링적인 요소에서 통일감을 주기 위해 line height를 사용한다.
✏️ font와 단축속성(shorthand)
font의 속성을 간편하게 작성하고자 할 때 아래와 같은 순서를 지켜
필요한 property만을 font에 부여하여 사용하는 것을 권장한다.
.text {
font: font-style font-weight font-size/line-height font-family;
}
.text {
font: italic 100 20px/1.7 'Times New Roman', Times, serif;
}
font의 단축속성이 적용 순서에 맨 마지막에 있을 때
위에 font와 관련된 특성이 있다 하더라도 상속이 되지 않기 때문에 주의하여 작성
아래와 같이 코드를 작성 할 경우 font-style: italic; 이 상속되지 않는다.
.text {
font-style: italic;
font: 100 20px/1.7 'Times New Roman', Times, serif;
}
✏️ letter spacing, word spacing
폰트의 글꼴에 따라 정해진다. 따라서 가공을 원할 경우 css를 통해 조정해주어야한다.
양수 및 음수로 값을 조정할 수 있다.
기본 값은 normal이다. 가독성을 위해 폰트 제작자가 설정해 놓은 값이다.
특이점으로 '%'단위를 사용할 수 있고 '%'의 기본값은 100%이다.
.text {
letter-spacing: 1px;
word-spacing: 1px;
}
✏️ text-align
text-align 적용시 주의사항
text-align text이면서 text를 제외한 width의 폭이 어느정도 있어야 한다.
.text {
text-align: center
}
✏️ text-indent
지정한 selector의 내용 앞에 주어진 값만큼 들여쓰기를 해준다.
퍼센트를 값으로 설정할 수 있다.
50%로 값을 설정 할 경우 보여지는 width 폭의 반이 들여써진다.
주의 할 점은 inline 요소에는 text-indent가 적용되지 않는다.
.paragraph1 {
text-indent: 20px;
}
.container {
text-indent: 50%;
}
✏️ text-decoration
4가지의 프로퍼티를 하나로 합친 property.
여러개의 속성을 지정해서 한줄로 작성할 수 있다.
text-decoration-(line color style thickness)을 합친 것이다.
text-decoration-line의 경우 아래줄 위줄 중간줄 없음의 특성을 줄 수 있다.
여러개의 줄을 적용하고 싶을 때 공백으로 구분해 나열해서 적어주면 된다.
폰트 칼라 설정시 라인도 같이 적용이 되고 선만을 따로 색을 설정할 수 있다.
font단축 속성과 달리 순서와 상관없이 property를 적어도 적용된다.
주의 할 점은 순서는 상관은 없으나 여러 라인을 적용하고 싶을 경우
해당 property 끼리는 붙여서 적어주어야한다.
.text {
text-decoration-line: none;
}
.text {
text-decoration-line: underline overline line-through;
}
.text {
color: aqua
text-decoration: red 2px wave;
}
✏️ word-break (break-all, keep-all)
아래와 같이 html code와 css code가 있을 때
word-break의 속성이 어떻게 쓰이는지를 알아보자.
아래와 같이 a를 길게늘여 쓰고
그 때의 폭이 width의 120px을 넘긴다고 가정했을 때
첫번째 css로 스타일링만을 할 경우 다음과 아래아래와 같은 결과물이 나온다.
<div class="container">
<p lang="en">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
.container {
width: 120px;
background-color:tomato;
}
하지만 아래와 같이 한가지 속성을 덧붙여 추가해주었을 때
wod-break: break-all; 이 하는 기능은
텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정하는 역할을 한다.
.container {
width: 120px;
background-color:tomato;
}
p[lang=en] {
word-break: break-all;
}
2번째 예제를 살펴보자
이번에는 word-break 요소로 break-all이 아닌 keep-all 값이 쓰였을 때
어떻게 작동하는지 살펴보기로 하자.
keep-all로 작성 할 경우 공백을 만나기 전까지 텍스트가 줄바꿈 되지 않는다.
위의 경우 가로폭을 넘어가는 시점부터 줄바꿈이 되었다면
keep-all 속성의 경우 스페이스를 만날 때 까지 줄바꿈이 이루어지지 않고 글자
가 유지되는 특징이 있다.
<div class="container">
<p lang="ko">
가나다라마바사아자 차카타파하
</p>
</div>
.container {
width: 120px;
background-color:tomato;
}
p[lang=ko] {
word-break: keep-all;
}
✏️ text-transform (capitalize, uppercase, lowercase)
한국어에는 적용되지 않는다.
capitalize
단어의 앞이 대문자로 변경된다.
uppercase
지정된 부분의 내용이 모두 대문자로 변경된다.
lowercase
지정된 부분의 내용이 모두 소문자로 변경된다.
✍️ CSS 단위와 값
✏️ 절대길이
절대길이
상대길이와 대비되는 개념이다.
절대 길이로 알아야 하는 단위로는 px이 있다.
상대길이
절대길이와 대비되는 개념이다.
em, rem 같은 단위들이 상대 단위이다.
✏️ 상대길이(em, rem)
em
1em === 부모의 font-size를 나타낸다.
만일 부모요소에 em 단위를 적용시킬 경우
브라우저의 기본 크기인 16px을 기준으로 적용시킨다.
.parent {
font-size: 2em;
}
위와 같은 code가 있고 parent class의 부모 요소가 body 하나 뿐일 때
기본 크기 16px을 기준으로 곱하기 2를 한 크기가 적용이 된다.
.parent {
font-size: 2em;
}
.child {
font-size: 0.5em;
}
child class가 parent class의 자식 class일 때
child class의 단위는 em이므로 부모 요소의 폰트 1em을 기준으로 계산된다.
rem
root의 폰트 사이즈를 기준으로 계산해서 적용된다.
브라우저의 기본 font-size를 기준으로 한다.
em 보다 rem을 사용하기 용이하다.
브라우저의 기본글꼴 크기 설정을 바꿀 때
웹페이지의 크기가 적용되는 것을 알 수 있다.
✏️ 상대길이 (vw, vh)
vw (viewport width)
viewport의 길이 기준을 100으로 간주한다.
vh (viewport height)
body {
margin: 0;
}
.container {
background-color: coral;
width: 50vw;
height: 50vh;
}
위와 같이 코드를 작성 할 경우 보이는 화면의 가로와 세로의 절반 크기 만큼만을 차지한다.
device의 보이는 크기를 기준으로 하여 값이 적용되는 것이 위 단위의 특징이다.
✏️ 상대길이 (vmin, vmax)
viewport 안에서 가로 세로 중 더 큰 값이 vmax가 되고 작은 값이 vmin이 된다.
body {
margin: 0;
}
.container {
background-color: coral;
width: 100vmin;
height: 100vmin;
}
위와 같이 작성 할 경우 device 가로와 세로 크기 중
작은 값을 vmin으로 먼저 값을 결정한 이후에 해당 크기의 1/100 비율을 적용하여 계산한다.
✏️ 퍼센트
부모 요소의 값을 기준으로 한다. 예를 들어 부모의 가로가 100px 세로 100px일 때
width: 50%, height: 50%로 적용시킬 경우
가로 50px 세로 50px의 결과물을 얻게 되는 것이다.
<div class="parent">
<div class="child"></div>
</div>
body {
margin: 0;
}
.parent {
width: 100px;
height: 500px;
background-color: blue;
}
.child {
width: 50%;
height: 50%;
background-color: indianred;
}
✏️ 함수 표기법 (calc(), max(), min() )
위의 표기법을 사용하는 이유는 여러가지 단위를 동시에 사용할 수 있기 때문
+ - * / 를 사용할 때 양쪽에 공백을 넣어준다.
<div class="container">Lorem</div>
.container {
width: calc(100% - 50px);
height: calc(100vh /2);
background-color: wheat;
}
위와 같이 코드를 작성했다고 했을 때 가로폭은 보이는 장치의 폭의 최대치로 하면서
그 값에서 50px을 제외한 부분만을 가로 길이로 한다는 의미이다.
높이의 경우 보이는 장치의 높이의 길이를 최대치로 하면서 해당 높이를 2으로 나눈 값
을 높이의 길이로 한다는 의미이다.
.container {
width: max(100% 500px);
height: calc(100vh /2);
background-color: wheat;
}
html code는 동일하다고 가정했을 때 위와 같이 작성한 경우 max() 함수는 안에
인자로 들어간 값 중에서 가장 큰 값을 반환한다.
위의 코드의 경우 화면 가로 크기가 500px 이하로 떨어지는 값을 예상할 수 없다.
