2024-07-25 :: 004 글꼴 및 레이아웃 관련

padding / margin

※ 박스의 안쪽 여백 / 박스의 바깥쪽 여백

-top, -bottom, -right, -left	{ padding or margin : 0px 0px 0px 0px; }
위, 아래, 오른쪽, 왼쪽 패딩이나 마진값을 줄 수 있다.	왼쪽부터 위, 오른쪽, 아래, 왼쪽 순으로 패딩이나 마진값을 줄수 있다. 네 값을 모두 주지 않을 경우 위/아래, 오른쪽/왼쪽이 한 쌍이 되어 같은 값을 공유한다. 하나의 값을 줄 경우 네 곳이 같은 값을 가지게 된다.

 

display

※ 요소가 지닌 속성을 바꾸거나 재배치 할 때 사용

block	블록 요소로 지정함 (div, p, ul, ol, dl, li, h1~h6, address, hr 등)
inline	인라인 요소로 지정함 (label, b, strong, mark, i, span, small, sup, sub, s 등)
inline-block	인라인 블록 요소로 지정함 (input 등)
none	요소의 박스 타입을 없앰 (요소가 사라짐)
flex	부모를 기준으로 자식들을 수평으로 배치함

 

font

※ 글자와 관련된 속성들을 지정함

font-style	글자 기울기 지정
font-size	글자 크기 지정
font-weight	글자 두께(가중치) 지정	- normal : 기본값, 400과 동일함 - bold : 글자 두껍게, 700과 동일함 - bolder : 부모요소보다 더 두껍게 - lighter : 부모요소보다 더 얇게 - 100~900 : normal과 bold이외의 두께를 지정할 때 사용
line-height	줄 높이(간격)을 지정	- normal : 브라우저가 가진 기본 정의를 사용 - 숫자 : 요소 자체 글꼴 크기의 배수로 지정 - 단위 : px, em, cm등 단위로 지정 - % : 요소 자체 글꼴 크기의 비율로 지정
font-family	글꼴(서체) 지정	- serif : 바탕체 계열 - sans-serif : 고딕체 계열 - monospace : 고정너비 글꼴 계열 - cursive : 필기체 계열 - fantasy : 장식 글꼴 계열

 

하나하나 지정하기엔 속성이 너무 많아 번거롭다면 단축 속성을 활용하자.

 

font : [style 값]　[weight 값]　[size 값] / [height 값]　[family 값]

※ 빨간 글씨 부분은 반드시 포함되어야 하는 값이며, 이외의 값은 생략해도 문제없다.

---

 

position

※ 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성

정적 위치 설정	static	기본값, 각종 요소를 HTML 문서에 마크업한 그대로 배치됨
상대 위치 설정	relative	다른 요소의 위치에 영향을 받지 않으며, 자기 자신을 기준으로 이동하여 배치함
절대 위치 설정	absolute	relative를 가진 부모요소를 기준으로 이동하여 배치함 (없을 경우 문서 자체가 부모가 됨)
고정 위치 설정	fixed	부모요소가 body로 고정되며, 스크롤을 동작해도 고정된 위치에 그대로 배치됨
	sticky	스크롤을 동작하면 부모요소가 가진 범위에서만 고정된 위치에 그대로 배치됨 (top, botoom, right, left 어디에 고정할 지 정해야 함)

 

fixed 예시

---

sticky 예시