[CSS]font 기본 속성, 박스 모델

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

🔍font 기본 속성

✔️font-size(폰트 사이즈)

텍스트의 크기를 지정한다.

font-size: 18px

 

✔️font-weight(글자 두께)

텍스트의 두께를 지정한다.

font-weight: 600

• 일반적인 regular에 해당하는 값이 400이다.

 

✔️font-style(글자 기울임)

 

✔️text-decoration(글자 꾸밈, 밑줄 취소선 등)

텍스트에 장식용 선을 추가한다.

텍스트를 가로지르는 선: text-decoration: line-through

텍스트 상단의 선: text-decoration: overline

텍스틔 하단의 선: text-decoration: underline

-<a>태그의 기본적인 text-decoration을 삭제하고 싶을 때 사용하기도 한다. text-decoration: none

 

✔️color(글자색)

텍스트의 색을 지정한다.

color: #000000;

 

✔️line-height

텍스트의 행간을 설정한다.

line-height: 1.8;
line-height: 52px;

• 단위를 지정하지 않을 경우 텍스트의 배수만큼의 크기로 인식

 

✔️letter-spacing

텍스트의 자간을 설정한다.

letter-spacing: normal;
letter-spacing: 0.1rem;

기본값은 normal이고 양수의 값을 입력하면 해당 수치만큼 멀어지고, 음수를 입력하면 해당 수치만큼 멀어진다.

 

✔️word-spacing

텍스트의 단어 간 자간을 설정한다.(띄어쓰기로 구분되는 단어의 어절)

word-spacing: normal;
word-spacing: 0.1rem;

letter-spacing과 마찬가지로 기본값은 normal이고 양수의 값을 입력하면 해당 수치만큼 멀어지고, 음수를 입력하면 해당 수치만큼 멀어진다.

 

✔️text-align

블록요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다.

text-align: center;

*text-align: justify: 양측 정렬을 의미한다. 각각의 line의 띄어쓰기를 조절해서 정렬시킨다. 작업하는 UI 구조에 의해 적절하게 선택하는 것이 좋다.

 

✔️vertical-align

인라인 요소나 표 안에서 텍스트의 세로 정렬 방식을 지정한다.

vertical-align: middle;

 

✔️text-indent

텍스트의 들여쓰기를 설정한다.

text-indent: 10%;

음수로 지정하면 들여쓰기가 바깥쪽으로 튀어나가게 된다.

 

✔️text-transform

영문 텍스트의 대/소문자를 바꿀 수 있다.

기본: text-transform: none

어절의 첫 글자만 대문자로 바꾸어줌: text-transform: capitalize

모두 대문자로: text-transform: uppercase

모두 소문자로: text-transform: lowercase

필수 속성은 아니며, 사용하지 않는 경우도 있다.

 

✔️word-break

텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때 어떻게 줄을 바꿀지 설정한다.

word-break: keep-all | break-all;

break-all이 해당 텍스트 영역에 꽉 차보이는 효과가 있지만 가독성은 떨어질 수 있다.

 

✔️overflow-wrap

단어가 텍스트 영역 밖으로 넘쳤을 때 줄바꿈 여부를 설정한다.

overflow-wrap: normal | break-word

break-word는 말 그대로 단어를 쪼개도 된다는 허가에 가깝다. break-all은 모든 단어를 음절 단위로 쪼개게 되므로 break-word에 비해 글을 읽기 불편해질 수 있다.

 

✔️overflow

콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떤 방식으로 보여줄지 설정한다.

overflow: visible | hidden | scroll | auto;

auto는 콘텐츠의 크기를 인식하여 scroll바 노출 여부를 결정한다.

 

✔️text-overflow

줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기할 것인지 설정합니다.

text-overflow: clip | ellipsis;

 

❗주의

text-overflow를 적용하고 싶은 요소에는 반드시 다음 선언들도 함께 적용되어야 한다.

white-space: nowrap;
overflow: hidden;

 

 

🔍CSS 박스 모델

박스모델이란?

웹 브라우저에서 HTML Element를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델이다.

box-sizing 속성

• content-box: Content 영역을 기준으로 box의 size를 적용
• border-box: Border 영역을 기준으로 box의 size를 적용

box-sizing: content-box;
box-sizing: border-box;

일반적으로 사람의 눈은 border-box(경계선)를 기준으로 크기를 인식하기 때문에 border-box 처리를 해주는 것읻 좋다!

 

 

왜 <span></span>에는 size가 적용되지 않을까?

🔍inline 요소와 block 요소

block 요소: <p>, <div>, <h1>

• 블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음줄로 넘어간다.
• 좌/우 양쪽으로 늘어나 부모 요소의 너비를 가득 채운다.

inline 요소: <a>, <span>, <img>, <strong>, <input>, <button>

• 여러 개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
• 태그에 할당된 공간 만큼의 너비만 차지한다.

*display 속성을 이용해서 inline요소를 강제로 block요소로 바꿔줄 수 있다.

display: inline;
display: block;