[CSS] Inlines ~ Flexbox 복습

 

CSS의 특징

    1) CSS 는 HTML을 가리키는 언어

        따라서 style 태그에 div 특성이 한 개이고, body에 div가 세 개 있을 경우 세 가지 모두에 css가 적용된다.

 

See the Pen 4 by jangjia01234 (@jangjia01234) on CodePen.

 

 

Inline vs Block

box 들은 서로 옆으로 배치되지 않는다.

이때 옆에 나란히 배치할 수 있는 요소와 없는 요소가 나뉜다.

 

1) 가능한 요소 (inline)

- 보통 아주 작은 단위의 글이나 이미지가 해당된다.

- 아래 세 가지 요소는 반드시 기억하기.

   ex. a, span, img

 

2) 불가능한 요소 (block)

- 기존에 box라고 불렀던 것을 이제는 block이라고 부르기.

   ex. div, p, address, header

 

Inline 이나 block 을 서로 바꾸려면 아래와 같은 방법을 따른다.

-> css 태그에서 display: inline (혹은) block 지정

 

See the Pen 5 by jangjia01234 (@jangjia01234) on CodePen.

 

Block의 3가지 특징 (중요)

1) margin: box의 경계 바깥에 있는 공간

2) border: box의 경계선

3) padding: box의 경계 안쪽 공간

 

1)~3) 작성시, 뒤에 값을 하나만 적으면 사방에 전부 적용되고,

ex. margin: 20px

 

두 개를 적으면 수직/수평 방향으로 적용된다.

ex. margin: 20px 10px; 

 

네 개를 다 적을 경우에는 시계 방향의 순서대로 적용된다 (상, 우, 하, 좌)

ex. margin: 20px 10px 5px 15px; 

 

 

Margin Collapsing (마진 겹침 현상)

block의 경계가 body의 경계와 같다면 두 margin은 하나로 취급됨
이 현상은 위, 아래쪽에서만 일어남 (좌우는 해당x)
이때 위쪽의 여백을 없애기 위해서 padding의 개념이 필요하다

-> (깊게 파지는 말것)

chumil7432님 velog 에서 보고 웃겨서 가져왔다 ㅋㅋ

 

 

CSS에서 id 가리키기

css에서 id를 가리키기 위해서는 # 붙이기

이때 css에서의 id와 html에서의 id명을 반드시 같게 적도록 주의한다

 

ex. body 내에 div id="first"라면 head style 뒤에 #first { }

 

See the Pen 7 by jangjia01234 (@jangjia01234) on CodePen.

 

Style 전체 적용하기

style 뒤에 * {}  표시를 하면, 전체 파트에 반영된다.
ex. <style> * { border: 2px dotted pink; }

Inline의 특징

inline은 높이와 너비가 없다. 그래서 위, 아래에 margin을 가질 수 없다 (양옆만 적용됨)
padding은 사방에 다 가질 수 있는데, margin은 좌우만 된다.

Class란?

class는 여러 개가 반복될 때 중복되는 작성을 피하고자 사용한다

class는 id와 달리 한 번에 여러 개를 적어줄 수 있다. (id는 고유의 값을 가져야 하므로, id보다는 class를 사용한다)

id 처럼 <tag id="value">content</tag> 을 적은 후 # 대신 . 을 붙여 작성해준다

ex. id="tomato"
      class =btn "tomato apple honey hello"

#apple -> id="apple" 이라는 뜻
.apple -> class="btn(버튼) apple" 이라는 뜻

 

Flexbox 알아보기

display: inline-block 은 대상을 block으로 인식하게 한다
-> height, margin(모든 방향) 을 가질 수 있도록 한다
그러나 inline block은 반응형 디자인을 지원하지 않고, 모니터나 창 크기에
영향을 받는다. 그래서 이렇게 잘 쓰지 않는다. 그냥 이런게 있다는걸 알아만 두기.

 

이런 반응형을 지원하지 않는 inline block을 대체한 요소가 flexbox이다.

 

flexbox는 박스들을 어떤 곳이든 둘 수 있다

사용법이 아주 쉽지만 꼭 지켜야 할 3개의 규칙이 있다
    1) 자식 엘리먼트에는 아무 것도 적지 말 것. 부모 엘리먼트에만 명시해야 함.
        ex. body에 있는 3개의 div를 움직이고 싶다면, div가 아니라 body에 표시해야 함
            <style> body { display: flex; justify content:center; } </style>
    2) 주축 (main axis) -> 수평 라인
        justify-content 는 주축에 적용됨 (가로)
    3) 교차축 (cross axis) -> 수직 라인
        align-items 는 교차축에 적용됨 (세로)


display flex 를 하고 나면 justify content를 사용할 수 있게 됨! 

vh = viewpoint(=screen) height 
100 screen height 는 화면 높이의 100%를 말함

align items 에서 stretch는 height 값이 고정되어있으면 반영 안됨

총정리

1. 더 쉽게 사용하기 위해 flexbox를 적용하고 싶다면, 자식이 아니라 부모에게만 알려주면 된다
예제에서는 body가 부모 엘리먼트, div가 자식 엘리먼트였다
2. justify-content와 align-items를 적용하고 싶다면 먼저 display:flex를 해줘야 한다
display:flex를 하면 해당 엘리먼트인 body가 flex 컨테이너가 된다
3. flex 컨테이너는 두 개의 축을 가지고 있다. '기본적으로' 주축은 수평, 교차축은 수직이다.(변경 가능)
justify-content는 주축에, align-items는 교차축에 적용된다.

+ body가 height 값을 가지고 있지 않다면,
이미 맨 위아래를 차지하고 중심에 있기 때문에 
align-items를 설정하더라도 바뀌지 않는다.
예제에서는 vh(viewpoint height)를 사용함 - 화면 크기에 따라 바뀌게 하기 위함

 

 

TIL 끝!