Day69 - [css]마지막 정리

이번에는, css를 하면서 마지막 정리를 해 봅시다.

 

1. block vs Inline

css를 하면서, blcok 요소와 Inline 요소의 차이점을 알아 두어야 합니다.

block는, 공간(박스)이 생긴다고 생각을 하시면 될 거 같아요. block 안에는 block , Inline 둘 다 올 수 있습니다.

block은 크기를 가질 수 있습니다.

 

Inline은, 공간 없이, 그냥 어떤 스타일을 나타 냅니다. ex) <strong><span><img> .....

inline 안에는 inline 만 올 수 있습니다. 크기를 가질 수 없습니다.

 

2. font-size, font-weight, 웹폰트

font의 크기와, 사이즈 를 조절할 수 있고, 웹폰트를 가져다가 쓰는 방법도 있죠.

웹폰트는 @import 또는 link 를 통해서 가져올 수 있고, 검색엔진에 무료 웹폰트를 검색하면 쉽게 가져다가 사용할 수 있습니다.

3. 디스플레이 (block, inline, inlineblock, none)

1번의 block 요소와, inline 요소의 차이점을 알고 있다면, block 요소를 inline 요소로 변경하고 싶어질 떄와, inline 요소를 block 요소처럼 변경하고 싶어질 때가 있습니다. 그럴때, display 속성을 사용해서 변경을 해줄 수 있습니다.

 

※이 외에도, flex 라는 것도 속성도 있는데, 이는 나중에 스스로 공부해보시기 바랍니다.

4. background, background-image, background-color .....

background. 배경을 설정할 수 있는 속성입니다.

뒷배경색을 넣을 수도 있고, 뒷배경 이미지를 넣어줄 수도 있습니다.

 

5. 패딩 vs 마진

패딩은 안쪽 여백. 마진은 바깥쪽 여백 입니다.

패딩과 마진을 사용해서 블럭요소 간의 간격을 맞추거나, 거리를 띄워주고 싶을 때 많이 사용 합니다.

 

패딩은 컨텐츠들끼리, 영역이 중복될 수 있습니다.

마진은 컨텐츠들끼리, 영역이 곂치지 않습니다.

 

6. box-sizing: border-box

블럭요소 안에, float을 이용해서, 또는 inline-block을 이용해서 %를 이용한 블럭을 배치할 때, block 의 크기는 border, padding, margin의 크기를 전부 포함해서 가지게 됩니다.

이럴 때, 기존에 width: % 를 줄경우, 100%를 넘어가는 일이 발생하게 되는데, box-sizing: border-box 를 사용해서, border를 제외한 크기를 인식하도록 하는 것 입니다.

7. float

float을 이용해서, block , inline 을 left, right 를 합니다.

 

float을 사용할 경우, 부모요소의 block이 float을 사용한 자식요소를 포함하고 있지 않는 상태가 발생 합니다.

 

이 때, 부모 요소에, overflow: hidden 을 넣어주면, 부모요소가 float을 사용한 자식요소를 포함하게 됩니다.

 

8. position (relative, absolute, static, fixed, sticky)....

position은 해당 block 요소를 상대좌표 를 사용해서 배치하기 위해서 사용합니다.

 

부모요소의 절대좌표를 relative 를 사용해서 x,y 축의 0.0 자리를 정합니다.

absolute 를 사용해서, 자식요소의 x,y축 좌표를 정합니다. ( 부모요소에 relative 가 없다면, body의 좌표가 기준이 됌 )

static은 기본값으로, 아무 변경이 생기지 않습니다.

fixed 는 스크롤을 내리거나 위로 올려도 해당 컨텐츠의 위치가 변하지 않도록 해주는 것 입니다.

sticky 는 특정 위치에 도달했을 때, fixed 처럼 스크롤을 내려도 따라다니도록 해주는 것 입니다.

 

position을 사용하게 된다면, 해당 요소를 z축으로 넘기기 때문에, position을 사용하지 않은 요소들이 떙겨져 오게 됩니다. 이럴 때, padding 또는 margin 을 사용하거나, 똑같이 position을 사용해서 위치를 지정합니다.

 

9. media쿼리

반응형 웹을 디자인 할 때, media쿼리를 이용해서 각각의 화면의 크기에 맞는 디자인을 할 수 있습니다.

 

이 때, 변하는 속성. 예를 들면 width 속성만 따로 media 쿼리를 이용해서 정의해주면 됩니다.

 

10. transition, animation

transition 속성과 가상선택자 hover, focus 등을 사용해서, 동적으로 처리해주는 방법이 있습니다.

 

그리고 transition 을 이용해서, 해당 속성이 변경 될 때, ex) width , height

해당 속성들이 변경되는 것을 눈으로 확인 할 수 있습니다.

 

animation 은, 따로 배우지는 않았지만 transition 과 비슷한 효과를 내는 것이라고 합니다.