[CSS]DAY6 -flex, class, border 사용하기

box구성에서 기본 개념

padding - box의 경계(border)로부터 '안쪽'에 있는 공간

margin - box의 경계(border)로부터 '바깥'에 있는 공간

*margin <-> padding 둘은 반대 개념이겠죠?

※주의: 높이와 너비는 inline에 적용이 안된다(inline은 높이와 너비가 없기 때문에).

padding은 inline에 상하좌우로 적용된다. 하지만 margin은 좌우만 가질 수 있다. 

 

 

border - box의 경계선 

1.border-style의 속성값에는 여러가지(none, dotted, solid, dasehd etc....)가 있지만 거의 사용하지 않고 자주 사용하는 것은 solid 정도이다. *solid: 실선 *dashed: 점선 

2. border 은 inline 요소(e.g. span)에도 적용이 된다.

 

border의 CSS 코드 예시: border: 2px solid black; <- 주로 이렇게 border의 굵기 선의 스타일 색상을 지정해준다. 

(vscode에서 마우스를 코드위에 올리면 Syntax: <line-width> || <line-style> || <color> 라고 뜨는데 위에 적용한 값에 대한 정의이다. <line-style>이  border-style과 같은 것이기 때문에 border-style의 속성값을 여기에 기입해주면 된다.)

 

 

 id : 유니크한 것, 한 요소는 id를 오직 하나만 가질 수 있다 

▷How do we select the id?(CSS코드에서 id 표기법) -> #(hash tag) + 아이디명

e.g.) #comfort //same as [id="comfort"(in HTML)]

class: 여러 요소들에서 쓸 수 있는 것, 한 요소에 여러가지 class를 가질 수 있다.

(2가지 이상, 한 요소에 띄어쓰기를 통해서 여러 클래스를 줄 수 있음)

▷CSS코드에서 class 표기법 -> .(dot) + 클래스명

e.g.) .tomato //same as [class="tomato"(in HTML)]

 

inline - 1. 높이와 너비가 없는 요소, 2. 가로 배치

block(box) - 세로배치(옆에 다른 요소가 올 수 없음 , 가로 한칸을 다 차지)

inline-block -> inline와 block 단점을 보완하기 위해 등장한 속성값(display:inline-block;)

인라인 요소에 display:inline-block; 을 주면 block으로 인식하게 하면서 상하좌우 값을 가질 수 있고

바로 옆에 다른 요소가 올 수도 있음

※주의: inline-block은 많은 단점이 있어서 사용하지 않는 것이 좋다.( 정해진 형식이 없고 의미를 알 수 없는 여백이 생김 ->인라인 블록은 Responsive Design(반응형 디자인)을 지원하지 않기 때문에) 

 

inline-block을 대체하기 위해 등장한 것이 flexbox

flexbox 규칙 3 가지

1.자식 엘리먼트에 어떠한 것도 적지 않아야 한다. -> 적용시키고 싶은 엘리먼트를 자식으로 갖는 부모 엘리먼트에 작성해야 함 (자식을 움직이고 싶으면 부모에게 말하면 된다 e.g.부모태그{ display: flex;})

display:flex; 를 부모 태그에 명시해주고 나면 다른 속성을 수정할 수 있음

->부모 엘리먼트가 flex container가 되는 것입니다

justify-content: flex-start(default값)/center/flex-end/space-evenly/space-around/space-between

*space-evenly : 빈 공간을 같은 크기로 나누어서 배치함

 

2. justify-content의 값은 가로로만 설정되는 것이 아니다. 

 ->main axis(주축)과 cross axis(교차축)으로 변경가능하다.

flex-container은 2가지 축을 가지고 있는데 그게 바로 주축과 교차축입니다.

* 주축은 수평(가로)이고 , 교차축은 수직(세로)

main axis and cross axis

기본적(default)으로 justify-content는 주축에 적용되는 것이고

align-items로 불리는 다른 속성은 교차축에 적용되는 것이다.

->기본값이 있다는 것은 이것을 변경할 수도 있다는 뜻

 

※주의: 참고로 align-items에 값을 줄 때는 전체 content의 높이가 적당히 잡혀있는 지

확인해야 한다. 이미 자리가 꽉 차 있으면 값이 적용 안될 수 있기 때문입니다. 

참고: vh( viewport height, viewport = screen) 100vh = 화면높이의 100%?

px을 써도 되지만 vh은 화면 크기에 따라서 다르게 적용되기 때문에 반응형웹을 생각하면 더 적합함

align-items: flex-start(default)/flex-end/stretch(적용 요소 늘리기 but, 적용될 자식 요소에 고정값(height값)이 있으면 적용되지 않음) 

 

주축과 교차축의 디폴트 값은 주축-수평, 교차축-수직 이라고 했습니다. 

Q. 만약에 이 설정을 바꾸고 싶다면 어떤 속성을 써야할까요? 

A. 바로 flex-direction 입니다.

flex-direction에서 두 가지 옵션이 있습니다.

flex-direction의 속성값 1) row 2) column

*display:flex; 했을 때, default값은 [ row ] 입니다. (row = 수평 = horizontal )

-> flex-direction: column; 으로 바꿔준다면 주축과 교차축이 뒤바뀝니다. 

※참고사항: 

div태그 안에 문자가 있다면 div태그와 문자의 관계는 부모자식관계가 된다? (확인필요)

그렇기 때문에 

e.g. <div>2</div> 라는 HTML코드가 있을 때 

div{ display: flex;

justify-content: center;

align-items: center; } 라는 CSS코드를 적용하면 

"2" 라는 자식엘리먼트의 위치는 div라는 부모태그의 영향을 받아 div태그의 중앙에 위치하게 됩니다.

->div 태그가 flex-container가 되는 것이죠. 

 

flex-wrap: nowrap(defualt값); 

wrapping은 모든 요소를 같은 줄에 있게 만들어준다. 

해당 엘리먼트에 고정값이 width:300px이렇게 있다고 해도 flexbox는 신경쓰지 않는다.

flexbox는 width를 초기 사이즈로만 여기고 모든 엘리먼트를 같은 줄에 있게 하기 위해서

width를 바꿀 수도 있음-> 고정값이 있어도 화면크기에 맞춰서 자동으로 크기를 줄여버릴 수 있다.

flex-wrap: wrap; 으로 설정을 변경하게 되면 명시된 사이즈인 300px로 반영할 것이다. 

nowrap과 다르게 고정값을 유지하면서 화면 상 한줄에 들어가는 만큼 최대한 집어넣고 안되면 

다음줄로 넘기는 것이다. 

 

flex-direction: column-reverse;

->원래 순서에서 역방향으로 진행하게 하는 속성값

flex-direction: row-reverse; 

더 나아가 flex-wrap: wrap-reverse 할 수 있다.

※참고: reverse 라는 속성은 잘 사용하지 않지만 알아두면 좋다.