고래씌

[CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden) 본문

Front-End/CSS

[CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden)

고래씌 2023. 11. 2. 16:51

1. 레이아웃(Layout)

- 사전적 의미 : 배치, 정리

- 기술적 의미 : 구성 요소들을 제한된 공간안에 효율적으로 배치하는 것을 의미

 

▶ 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

- block : 화면을 수직 분할(행을 나눔) + width/height 속성 사용 가능

- inline : 화면을 수평 분할(하나의 행의 컬럼을 나눔 == 글자처럼 생각) + width/height 속성 사용 불가

- inline-block : inline의 수평분할 + block 크기조절

- none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태

- flex : 요소의 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 방식

 

 

 

■ HTML파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_레이아웃 스타일1</title>
    <link href="resources/css/layout1.css" rel="stylesheet">
</head>
<body>

    <h1>레이아웃(layout)</h1>

    <h3>block 형식의 요소를 inline요소로 변경</h3>
    <!-- .block.area$.inline{$번 영역}*5 -->
    <div class="block area1 inline">1번 영역</div>
    <div class="block area2 inline">2번 영역</div>
    <div class="block area3 inline">3번 영역</div>
    <div class="block area4 inline">4번 영역</div>
    <div class="block area5 inline">5번 영역</div>
    
    <h3>inline형식의 요소를 block으로 변경</h3>
    <!-- span.area${$번 영역}*5 -->
    <span class="area1 block">1번 영역</span>
    <span class="area2 block">2번 영역</span>
    <span class="area3 block">3번 영역</span>
    <span class="area4 block">4번 영역</span>
    <span class="area5 block">5번 영역</span>

    <h3>inline-block 확인하기</h3>
    <div class="block area1 inline-block">1번 영역</div>
    <div class="block area2 inline-block">2번 영역</div>
    <div class="block area3 inline-block">3번 영역</div>
    <div class="block area4 inline-block">4번 영역</div>
    <div class="block area5 inline-block">5번 영역</div>

</body>
</html>

 

 

1) block 형식의 요소를 inline요소로 변경

■ HTML 파일 body태그 안

    <h3>block 형식의 요소를 inline요소로 변경</h3>
    <!-- .block.area$.inline{$번 영역}*5 -->
    <div class="block area1 inline">1번 영역</div>
    <div class="block area2 inline">2번 영역</div>
    <div class="block area3 inline">3번 영역</div>
    <div class="block area4 inline">4번 영역</div>
    <div class="block area5 inline">5번 영역</div>

 

 

■ css 파일

.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}

.block{
    border : 1px solid black;
    width : 150px;
    height : 150px;

    color : white;
    display: block; /* 요소 형식을 block으로 변경 */
}

.inline{
    display: inline;  /* 요소 형식을 inline 변경 */
}

 

 

☞ .block{} 은 화면을 수직분할하여 형식을 지정하는 것인데, 맨 아래가 .inline{} 으로 되어있어 .inlin{}이 우선순위를 갖게되어 이게 적용이 됨.

 

☞ 만약 .block{}이 맨아래에 있었다면 결과는 아래와 같이 출력될 것이다

 

 

 

 

2) inline 형식의 요소를 block으로 변경

■ HTML 파일 body태그 안

    <!-- span.area${$번 영역}*5 -->
    <span class="area1 block">1번 영역</span>
    <span class="area2 block">2번 영역</span>
    <span class="area3 block">3번 영역</span>
    <span class="area4 block">4번 영역</span>
    <span class="area5 block">5번 영역</span>

 

 

■ css 파일

.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}

.block{
    border : 1px solid black;
    width : 150px;
    height : 150px;

    color : white;
    display: block; /* 요소 형식을 block으로 변경 */
}

.inline{
    display: inline;  /* 요소 형식을 inline 변경 */
}

 

 

 

 

3) inline-block 확인하기

■ HTML 파일 body태그 안

    <h3>inline-block 확인하기</h3>
    <div class="block area1 inline-block">1번 영역</div>
    <div class="block area2 inline-block">2번 영역</div>
    <div class="block area3 inline-block">3번 영역</div>
    <div class="block area4 inline-block">4번 영역</div>
    <div class="block area5 inline-block">5번 영역</div>

 

 

