Cascading 이란
- 영어로는 작은 폭포, 폭포처럼 쏟아지는 물, 연속적인 이라는 뜻 (계속해서 떨어지는 느낌)
- a) 우리가 styling 작성한 문서가 있고, b) styling 작성 안해도 브라우저에서 기본적으로 보여지는 UI가 있다. (브라우저에서 기본적으로 작성된 styling이 있기 때문)
- 이 상태에서 브라우저 상에 버튼이 표시될 때,
브라우저 왈 😎 : " 너네가 적은 버튼에 스타일링이 있어 없어?!"
답변 : a에서 스타일링이 없다면 b로 떨어져 브라우저에 잇는 styling을 가져와서 기본값을 보여준다.이처럼 cscading은 정의된 것이 있다면 쓰고, 정의된 것이 없다면 다음으로 지정된 것으로 넘어간다.
1. 웹사이트 스타일링 3가지
- Author Style
- 우리가 웹사이트를 만들때 제공하는 CSS 파일
- User Style
- 사용자의 취향에 맞게 브라우저 스타일을 조정하는 것
ex) 다크모드, 글자크기 작게 등
- Browser
- HTML을 통해 봤듯이 브라우저 상에서 기본적으로 지정된 스타일
ex) H1 태그는 가장 큰 제목 스타일이 적용되는 것처럼
Cascading은 우리가 지정한 스타일이 최고의 우선선위를 갖고 우리가 지정한 스타일이 없다면 사용자가 지정한 스타일로 넘어간다. 이도 없다면 브라우저 스타일로 넘어간다.
Cascading 순서 : Author Style > User Style > Browser
" 이 연결고리를 끊는 한가지가 있는데, 이는 !important 다.
- !important는 CSS 척추가 잘못 되었거나 HTML 단계에서 박스 구조를 잘못 나눴을 때, 즉 나쁜 architecture 가 나왔을 때 important을 쓰게 된다.
- 보통의 경우라면 important을 쓰지 않는 게 좋다.
2. Lable(레이블)
박스대로 HTML을 잘 나눠야 labeling이 쉬워지고, labeling이 잘 돼 있어야 CSS를 꾸밀 때 어떤 태그를 골라서 스타일을 적용할 지 쉬워진다.
2-1) Selectors
HTML의 어떤 태그들을 선택할지 규정하는 문법이다.
- Universal(*) : 모든 태그들을 다 선택한다.
- type (tag) : 태그의 이름을 선택하면 해당 태그에 대해 모두 적용한다.
- ID(#) : 특정 아이디를 갖는 태그만 선택한다.
- Class (.) : 특정 클래스를 갖는 태그만 선택한다.
- State(:) : 특정 상태를 부여하여 선택한다. ex) button : hover
- Attribute([]) : 특정 속성값만 선택한다. ex) a[href] a태그 중 hyper reference 있는 태그에만 적용
CSS 기본형태)
selector {
attribute : value;
}3. block vs inline
block (블럭요소)
- 블럭 레벨의 경우 한줄에 하나씩 나온다.
- display: inline-block으로 변경해줄 경우 한줄에 여러개가 나온다.
inline (인라인요소)
- 인라인 레벨의 경우 한줄에 공간이 남으면 여러개가 나온다.
- 인라인은 컨텐츠 자체만을 꾸며주기 때문에 아무런 컨텐츠가 없다면 화면상에 적용되어 보여지지 않는다.
- display : block으로 변경해줄 경우
4. Position
- position은 기본값으로 static이라는 값을 갖고 있다.
- 여기서 static은 html 상에서 적혀진 순서대로 브라우저 상에 보여지는 것을 뜻한다.
4. 1 position : relative
만약 position을 relative으로 변경해준다면 원래 있어야 하는 자리에서 css로 지정해준 left, right 등 값에 따라 위치가 변경된다.
4.2 position : absolute
- absolute의 경우 내 아이템과 가장 가까이에 있는 박스 안에서 위치 변경이 일어난다.
- relative는 원래 있어야 하는 자리에서 상대적으로 위치 변경이 일어난다면, absolute는 아이템들이 담겨있는 상자 안에서 위치가 변경된다.
4.3 position : fixed
- 상자 안에서 완전히 벗어나 윈도우 안에서 움직인다.
- 웹 페이지안에서 움직인다.
4.4 position : sticky
- 본래 있어야 하는 자리에서 벗어나지 않고 화면을 스크롤링해도 그 자리에 그대로 붙어있는다.
5. Flexbox
박스와 아이템들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 CSS다.
Flex를 알기 전에 사용됐던 float에 대해 알아보자.
5.1 Float
- Float의 본래 목적은 이미지와 텍스트를 어떻게 배치할 것인지 정의하기 위해 쓰였다. (텍스트들이 이미지를 감싸면서 배치될 수 있도록)
- 과거에는 레이아웃을 할 수 있는 기능이 없다보니 float을 이용해 박스를 배치하곤했었음 -> 사실 이같은 방법은 float의 본래 목적에서 벗어난 것임!
- 현재는 flex가 있기 때문에 float은 본래의 목적으로 쓰이고 있다.
출처 : 드림코딩
5.2 Flex 기본개념
Flex를 이해하는데는 2가지 개념을 주목하면 된다.
첫번째, Flex 박스는 컨데이터 박스에 적용되는 속성값들이 존재하며 각각의 아이템들에 적용할 수 있는 속성값들 역시 존재한다.
컨데이너(container)에 꾸며줄 수 있는 속성값들은 하기와 같다.
아이템(item)들에 꾸며줄 수 있는 속성값들은 하기와 같다.
출처 : 드림코딩
두번째, Flex 박스에는 중심축과 수평축(반대축)이 있다.
Flex 박스에서 수직 너가 중심축이야! 하고 지정하면 반대로 수평축은 반대축이 된다.
- 위 사진에서는 아이템들이 가로로 나열 돼 있어 수평축이 중심축이 되고, 수직축이 반대축이 되었다.
- 만약 아이템들이 세로로 나열 돼 있다면 수직축이 중심축이 되고, 수평축이 반대축이 된다.
기타) CSS에서 %와 vh의 차이는?
height : 100%란 뜻은 부모 요소의 높이의 100% 값을 갖겠다는 뜻이고, 100vh라는 뜻은 부모요소와 상관 없이 아이템이 포이는 viewport height을 100퍼센트 다 쓰겠다는 뜻이다.
5.3 Container 기본속성
a) display : flex
- flex를 사용하기 위해서 컨데이터 박스에 너 이제부터 flex 박스야!라고 말해준다.
- 사용시 세로로 나열 돼 있던 아이템들이 왼쪽~오른쪽으로 나열된다.
b) flex-direction
- 기본값은 row(왼쪽에서 오른쪽으로)로 배열된다.
- flex-direction: row-reverse / column / column-reverse로 사용 가능하다.
c) flex-wrap
- 기본값은 nowrap이다. 즉 아이템들이 아무리 많아도 한줄에 나열 돼 보여지는 것. (우리가 wrapping을 안하겠다고 선언한 것과 동일함)
- 만약 flex-wrap을 : wrap으로 지정하면 아이템들이 자동적으로 아이템들이 다음 줄에서 보여진다.
- wrap 역시 wrap-reverse을 사용할 수 있다.
d) flex-flow
border : 2px solid black; 식으로 줄여서 표현할 수 있듯이 flex 역시 한줄에 줄여서 표현할 수 있다.
flex flow : column nowrap;
e) justify-content (중심축 배치)
중심축에서 아이템들을 어떻게 배치할 것인지에 대해 결정해준다. (중심축이 수평축이라고 가정 했을 때)
- justify-content : flex-start; (기본값, 왼쪽 > 오른쪽으로)
- justify-content : flex-end; (오른쪽 > 왼쪽으로 정렬)
만약 flex-direction이 column인 경우, 동일하게 위에서 밑으로, 밑에서 위로 direction을 바꿔주지만 flex-direction의 row-reverse와는 다르게 컨텐츠의 순서는 유지한채 밑에서 위로 컨텐츠를 보여준다.
- justify-content : center; (중심에 배열)
- justify-content : space-around; (박스를 둘러싼 여백을 넣어주는 것, 그렇기 때문에 맨 처음 아이템과 맨 끝 아이템은 여백이 1이라면 박스 간 여백은 2가 된다. 박스 하나의 여백과 다음 박스의 여백값이 합쳐져서)
- justify-content : space-evenly; (처음~끝까지 박스간 간격을 동일하게)
- justify-content : space-between; (처음, 끝 아이템의 왼쪽과 오른쪽은 딱 화면에 맞게 배치하고, 중간 아이템간 여백만 동일하게 넣어준다.)
f) align-items (반대축 아이템 배치)
중심축이 수평이라면 수직축에서 어떤식으로 아이템들을 배치할 지 정한다.
- align-iems : baseline; (만약 아이템들이 10개 있고 그중 하나의 아이템만 높이가 더 클 경우, baseline 지정시 그 안에 텍스트가 모두 한줄에 올 수 있도록 배치함)
g) align-content : justify-content와 동일하게 다만 축은 다르게 배열이 적용된다.
5.4 Container 기본속성
a) order
- item에 order: 0, 1, 2..등으로 순서를 지정해줄 수 있다.
- 현업에서 거의 쓰이지 않아 참고용으로만 여기면 된다.
b) flex-grow
- 본래는 컨데이터가 아무리 커져도 아이템의 크기는 변하지 않고 컨데이너가 너무 작아질 경우에는 어쩔 수 없이 아이템 크기가 작아졌었다.
- flex-grow를 쓰게 될 경우 컨데이터 공간을 채우기 위해 아이템들이 늘어나게 된다.
- flex-grow의 기본값은 0이다.
c) flex-shrink
- 컨테이너가 점점 작아졌을 때 어떻게 행동하는지를 결정한다.
- item 1에 flex-shrink를 2, item 2와 3에는 flex-shrink를 1씩 줄 경우, 컨데이터가 작아짐에 따라 item 1만 2와 3에 비해 2배씩 줄어들게 된다.
d) flex-basis
- 아이템들이 공간을 얼마나 차지해야하는지 조금 더 세부적으로 명시할 수 있게 도와준다.
- 기본값은 auto로 flex-grow와 flex-shrink값을 따라가지만 만약 두 값이 없고 flex-basis만 n%로 할 경우, 다른 아이템에 비해 커질때/작아질 때 몇 %를 차지하게 할 지 정할 수 있다.
e) align-self
- 아이템별로 아이템을 정렬할 수 있다.
- 아이템 하나만 center로 맞출 수도 있고, 컨테이너에서 지정된 것을 벗어나 아이템 하나만 내가 배치하고 싶을 경우 사용한다.
