css편은 자주 사용하는 속성들에 대해서만 기술
css란 Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일 시트 언어이다.
<div style="
letter-spacing: 1.4; // 문자와 문자사이의 간격
line-height: 1.2; // 줄 간격
white-space: nowrap; // 텍스트와 함께 입력된 공백 처리 방법
text-align: center; // left | center | right
font-size: 14px; // 폰트 사이즈!
font-weight: 400; // bold | lighter | bolder | 100~900
">
</div>
white-space
normal
: 기본값으로 연속하는 공백을 하나로 처리, 자동으로 줄을 바꿈
nowrap
: 연속하는 공백을 하나로 처리하고, 줄바꿈은<br>
에서만 일어남
pre
: 연속하는 공백을 유지하며, 줄바꿈은 개행문자와<br>
에서만 일어남
pre-line
: 연속하는 공백은 하나로 취급, 줄바꿈은 개행문자와<br>
에서만 일어나며, 한줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈
pre-wrap
: 연속하는 공백을 유지하며, 줄바꿈은 개행문자와<br>
에서만 일어나며, 한줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈
break-spaces
:pre-wrap
과 비슷하며, 연속 공백이 줄 끝에 위치하더라도 공백을 차지함.
주로 overflow와 text-overflow와 함께 사용된다.
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis"
>
</div>
margin을 사용해 요소의 바깥쪽 여백을 설정할 수 있다.
padding을 사용해 요소의 안쪽 여백을 설정할 수 있다. 안쪽 여백이란 콘텐츠와 테두리 사이의 공간이다.
출처 - https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1
margin이 바깥쪽 여백이다보니 서로 겹치는 경우가 발생할 수 있는데, 이를 마진 상쇄(Margin collapsing)라고 한다.
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
CSS에서 두 개 이상의 상자(형제일수도 있고 아닐수도 있음)의 인접한 여백은 결합하여 하나의 여백을 형성하고 이를 마진 붕괴라 한다.
-W3C
자세한 설명은 CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해 을 참고하자.
border를 사용해 테두리를 설정할 수 있다.
<div style="border: 1px solid #ddd;"></div>
테두리 굵기(border-width
), 스타일(border-style
), 색(border-color
) 중 선택하여 사용할 수 있으며, 순서는 영향을 주지 않는다.
테두리 경계의 모서리를 둥글게 만들고자 할 때는 border-radius
를 사용한다.
<div style="
width: 100px;
height: 50px;
border: 1px solid #f5a623;
border-radius: 20px;
background-color: #f5a623;
"></div>
box-sizing 속성은 요소의 넓이와 높이를 계산하는 방법을 지정한다.
content-box
: 기본 css 박스 크기 결정법을 사용하며, 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px의 너비를 가지며, border-width와 padding이 더해진다.
box-sizing
: border와 padding을 요소의 크기로 고려한다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽다.