=> css 파일에 inline-block을 추가한다!

.inline-block{
    display: inline-block;
}

 

 

■ css 파일

.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}

.inline{
    display: inline;  /* 요소 형식을 inline 변경 */
}

.block{
    border : 1px solid black;
    width : 150px;
    height : 150px;

    color : white;
    display: block; /* 요소 형식을 block으로 변경 */
}

.inline{
    display: inline;  /* 요소 형식을 inline 변경 */
}

.inline-block{
    display: inline-block;
}

 

 

☞ inline-block 는 inline의 수평분할 + block 크기조절이 다 가능하기 때문에 이와 같이 출력된다!

 

 

2. 화면(영역)분할

1) 상하 2분할

▶ 준비물:

    - 감싸는 영역 요소

    - 내부에 영역을 분할할 요소

    - 크기 단위(px/%)

    - display : block

 

 

■ HTML 파일 body 태그 안

    <!-- 감싸는 요소 -->
    <div id="container-1">
        <!-- 분할할 요소 -->
        <div class="div-1"></div>
        <div class="div-1"></div>
    </div>

 

 

■ css 파일

/* 감싸는 영역 요소 */
#container-1{
    border: 3px solid black;
    width: 323px;
    height: 472px;
}

/* 내부에 영역을 분할할 요소 */
.div-1{
    width: 100%;
    height: 50%;
}

.div-1:first-of-type{
    background-color: red;
    height: 30%;
}

.div-1:last-of-type{
    background-color: blue;
    height: 70%;
}

 

☞ 고정크기 단위 영역 분할 → 부모영역의 크기가 변하면 다시 계산을 해주어야 한다.

☞ 그러므로 고정된 값(px)가 아닌, 가변길이(%)를 이용하여 자동으로 계산할 수 있도록 하여야 한다.

 

 

Q. 만약 가변길이가 아닌, 고정길이를 이용하여 계산을 하게된다면....

/* 감싸는 영역 요소 */
#container-1{
    border: 3px solid black;
    width: 323px;
    height: 472px;
}

/* 내부에 영역을 분할할 요소 */
.div-1{

    width: 323px;
    height: 250px;
}

.div-1:first-of-type{
    background-color: red;
    height: 150px;
}

.div-1:last-of-type{
    background-color: blue;
    height: 170px;
}

 

☞ 비율이 안맞게 되는 일이 발생할 수 있다! 이렇게 될 경우 우리가 직접 하나하나 계산을 하면서 값을 넣어주어야 하기 때문에 가변길이로 작성을 해야한다.

 

 

 

2) 상하 3분할

- 감싸는 영역(부모요소) : id : container-2

- 화면 분할 요소 div, class : div-2

- 분할 비율 → 20 : 30 : 50

- 배경색, 크기지정은 자유롭게

 

■ HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_레이아웃 스타일1</title>
    <link href="resources/css/layout1.css" rel="stylesheet">
</head>
<body>

    <h3>상하 3분할</h3>
    <pre>
        - 감싸는 영역(부모요소) : id : container-2
        - 화면 분할 요소 div, class : div-2
        - 분할 비율 -> 20 : 30 : 50
        - 배경색, 크기지정은 자유롭게
    </pre>

    <div id="container-2">
        <div class="div-2"></div>
        <div class="div-2"></div>
        <div class="div-2"></div>
    </div>
</body>
</html>

 

 

■ css 파일

/* 상하 3분할 (20 30 50) */
#container-2{
    border: 3px solid black;
    width: 300px;
    height: 440px;
}

.div2{
    width:  100%;
    /* block의 기본값은 항상 100% */
}

#container-2 > .div-2:nth-of-type(1){
    background-color: yellowgreen;
    height: 20%;
}

#container-2 > .div-2:nth-of-type(2){
    background-color: orangered;
    height: 30%;
}

#container-2 > .div-2:nth-of-type(3){
    background-color: blue;
    height: 50%
}

 

 

☞ #container-2   

id가 container-2 일경우 속성 지정

