[HTML/CSS] 2-3. 핵심 CSS 속성과 작성 팁

핵심 CSS 속성 맛보기 + 표기 Tip!

 

box-sizing: border-box
position: relative | absolute | fixed | sticky
display: flex | block | inline | inline-block | none
margin: 100px
padding: 100px
width: 100px
height: 100px
border: 1px solid #000
background: #fff
font-size: 16px
font-weight: 300(thin) | 400(normal) | 500(medium) | 700(bold) | 900 (extra bold) color: #000
text-align: center | left | right
overflow: auto | scroll | hidden
z-index: 1

 

 

 

Box 속성

• box-sizing : border-box (default)
• box-sizing : content-box

 

 

 

Position 속성

기본 왼쪽 상단에 위치하며 block 형식으로 쌓이는 형태로 생성됨

• relative : 기본, 기준점이 본인 자신 body
• absolute : 기준점이 본인 상위의 태그
• fixed : 기준점으로 부터 고정된 위치, 겹침 가능
• sticky : 스크롤에 따라 움직이지만 특정 시점에서 정지 가능 (mobile only)

 

 

 

Display 속성

• flex : block 요소를 inline으로 시현 가능, 임의 여백이 생기지 않음
• block : block 요소의 기본 값
• inline : block 요소를 가로로 붙여서 시현, 임의 여백 추가
• inline-block : 영역에 따라서 inline 또는 block으로 선택 시현됨, 자동 줄바꿈 가능
• none : 보이지 않게 감추는 속성

 

 

 

기타 속성

• margin : 외부 여백 지정
• padding : 내부 여백 지정
• width : 넓이
• height : 높이
• border : 박스 경계
• background : 배경색 (ex. #FFFFFF, #ffffff)
• font-size : 글자 크기 (ex. px)
• font-weight : 글자 두께 및 색상 (ex. 400(normal) | 700(bold) | color: #000)
• text-align : 글자 정렬 (ex. center | left (default)  | right)
• overflow : 내용이 영역을 벗어나는 경우 처리 방법 (ex. auto | scroll | hidden)
• z-index : 쌓임 맥락을 변경하는 경우 사용 (겹치는 경우 뒤에 선언된 것이 상위 노출이 기본값)

 

 

---