Html div 화면 3분할 - html div hwamyeon 3bunhal

Question

HTML/CSS에서 div 3개를 나란히 정렬하는 방법에 대해 포스팅하겠습니다.

목차 Show

1. float와 margin이용하기
2. flex 이용하기
레이아웃을 위한 HTML을 만들기
1. 화면 분할
2. Atomic CSS 방법론
3. html이 가진 기본 스타일 및 레이아웃 리셋
1) html이 가진 기본 스타일
2) 레이아웃 리셋
Flexbox로 레이아웃 잡기
1. display: flex
2. flex-direction
3. flex 속성
4. justify-content / align-items
1) 콘텐츠 수평 정렬 (justify-content)
2) 콘텐츠 수직 정렬 (align-items)
와이어프레임 설계 및 목업 구현
1. 변수를 활용한 html
2. 하드코딩를 활용한 html
3. id 및 class 사용

<div> 요소 3개를 그냥 배치하면 block요소이기 때문에 세로로 배치됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>alignment practice</title>
    <link href="alignpractice.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="parent">
        <div class="first">first</div>
        <div class="second">second</div>
        <div class="third">third</div>
    </div>
    
    
</body>
</html>

.first {
    border: 1px solid red;
    width:30%;
    box-sizing: border-box;
}

.second{
    border: 1px solid green;
    width:30%;
    box-sizing: border-box;
}

.third{
    border: 1px solid blue;

    width:30%;
    box-sizing: border-box;
}

결과

이제 CSS를 이용해 왼쪽, 가운데, 오른쪽으로 배치해보도록 하겠습니다.

방법은 두가지가 있습니다.

1. float와 margin이용하기

.parent{
    width: 90%;
    margin: 10px auto;
}

.first {
    border: 1px solid red;
    float: left;
    width:30%;
    box-sizing: border-box;
}

.second{
    border: 1px solid green;
    float: left;
    margin-left: 5%;
    width:30%;
    box-sizing: border-box;
}

.third{
    border: 1px solid blue;
    float: right;
    width:30%;
    box-sizing: border-box;
}

결과

2. flex 이용하기

.parent{
    width: 90%;
    margin: 10px auto;
    display: flex;
}

.first {
    border: 1px solid red;
    flex:1;
    width:30%;
    box-sizing: border-box;
}

.second{
    border: 1px solid green;
    flex:1;
    margin: 0px 5%;
    width:30%;
    box-sizing: border-box;
}

.third{
    border: 1px solid blue;
    flex:1;
    width:30%;
    box-sizing: border-box;
}

결과

가운데 요소에 margin값을 줘서 1번 방법과 같은 결과가 나오도록 했습니다.
flex는 부모요소의 display를 flex로 설정하고 자식요소의 flex값을 설정하는 방법입니다.

레이아웃을 위한 HTML을 만들기

1. 화면 분할

콘텐츠의 흐름은 좌에서 우, 위에서 아래
CSS로 화면을 구분 시 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업 진행
수직분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
*수평으로 구분된 요소에 height 속성을 추가하면 수평분할을 보다 직관적으로 할 수 있음

2. Atomic CSS 방법론

.w70 { width: 70%; }
.h40 { height: 40%; }

클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80을 CSS로 구현
클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법

3. html이 가진 기본 스타일 및 레이아웃 리셋

1) html이 가진 기본 스타일

body 태그가 가진 기본 스타일에 약간의 여백이 존재하여 박스의 시작을 정확히 (0,0)의 위치에서 시작하기 불가
width, height 계산이 여백을 포함하지 않음
브라우저마다 기본 스타일 차이 존재

2) 레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

1. display: flex

부모 박스요소에 적용해 자식 박스의 방향과 크기를 결정
기본값으로 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치
*자식 요소는 flex라는 속성에 값을 적용(flex: 0 1 auto)

2. flex-direction

flexbox는 박스가 수직으로 분할되는 것이 기본값이지만 방향을 설정해 수평으로 분할 가능
flex-direction 속성은 부모 박스요소에 적용
값 : row(기본값) / column (수평 분할)

3. flex 속성

자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치
자식 요소의 flex 속성을 추가하지 않으면 기본값이 적용(flex: 0 1 auto)
기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용
flex에 적용되는 grow, shrink, basis는 각 값을 따로 지정할 수 있음
grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라짐

