CSS: inline, block

<span> default 값은 inline으로 left, rigth 영역에서만 margin, padding 값을 가질 수 있다.

CSS 적용시 top, bottom에 margin, padding을 적용하기 원한다면 반드시

display: block; 코드로 inline -> block 으로 변경해줘야 한다.

box의 경우 inline으로 적용될 시 높이가 적용되지 않아 화면에서 사라지는 현상을 겪기도 한다.

 

CSS 설정시

.name {} 앞에 (.)을 쓰면 class를 지칭한다

.name {} 앞에 (#)을 쓰면 id 를 지칭한다.

id는 unique 값으로 모든 변수 통틀어 단 1개만 존재할 수 있으며, class값은 여러개 중복 존재가 가능하다.

 

class는 아래와 같이 사용되는데

class="one two three"

one, two, three 라는 3가지 class에 위와 같이 적용하여 코드의 반복을 피할 수 있다.

 

추가로 inline-block 은 block을 inline 형식으로 바꿔주는데

이는 Responsive Design(반응형 디자인)을 지원하지 않아서 개발자로 하여금 매우 큰 짜증을 유발한다.

(창 크기가 바뀌면 배치가 달라질 수 있다는 얘기다)

inline-block 대신 쓸 수있는 것이 flexbox가 있는데 flexbox에는 몇가지 규칙이 있다.

1. 부모 엘리먼트에만 적용한다. (

2. justify-content 위치는 main axis, cross axis를 기준으로 적용된다.

flex-direction 의 defualt값은 row(main axis)이며 column(cross axis)으로 바꿀수 있다.