html & css_ 박스모델 과 애니메이션

jjyu_my·2024년 1월 18일

개발공부 기술블로그

HTML & CSS

목록 보기

5/19

1️⃣ Box model

박스모델이란 css를 구성하는 기반이 되는 개념으로
4개의 레이아웃 으로 구성됩니다.
이 4개의 레이아웃을 하나의 사각형 상자로 간주하며, 각 콘텐츠, 패딩, 보더(테두리), 패딩으로 구성되어 있습니다.

**1.콘텐츠영역 (내용) :

크기 조절: 콘텐츠 영역의 크기는 width와 height 속성을 사용하여 조절할 수 있습니다.

배경 스타일 :background-color, background-image 등의 속성을 사용하여 콘텐츠 영역의 배경을 스타일링할 수 있습니다.

박스 모델: 콘텐츠 영역은 박스 모델의 일부로, 패딩(Padding), 테두리(Border), 마진(Margin)과 함께 요소의 전체 크기를 결정합니다.
박스 크기 계산: box-sizing 속성은 박스 모델의 크기를 어떻게 계산할지를 지정합니다.
기본값인 content-box는 콘텐츠 영역만을 기준으로 크기를 계산합니다.

2.패딩영역 (안쪽여백)

패딩 속성: 패딩은 padding 속성을 사용하여 정의합니다. 이 속성은 상, 우, 하, 좌의 방향으로 각각 값을 설정할 수 있습니다.

박스 모델에서의 위치: 패딩은 콘텐츠 영역 주위에 위치하며, 콘텐츠와 테두리 사이의 여백을 만듭니다.
값의 단위: 패딩의 값은 픽셀(px), 백분율(%), em 등 다양한 단위를 사용할 수 있습니다.

단축 속성: padding 속성은 상, 우, 하, 좌의 방향에 따라 각각 값을 설정할 수 있지만, 단축 속성을 사용하여 한 번에 모든 방향을 설정할 수도 있습니다.

3.보더영역 (테두리)

보더 속성: 보더는 border 속성을 사용하여 보더의 스타일, 너비, 색상을 설정합니다.
보더 스타일: 보더의 스타일은 border-style 속성으로 설정할 수 있습니다.
일반적인 속성값으로는 solid (실선), dashed (대시선), dotted (점선) 등이 있습니다.

보더 너비: 보더의 너비는 border-width 속성을 통해 설정할수 있으며, 픽셀(px), em, 백분율(%) 등의 단위를 사용할 수 있습니다.

보더 색상: 보더의 색상은 border-color 속성을 통해 설정할 수 있습니다.
각 방향별 설정 : border-top, border-right, border-bottom, border-left 속성을 사용하여 각 방향을 설정할수 있으며 각 방향에 대한 보더를 따로 있습니다.

단축 속성: border 속성을 사용하여 한 번에 모든 보더 속성을 설정할 수 있습니다.

4.마진영역

마진 속성: 마진은 margin 속성을 사용하며, 이 속성은 상, 우, 하, 좌의 방향으로 각각 값을 설정할 수 있습니다.
단위와 값: 마진의 값은 픽셀(px), em, 백분율(%) 등 다양한 단위를 사용할 수 있습니다.
자동(Margin Auto):
margin 속성 중 하나의 값이 auto일 경우, 해당 방향의 마진을 자동으로 계산합니다. 이는 특히 가로 중앙 정렬에 사용됩니다.
각 방향별 설정: margin-top, margin-right, margin-bottom, margin-left 속성을 사용하여 각 방향에 대한 마진을 따로 설정할 수 있습니다.
단축 속성: margin 속성을 사용하여 한 번에 모든 방향의 마진을 설정할 수 있습니다.

2️⃣ display

디스플레이 속성은 CSS에서 요소의 표시 방법을 정의하며 각각요소에 속성값을 주어 해당요소가 화면에 어떻게 표시되는지 보여줍니다.
주요 속성값으로는 inline, block, nline-block, none 등이 있습니다

inline

영역의 크기가 컨텐츠 크기로 정해진다
높이,너비 지정 불가능
마진과 패딩의 탑과 바텀을 지정할수 없다
여러요소를 추가하면 가로방향으로 추가된다
- <span>, <a>, <strong>

block

영역의 크기를 너비와 높이로 지정할수있다
너비를 지정하지 않으면 가로줄 전체크기를 차지한다
여러요소를 추가하면 세로방향으로 추가된다
<div>, <h1>, <from>

nline-block

inline 과 block 의특징을 모두 가지고 있는 형태입니다
영역의 크기를 상하 좌우 모두 지정할수있습니다.
inline 처럼 한 줄에 나란히 가로 배치되지만, block 처럼 너비와 높이를 설정할 수 있습니다.
<input>

none

해당요소를 화면에 표시하지 않는다
다른 요소들이 해당 요소를 대신 차지하거나, 아예 레이아웃에서 제외 된다.
개발자 도구에서 확인시 코드상으로는 존재한다.

flex, grid

플렉스박스나 그리드 레이아웃을 사용하여 요소를 배치할 때 사용됩니다.

📌 flex 란?

유연한 박스 모델(Flexible Box Model)을 정의하는 CSS 레이아웃 모듈입니다.

Flexbox를 사용하면 웹 페이지의 구성 요소를(가로배치 또는 세로배치. 1차원 직선의 형태) 좀 더 쉽게 정렬하고 배치할 수 있습니다. 이는 특히 요소의 크기나 순서에 따라 동적으로 레이아웃을 조정해야 하는 경우에 유용합니다

