[CSS] 기본 개념정리

CSS : Cascading Style Sheet

 

Cascading : 위에서 아래로 내려오는 이미지(폭포가 흐르는 것 떠올리기)

어떤 것 다음에 어떤 것이 온다 이것이 cascading이 의미하는 바다.

브라우저가 CSS 코드를 읽을 때 cascading 방식으로, 즉 위에 있는 코드부터 차례차례로 읽힌다.

- CSS가 하는 일은 HTML 태그를 가리키는 일. (이 태그는 초록색이다. 이 가리키는 것 자체를 'selector')

 

1. block과 inline

 

옆에 다른 요소가 못 오는걸 block , 올 수 있는걸 inline라고 한다. (in the same line)

inline의 대표적인 태그 span, link, img가 있다. 

block의 특징 margin, padding, border (block는 높이와 너비가 있다)

margin - 경계의 바깥에 있는 공간 (border보다 바깥)

 

block에서 inline으로 inline에서 block으로 바꾸는게 가능할까? → 가능하다

이렇게 하는 걸 display 속성이라고 한다.

기본적으로 span의 display 속성은 inline이다. 이걸 block으로 바꿔주면 span도 block이 된다.

- 방향 설정 없이 margin을 적용하면 상하좌우 모두 적용된다.

- margin : 0, 0; (상하, 좌우) 0, 0, 0, 0;(상, 우, 하, 좌 ⇒ 시계방향)

- collapsing margins 현상 : 흰 box의 경계가 보라색 box의 경계와 같다면 이 두 margin은 하나로 취급된다.(위, 아래쪽에서만 일어난다.)

 

 

2.  Padding

- margin 반대 개념  padding은 경계로부터 안쪽에 있는 공간

- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.

- 하지만 padding은 사방에 가질 수 있다.

- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

- 온점(.)은 class명이라는 뜻.

- id⇒ #tomato는 id="tomato" class⇒ .tomato는 class="tomato"

- id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.

- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.

 

inline : wdt, hgt 무시돼서 무언가 추가하지 않는 이상 아무것도 안보임

ㅡ> inline-block : 위 문제를 해결할 수 있어서 좋긴 한데, 반응형 디자인 지원되지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함

예 :10.5 ,10.4 ,10.3, ...... 10.01, ......10.08, 10.05,..10.05!)

 

ㅡ> 이 문제를 해결할 수 있는게

3.  flex

flexbox 사용 규칙

1. 자식 엘리먼트에는 어떤 것도 적지 말아야 함.

자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다.

div의 부모를 display:flex로 만든다

2. align-items : cross axis에서 작용 (세로)

3. justify-content : main axis에서 작용 (가로) (디폴트)

flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않는다.

 

main axis, cross axis의 기본 값을 바꾸기 위해서는 flex-direction을 사용한다.
flex-direction의 기본 값은 row이다. flex-direction : column; 하면 주축이 수직으로 바뀐다. 
원하는 만큼 flex 컨테이너를 만들 수 있다. (자식에도해당)

https://flexboxfroggy.com/#ko < flex를 이해하기쉽게 할수있는 간단한 게임이다 ! 
flex wrap 을 wrap로 설정하면 한 줄에 컨텐츠가 들어갈 수 있는 만큼만 보여주고 나머지는 다음 줄로 넘김.
no wrap일 경우 크기를 줄여서라도 한 줄로 표시