[HTML/CSS] CSS 기초문법 2

[HTML, CSS] CSS 기초문법

---

display 속성

display 속성은 태그의 영역 표현 방식을 지정하는 속성으로 매우 중요한 속성 중 하나이다. 

• none 키워드를 사용하면 태그가 완전히 화면에서 제거된다.
• block 키워드를 사용하면 태그가 한 줄을 차지한다.
• inline 키워드 또는 inline-block 키워드를 사용하면 한 줄에 들어간다. 

inline과 inline-block의 차이점은 inline-block은 박스요소 (크기, 너비)룰 지정할 수 있다는 점이 다르다.

---

background

• background : 배경 속성을 한 번에 지정한다 ( 배경색 / 이미지 / 이미지반복여부 / 스크롤 시 배경 이미지 고정 여부 )
• background-attachment : 페이지가 스크롤 될 경우 배경 이미지를 고정시킬 것인지 지정
• background-color : 배경색 지정 , 배경을 투명하게 하고 싶으면 transparent를 사용한다.
• background-image : 배경의 이미지를 지정한다. ( url 이라고 지정한다. )
• background-position : 배경 그림의 위치를 지정한다. ( top / bottom / center / left / right / px / % ) 
• background-repeat : 배경 이미지의 반복 여부를 지정한다. ( repeat-x / repeat-y / no-repeat )

---

padding 과 margin

박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 속성이다.

• margin : 마진의 너비를 지정하는 속성
• padding : 패딩의 너비를 지정하는 속성

---

box-sizing

width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성이다. 
box-sizing 속성은 이러한 공식을 변경할 수 있는 CSS3 속성이다. 

---

박스 레이아웃 float

웹 페이지 레이아웃을 구성할 때에 반드시 사용하는 속성이였으나, flex 가 나온이후로는 
flex의 사용비중이 더 올라갔다. 

박스 레이아웃 position

태그의 위치 설정 방법을 변경할 때 사용한다. 
position의 내부 속성으로는 아래와 같은 기능들이 있다.

※ z-index 속성

HTML 태그는 사실 3D 형태를 나타내고 있는데, 이러한 순서를 변경할 때 해당 속성을 사용한다. 
큰 값을 입력할 수록 위로 올라온다.

처음 html을 공부할 때 특정 페이지 혹은 화면의 순서로 인해 난감한 경험을 한 적이 많았는데,
z-index의 원리를 잘 알게되면 손 쉽게 풀어나갈 수 있다.

---

그림자 속성

텍스트에 그림자를 부여하는 속성이다. 

---