HTML & CSS 챌린지 5일차 TIL

김선엽·2024년 3월 22일

5. Display 속성 & Border 속성

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

display 속성 종류

inline: 요소를 인라인 요소로 바꾼다

block: 요소를 블록 요소로 바꾼다

inline-block: 요소를 인라인처럼 배치하되, block의 특성(너비, 높이 조절 가능)을 가지게 바꾼다.

none: 요소를 숨긴다.

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.
예시) span{ border: 2px solid green; }
단축속성은 따로 지정해줄 수도 있음
border-color
border-width
border-style

6. 박스모델 1편, 박스모델 소개

박스모델

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성을 결정할 수 있다. 하나의 박스는 다음 네 개의 영역으로 구성된다.

콘텐츠 영역: width, height

안쪽 여백: padding

경계선(테두리): border-width

바깥쪽 여백: margin

7. 박스모델 2편, margin padding 다루기

여백은 상화좌우 네 개의 면으로 나눈다. 작성자는 각 면의 두께를 개별적으로 정의할 수 있다.

여백 조절 방법

하위 속성 정의하기

여러 값을 한 번에 정의하기

하위속성 정의하기

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

여러 값을 한 번에 정의하기

margin: 30px; -> 상하좌우 모두
margin: 30px 10px; -> 상하, 좌우
margin: 30px 10px 10px -> 위, 좌우, 아래
margin: 30px 10px 10px 30px -> 위, 오른쪽, 아래, 왼쪽

13. flexbox 1편, 정의 및 사용 방법

flexbox란?
박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox는 flex 컨테이너라고도 한다. flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex; 를 적용해야 한다. flexbox는 자식 요소의 기본 마진값을 무시하고 요소를 배치한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML & CSS 챌린지 5일차</title>
    <style>
        .container{display: flex;}
        .item{
            width:80px; height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

</body>
</html>

flexbox에는 주축과 교차축이 있다.(행, 열 사용자가 선택)
flex-direction 속성을 이용해서 진행 방향을 정할 수 있다.

row

column

row-reverse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML & CSS 챌린지 5일차</title>
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        .item{
            width:80px; height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

</body>
</html>

14. flexbox 2편, 몇 가지 관련 속성

flexbox에는 주축과 교차축의 개념이 중요하다.
주축과 교차축을 기준으로 요소를 배치할 수 있다.

요소 배치 방법

주축 배치 방법: justify-content

교차축 배치 방법: align-items

교차축 개별요소 배치 방법: align-self

줄 바꿈 여부: flex-wrap

justify-content: flex 컨텐츠의 주축에서 어떤식으로 정렬을 할지 선택한다.

center: 주축의 가운데

flex-start: flex의 시작부분에

flex-end: flex의 끝부분에

space-around: 균등하게 벌리겠다라는 의미

space-between: 첫 번째, 마지막 요소를 끝에 붙이고 나머지를 균등하게