border: 3px solid black;

width: 300px; 

....

 

☞ .div2

class가 .div2일 경우 속성 지정

 

☞ #container-2 > .div-2:nth-of-type(1) {}

id가 container-2 이면서 자식이 class div-2 이면 같이 선택된 형제들 중에서 1번째 요소 선택

 

☞ #container-2 > .div-2:nth-of-type(2) {}

id가 container-2 이면서 자식이 class div-2 이면 같이 선택된 형제들 중에서 2번째 요소 선택

 

☞ #container-2 > .div-2:nth-of-type(3) {}

id가 container-2 이면서 자식이 class div-2 이면 같이 선택된 형제들 중에서 3번째 요소 선택

 

 

 

3) 좌우 2분할

▶ 준비물

    - 감싸는 영역 요소

    - 내부에 영역을 분할할 요소

    - 크기 단위(고정(px)/가변(%))

    - display : inline-block(약간 문제점이 있을 수 있음)

 

 

■ HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_레이아웃 스타일1</title>
    <link href="resources/css/layout1.css" rel="stylesheet">
</head>
<body>

    <h3>좌우 2분할</h3>

    <div id="container-3">
        <div class="div-3"></div><div class="div-3"></div>
    </div>
 
</body>
</html>

 

 

■ CSS 파일

/* 좌우 2분할 */
#container-3{
    border: 5px solid red;
    width: 400px;
    height: 200px;
}

.div-3{
    width:50%;
    height: 100%;
    display: inline-block;
}

#container-3 > .div-3:first-child{
    background-color: pink;
}

#container-3 > .div-3:last-child{
    background-color: steelblue;
}

 

 

☞ #container-3 > .div-3:first-child{}

id가 container-3이면서 class가 .div-3 요소중 첫번째 자식만 선택하겠다

 

☞ #container-3 > .div-3:last-child{}

id가 container-3이면서 class가 .div-3 요소중 마지막 자식만 선택하겠다

 

 

 

 

4) display : none ;  /  visibility : hidden;

- display : none → 요소는 존재하지만 화면에는 보이지 않음(투명 X)

→ visibility : hidden(투명 O)

 

 

■ HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_레이아웃 스타일1</title>
    <link href="resources/css/layout1.css" rel="stylesheet">
</head>
<body>

    <h3>display : none ; / visibility : hidden;</h3>
    <pre>
        요소는 존재하지만 화면에는 보이지 않음
        (투명 x)

        -> visibility : hidden(투명 o)
    </pre>

    <div class="div-4">test</div>
    <div class="div-4" id="test4">css</div>
    <div class="div-4">test</div>
 
</body>
</html>

 

 

■ CSS 파일

/* display : none ; / visibility : hidden; */
.div-4{
    border: 3px solid black;
    height: 100px;
}

#test4{
    background-color: deeppink;

    /* 요소가 투명한 색으로 변함
        (영역은 차지함)
    */

    visibility : hidden;

    /* 요소는 존재하지만 화면에서 사라지는 상태
        (영역도 차지하지 않는다.)
    */
 
     display:none;
}

#test4+div{
    background-color: black;
}

 

 

☞ 여기서 display:none; 을 주석처리하고 visibility:hidden;만 실행을 하였을 때 아래와 같은 결과 출력됨

 

=> id가 test4에 해당한 요소가 투명한 색으로 변한 것을 볼 수 있음

=> 영역은 차지하지만 화면에는 보이지 않는 설정      visibility:hidden;

 

 

 

☞ visibility:hidden; 을 주석처리하고 display:none; 을 실행한다면...?

 

=> id가 test4에 해당한 요소가 화면에서 아예 보이지 않고 영역도 차지하지 않는 것을 볼 수 있음  display:none;

 

 

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 3-3. 레이아웃(Layout) 스타일 ③ (float / clear)  (0) 2023.11.02
[CSS] 3-2. 레이아웃(Layout) 스타일 ② (영역 관련 속성)  (0) 2023.11.02
[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자)  (0) 2023.11.02
[CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자  (2) 2023.11.02
'Front-End/CSS' Related Articles more