컨테이너와 아이템들이 함께있어야합니다.
부모 자식 관계가 성립되어야만 사용할수있다
아이템들의 부모에게 속성값을 주어 설정할수있다

컨테이너 (Container):
- 컨테이너는 Flexbox 레이아웃을 적용하기 위한 부모 요소를 말합니다. Flexbox를 사용하려면 해당 컨테이너에 display: flex; 또는 display: inline-flex; 속성을 적용해야 합니다.
- 주로 컨테이너는 아이템들을 담아놓는 바깥쪽 영역을 나타냅니다.
아이템 (Item):
- 아이템은 Flexbox 컨테이너 내부에 있는 자식 요소들을 나타냅니다. 이들은 컨테이너 내에서 정렬이나 배치되는 대상입니다.
- 컨테이너 내부의 정렬을 위해 담아놓은 아이템들은 1개 이상일 수 있습니다.
주축(Main Axis)과 교차축(Cross Axis):
- Flexbox에서는 주축(main axis)과 교차축(cross axis)이라는 개념이 있습니다. 주축은 기본적으로 왼쪽에서 오른쪽으로 흐르는 수평 방향이며, 교차축은 위에서 아래로 흐르는 수직 방향입니다. 이는 주로 컨테이너 내의 아이템을 정렬하는 방향을 나타냅니다.
컨테이너에 사용 가능한 속성:
- justify-content: 주축을 따라 아이템을 정렬합니다.
- align-items: 교차축을 따라 아이템을 정렬합니다.
- flex-direction: 주축의 방향을 지정합니다.
아이템에 사용 가능한 속성:
- order: 아이템의 순서를 조절합니다.
- align-self: 개별 아이템의 교차축 정렬을 재정의합니다.

📌 grid 레이아웃이란?

CSS Grid 레이아웃란 주요 디스플레이와 아이템들을 사용하여 브라우저에 이차원(면)적인 레이아웃을 구성 하고, 그리드 컨테이너 내에서 행(row)과 열(column)을 정의합니다.

각 셀에 콘텐츠를 배치하여 복잡한 웹페이지 레이아웃을 쉽게 구현할수있습니다.

그리드 컨테이너와 그리드 아이템:
- 그리드를 구현하기 위해 부모 요소를 그리드 컨테이너로 정의합니다.
- 자식 요소들은 그리드 아이템으로서 그리드 컨테이너 내에서 배치됩니다.
- display: grid; 속성을 사용하여 그리드 컨테이너를 생성합니다.
행과 열의 정의:
- grid-template-rows와 grid-template-columns 속성을 사용하여 그리드의 행과 열을 정의합니다.
- 각각의 행과 열에는 크기, 비율, 단위 등을 지정할 수 있습니다.
템플릿 영역의 정의:
- grid-template-areas 속성을 사용하여 그리드 영역을 문자열로 정의하여 레이아웃을 직관적으로 구성할 수 있습니다.
자동 크기 조절:
- fr 단위를 사용하여 사용 가능한 공간을 비율로 분배하고, auto (크기) 및 minmax (함수)를 사용하여 행과 열의 크기를 유연하게 조절할 수 있습니다.
간격 및 여백 관리:
- grid-gap 속성을 사용하여 그리드 아이템 사이의 간격을 지정할 수 있습니다.
- grid-row-gap 및 grid-column-gap을 사용하여 행과 열 간의 간격을 별도로 지정할 수 있습니다.
단위로는 -

fr(fraction) : 비율을 나타내는 단위로, 사용 가능한 공간을 그 비율에 따라 나누어 각 열 또는 행에 배치합니다.
min-content: 아이템 내용의 최소 크기를 기준으로 설정합니다.

특히, 영어로 작성한 아이템 내용 중에서 가장 긴 단어를 기준으로 해당 아이템의 최소 크기를 설정합니다.
max-content: 아이템을 콘텐츠에 따라 최대한 늘리고, 남은 공간을 다른 아이템이 차지하도록 합니다.
auto-fill: 컨테이너의 크기가 변경되면 남은 공간에 아이템을 배치하고, 필요한 만큼 아이템을 자동으로 배치합니다.
auto-fit: 컨테이너를 늘릴 때 중간에 남는 공간이 생겨도 요소를 늘려서 빈 자리 없이 채웁니다.

3️⃣ 애니메이션

웹 페이지에서 요소들에 일정 기간 동안 변화를 주는 효과를 만들기 위한 기술입니다

@keyframes 규칙 정의: 애니메이션의 각 단계와 스타일을 정의하기 위해 @keyframes 규칙을 사용합니다.
애니메이션 속성 적용: 애니메이션을 적용할 대상 요소에 animation 속성을 사용하여 애니메이션 이름, 지속 시간, 반복 횟수 등을 설정합니다.

애니메이션의 이름(@keyframes 규칙의 이름).
2s: 애니메이션의 지속 시간(2초).
ease-in-out: 애니메이션의 타이밍 함수(ease-in-out은 천천히 시작하고 끝나는 함수).
infinite: 애니메이션의 무한 반복.
옵션 속성 (선택)
animation-delay: 애니메이션 시작 전에 대기하는 시간 설정.
animation-direction: 애니메이션의 방향 설정(정방향, 역방향, 번갈아가며).
animation-fill-mode: 애니메이션이 종료된 후의 상태 유지 설정.

👩🏻‍💻 너무너무 헷갈리는 용어들.. 진짜 반복학습이 중요할듯하다!! 헷갈리지않고 바로바로 답하고 적용할수 있는날이 오기를!!!!!🙏