CSS 상자 모델 이해하기
상자모델과 관련된 테일윈드CSS 기능을 알아봅시다.
상자 모델이란?
크롬을 포함한 대부분의 웹 브라우저는 f12를 누르면 나타나는 개발 도구 창에서 CSS상자 모델을 볼 수 있습니다.
1. width와 height 스타일 속성
넓이와 높이를 의미하는 width 와 height라는 스타일 속성을 제공합니다. 두 속성은 auto, inherit, initial, unset등 키워드 값을 설정하거나 숫자뒤에 픽셀의 의마하는 px, em, rem등 단위를 붙입니다. 만약 단위를 생략하면 픽셀(px) 단위로 간주합니다.
ex)
height: auto;
height: 120px;
height: inherit;
2. Div 컴포넌트 구현하기
케스케이딩 알아보기
두 컴포넌트의 부모 컴포넌트인 Div에 설정했는데 이것이 CSS의 캐스케이딩 입니다.
캐스케이딩 예
<Div className="text-center text-blue-100 bg-blue-600">
<Icon name="home" className="text-3xl" />
<Subtitle>Home</Subtitle>
</Div>
cascading이라는 단어는 "위에서 아래로 물이 계단을 따라 흘러내린다"라는 의미 입니다.
color스타일 속성값을 명시적으로 설정하지 않으면 부모요소에 설정한 color속성값이 물이 흘러 내리듯이 적용됩니다.
위 코드에서는 그 어떤 부모 요소도 width값을 명시하지 않았으므로 최상단 부모인 요소의width가 적용되어 Div의 넓이가 됩니다.
뷰포트 알아보기
뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역입니다. 뷰포인트는 모바일, 태블릿, 데스크톱 등 웹브라우저가 동작하는 장치의 화면크기가 다르기 때문에 생긴 개념입니다.
| 클래스 이름 | 의미 |
| w-screen | width: 100vw |
| h-screen | height: 100vh |
위에 w-screen과 h-screen 클래스를 사용해봤는데 vw, vh 대신 퍼센트 단위를 사용하는 w-full, h-full 클래스도 제공합니다.
| 클래스 이름 | 의미 |
| w-full | width: 100% |
| h-full | height: 100% |
테일윈드 CSS의 길이 관련 클래스
이처럼 넓이 높이 외에 관련된 여러 클래스를 제공합니다.
width를 의미하는 w hight를 의미하는 h
w-숫자
w-분자/분모
h-숫자
h-분자/분모
w-숫자, h-숫자에서 숫자의 기준은 4이고 이것은 둘다 1rem 입니다.
숫자는 1씩 증가나 감소할때 0.25rem씩 증가나 감소합니다.
w-1/2 처럼 퍼센트를 의미하는 표현을 할 수 있습니다. 1/2는 즉 50% 입니다.
위에 코드에서 h-1/2를 사용하는거랑 h-20을사용하는거랑 같은 결과값을 가져온다
padding 스타일 속성
상하좌우 네 방향의 간격을 설정할 수 있습니다.
테일윈드CSS는 padding을 p-뒤에 숫자를 붙입니다. p-4는 padding: 1rem을 의미합니다.
p-숫자
그리고 padding-left, right, top,bottom을 의미하는것은
pt, pl, pb, pr로 쓸수있다.
margin 스타일 속성
상하좌우 네 방향의 간격을 설정할 수 있습니다. margin을 의미하는 'm-' 뒤에 숫자를 붙입니다. 다만 분수로는 표현하지 않습니다.
width 때와 만찬가지로 m-4는 margin: 1rem을 의미합니다.
m-숫자
margin-top, left, bottom, right를 의미하는 mt, ml, mb, mr을 사용할 수 있습니다.
background-image 스타일 속성
<img>는 HTML요소 중 유일하게 width, height(가로 세로 화면 비율) 속성이 있습니다.
이미지가 로딩되기전에는 가로세로 400x400픽셀인 회색 화면이 보이다가 실제 이미지가 로딩되면 웹브라우저가 화면비율을 보정을 하여 사진의 세로 높이가 줄어들어서 나타난다
그래서 대부분의 사람들이 background-image 스타일 속성을 선호한다
background-image: url(이미지_URl)
Div 컴포넌트에 src 속성 추가
background-size 스타일 속성
CSS는 전체 이미지를 볼 수 있게 background-size 스타일 속성을 제공하며, 테일윈드CSS는 이에 대응하는 클래스를 다음처럼 제공합니다.
| 클래스 이름 | 의미 |
| bg-auto | background-size: auto |
| bg-cover(기본값) | background-size: cover |
| bg-contain(전체) | background-size: bg-contain |
border 스타일 속성면적의 테두리를 상하좌우 4방향에서 각기다르게 설정 할 수 있는 border라는 속성 입니다.
테두리 굵기 관련 하여 다음클래스들을 제공합니다.
| 클래스 이름 | 의미 |
| border | border-width: 1px |
| border-t | border-top-width: 1px |
| border-r | border-right-width: 1px |
| border-b | border-bottom-width: 1px |
| border-l | border-left-width: 1px |
테두리 스타일 관련하여 다음과 같은 클래스도 제공합니다.
| 클래스 이름 | 의미 |
| border-solid | border-style: solid |
| border-dashed | border-style: dashed |
| border-dotted | border-style: dotted |
| border-double | border-style: double |
| border-none | border-style: none |
border- radius 스타일 속성
모서리를 둥그게 만드는 border-radius 스타일 속성을 제공합니다.
| 클래스 이름 | 의미 |
| rounded | border-radius: 0.25rem |
| rounded-full | border-radius: 9999px |
| rounded-sm | border-radius: 0.125rem |
| rounded-md | border-radius: 0.375rem |
| rounded-lg | border-radius: 0.5rem |
| rounded-xl | border-radius: 0.75rem |
| rounded-2xl | border-radius: 1rem |
위쪽 아래쪽 모서리만 둥글게 하는법
rounded-(t | b)-(sm | md | lg | xl | 2xl ...)
한쪽 모서리만 둥글게 하는법
rounded-(tl | tr | bl | br)-(sm | md | lg | xl | 2xl ...)
3. Avatar 컴포넌트 만들기
rounded 클래스를 활용해 아바타 이미지를 동그란 원 모양으로 만들겠습니다.
4. display 스타일 속성
CSS에서 display스타일 속성은 요소배치를 결정하는 중요한 속성입니다. 설정할 수 있는 값은 많지만 테일윈드CSS에서는 다음과같이 사용합니다.
| 클래스 이름 | 의미 |
| hidden | display: none |
| block | display: block |
| inline-block | display: inline-block |
| inline | display: inline |
| flex | display: flex |
수평으로 배치되는 HTML 요소들을 inline요소라고 합니다. 더이상 수평으로 배치할 수 없을때 줄을 바꾼 다음 왼쪽에서 오른쪽으로 배치됩니다. inline요소는 width와 height 스타일 속성값을 명시적으로 사용할 수 없습니다.
block 요소는 수직으로 배치되는 HTML 요소들을 의미하며 <div>가 대표적입니다. block요소는 width와 height 스타일 속성값을 명시적으로 설정할 수 있습니다.
inline-block요소는 inline 과 block의 특성을 결합한 것 입니다. inline이므로 수평으로 배치되지만 block이므로 width와 height 스타일 속성값을 설정할 수 있습니다.
inline-block 요소는 width와 height스타일 속성값이 적용되고 자식요소가 수평으로 배치됩니다.
inline요소는 width와 height스타일 속성값이 적용되지 않고 수평으로 배치됩니다.
blcok요소는 width 와 height 속성의 스타일이 적용되고 수직으로 배치가됩니다.
5. visibility 스타일 속성
화면을 구현하다보면 어떠한 요소를 나타나지 않게 해야 할 때가 있습니다. 이때 CSS에서는 visibility스타일 속성을 이용합니다.
속성 값으로는 visible, hidden 두개값 중에 하나를 설정할 수 있습니다. visible은 화면에 보이고 hidden은 화면에 나타나지 않습니다
| 클래식 이름 | 의미 |
| visible | visibility: visible |
| invisible | visibility: hidden |
6. position과 left, top, right, bottom 스타일 속성
위치관련 스타일 속성은 그냥 사용할수가 없고 position t스타일 속성에 absolute라는 값이 설정되어있어야 합니다.
| 클래스 이름 | 의미 |
| absolute | position: absolute |
| relative | position: relative |
absolute를 설정한 요소의 위치는 좌표가 되는 기준이 있어야 합니다.
7. z-index 스타일 속성
해당 HTML요소들에는 '쌓임 맥락' 이란 메커니즘이 발생합니다. 쌓인 맥락은 z축을 사용한 html요소의 3차원 개념화 입니다.
여기서 z축은 모니터와 모니터를 보는사람의 눈사이의 가상의 축을 의미합니다.
값이 크면 클수록 사람의 눈쪽으로 가까운 것을 의미합니다.
테일윈드 CSS는 다음과 같은 z-index클래스를 제공합니다
| 클래스 이름 | 의미 |
| z-0 | z-index: 0 |
| z-10 | z-index: 10 |
| z-20 | z-index: 20 |
| z-30 | z-index: 30 |
| z-40 | z-index: 40 |
| z-50 | z-index: 50 |
| z-auto | z-index: auto |
8. overlay 컴포넌트 만들기
웹 페이지를 디자인 하다보면 사용자에게 상자를 보여주고 대화상자 영역 밖의 버튼을 클릭할 수 없게 만들어야 할 때가 있습니다.
이런 기능을 하는 대화 상자를 모달 대화 상자 라고 합니다. 모달 상자가 나타나면 다른곳을 사용자가 임의로 클릭할 수 없게 되는 화면이 오버레이 라고합니다.