flex: <grow> <shrink> <basis>
flex: 0 1 auto // 기본값

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

1) grow

자식 박스는 얼마나 늘어날 수 있는가
flex-grow 속성에 적용하는 값은 비율을 의미
basis를 제외한 여백을 비율대로 나누어 갖음
모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가짐

(1) box 클래스의 flex-grow 값을 1로 설정

.box {
  flex: 1 1 auto;
}

모든 박스가 동일한 비율로 가로 길이가 늘어남

(2) target 클래스의 flex-grow 값을 1로 설정

.box {
  flex: 0 1 auto;
}

.target {
  flex: 1 1 auto;
}

target 박스 하나에만 flex-grow 속성 값이 1인 경우 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어남
*다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지를 의미

(3) box 클래스 & target 클래스의 flex-grow 값을 설정

.box {
  flex: 1 1 auto;
}

.target {
  flex: 1 1 auto;
}

target 클래스에 적용된 flex-grow 속성의 값이 1, box 클래스에 적용된 flex-grow 속성의 값이이 1일 경우, grow가 적용된 전체 값은 1+1+1이므로 각 자식 박스의 가로 길이는 1/3의 길이를 가짐

.box {
  flex: 1 1 auto;
}

.target {
  flex: 2 1 auto;
}

target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 2+1+1이므로 target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이를 가짐

2) shrink

자식 박스는 얼마나 줄어들 수 있는가
shrink는 grow와 반대로 설정한 비율만큼 박스 크기가 작아짐
실제 크기를 예측하기가 어렵기 때문에 grow 속성에 변화를 주는 방식 추천
0으로 세팅시 basis보다 작아지지 않아 고정폭을 쉽게 만들 수 있음

3) basis

.left {
  flex: 0 1 100px; 
  // grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않음
}

.right {
  flex: 1 1 auto; 
  // grow를 1로 설정해 나머지 공간을 채워줌
}

박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전 기본 크기
flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선

4. justify-content / align-items

콘텐츠 정렬
justify-content : main axis를 기준으로 정렬
align-items : cross axis를 기준으로 정렬
flex-direction 속성의 값을 column일 경우 main과 cross axis는 서로 바뀜

1) 콘텐츠 수평 정렬 (justify-content)

옵션 : flex-start, flex-end, center, space-between

2) 콘텐츠 수직 정렬 (align-items)

옵션 : flex-start, flex-end, center, stretch

와이어프레임 설계 및 목업 구현

와이어프레임 : 화면단위의 레이아웃을 설계하는 작업
*레이아웃의 뼈대로 전체적은 구조를 보여줌
목업 : 실제품을 만들어보기 전 실물과 비슷하게 시제품을 제작하는 작업
*하드코딩을 통해 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
프로토타이핑 : 처음부터 종료까지 핵심 동작이 가능하게 구현된 앱
*개발 초기에 모형을 만들어 기능의 요구사항을 파악한 후 반영하는 개선 방식
하드코딩 : 데이터를 코드 내부에 직접 입력하는 것

1. 변수를 활용한 html

let comment = { user: '박소민', content: '우리집 고양이 까까는...' }

2. 하드코딩를 활용한 html

<div class="writer">박소민</div>
<div class="content">우리집 고양이 까까는...</div>

3. id 및 class 사용

id : 반복되지 않는 고유한 것
class : 반복되는 것

div 4분할 div 4개 정렬 HTML 화면 분할

Html div 화면 3분할 - html div hwamyeon 3bunhal

1. float와 margin이용하기

2. flex 이용하기

레이아웃을 위한 HTML을 만들기

1. 화면 분할

2. Atomic CSS 방법론

3. html이 가진 기본 스타일 및 레이아웃 리셋

1) html이 가진 기본 스타일

2) 레이아웃 리셋

Flexbox로 레이아웃 잡기

1. display: flex

2. flex-direction

3. flex 속성

1) grow

(1) box 클래스의 flex-grow 값을 1로 설정

(2) target 클래스의 flex-grow 값을 1로 설정

(3) box 클래스 & target 클래스의 flex-grow 값을 설정

2) shrink

3) basis

4. justify-content / align-items

1) 콘텐츠 수평 정렬 (justify-content)

2) 콘텐츠 수직 정렬 (align-items)

와이어프레임 설계 및 목업 구현

1. 변수를 활용한 html

2. 하드코딩를 활용한 html

3. id 및 class 사용

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의