[HTML/CSS] layout

까꿍·2023년 5월 24일

CSS html

HTMLCSS

목록 보기

5/8

🔲 네모 박스로 쪼개자.

레이아웃을 디자인할 때는 원하는 레이아웃 형태로 세부적인 네모 박스를 구상하고 네모 박스를 <div> 바꾸어 구현한다.

📍 container | wrapper

전체 레이아웃을 감싸는 박스를 의미한다.
주로 최대 width를 지정해줄 때 사용하면 좋다.
해당 <div> 를 가운데 정렬시키면 웹페이지(화면)의 정중앙에 위치하게 된다.

💬 container(wrapper) 박스에 width를 지정하는 이유?

브라우저 화면이 축소되었을 때 내부 div 박스들이 찌그러지는 것을 방지하기 위해서다.

📍 float

요소들을 공중에 띄운다.
주로 <div> 박스들을 가로로 배치할 때 사용한다.

float:left; : 요소들을 공중에 띄워 왼쪽 정렬한다.
float: right; : 요소들을 공중에 띄워 오른쪽 정렬한다.

하지만 대부분의 경우 따지고 보면 float: left; , float: right; 모두 결과물은 동일하게 배치된다.

✍🏻 example

.left-menu {
    width: 20%;
    height: 400px;
    float: left;
}
  
.right-menu {
    width: 80%;
    height: 400px;
    float: left;
}

✔️ float를 사용할 때 주의점

만약, float를 적용시킨 요소 다음에 배치되는 또다른 요소가 존재할 때, float의 성질(:요소를 공중에 붕 띄워 배치)로 인해 다음에 배치되는 또다른 요소가 가려지는(보이지 않는) 현상이 발생할 수 있다.
➽ clear 속성을 이용해 해결

clear: left; : float: left; 해결
clear: right; : float: right; 해결
clear: both; : float: left;, float: right; 모두 해결
➲ 그냥 보통 편하게 clear: both; 를 사용하면 된다.

✍🏻 example

.footer {
    width: 100%;
    height: 100px;
    clear: both;

📍 display: inline-block;

<div> 박스들을 가로 배치 할 수 있는 두번째 방법이다.

display: block; 👉🏻 한 행을 모두 차지
display: inline-block; 👉🏻 자기 크기만큼 차지

.left-menu {
    width: 20%;
    height: 400px;
    background: cornflowerblue;
    display:inline-block;
    vertical-align: top;
}

.right {
    width: 80%;
    height: 400px;
    display:inline-block;
}

✔️ display: inline-block; 을 사용할 때 주의점 ①

display: inline-block; 이 적용되면 해당 요소의 크기만큼 차지되기 때문에 <div> 박스들 사이의 공백을 모두 제거해주어야 한다.
➥ 주로 요소들 사이에 주석을 추가해 공백을 제거해준다.

✍🏻 example

<!-- 요소 사이에 주석을 추가해 공백 제거 -->
<div class="left-menu2"></div><!--
--><div class="right-menu2-">
      
<!-- 부모 요소의 font-size를 0으로 설정 -->
<div style="font-size : 0px;">
    <div class="left-menu2"></div>
    <div class="right-menu2"></div>
</div>

✔️ display: inline-block; 을 사용할 때 주의점 ②

만약, display:inline-block; 을 사용해 가로 배치한 요소에 글자가 입력된다면 요소들의 가로 배치가 깨지는 문제가 발생한다.

이유는 html에서는 모든 글자에 baseline이 존재하는데 (쉽게 생각해 가로줄 노트에 글자를 쓴다는 느낌이다.) 이 baseline에 맞추어 요소들이 가로 배치되기 때문이다.

➥ right의 글자 baseline에 맞추어 left-menu가 배치되었음.

이를 해결하기 위해 vertical-align: top; 속성을 적용시킨다.
➥ baseline을 top(상단)으로 변경시켜준다.

✍🏻 example

.left-menu {
    width: 20%;
    height: 400px;
    display:inline-block;
    vertical-align: top;
}

🧐 간단한 blog 레이아웃 만들기

⌨️ 입력
< html >

<!DOCTYPE html>
<html>
    <head>
        <meat charset = "UTF-8">
        <title> Document </title>
        <link href="css/layout.css" rel="stylesheet">
    </head>
    <body>
        <!-- 전체 레이아웃을 wrap해주는 div
             해당 div를 가운데 정렬시키면 웹 페이지(화면) 정중앙에 위치하게 됨. -->
        <div class="container">
            <div class="post">
                <!-- 프로필 info가 들어갈 div -->
                <div>
                    <img src="image/image_Profile.png" class="profile_photo">
                    <div class="profile_info">
                        <!-- h, p 태그는 기본으로 margin을 가지고 있음. -->
                        <h4 style="margin: 8px;"> 😼 이까꿍 </h4>
                        <p style="color:grey; margin: 8px;"> 1시간 전 </p>
                    </div>
                </div>
                <!-- 블로그 게시글 제목, 내용이 들어갈 div 
                     Tip) 게시글 제목, 내용이 들어갈 div class를 따로 정의하지 않고
                          바로 div style="clear: both"를 사용할 수도 있음.-->
                <div class="blog">
                    <h3 style="margin:auto 10px auto 10px"> 이규리는 바보예요~ </h3>
                    <p style="margin:10px 20px auto 20px"> 왜냐면 이유는 없습니다. 제가 바보라면 그냥 바보인 거예요!
                        오늘은 이규리가 바보인 이유에 대해서 알아보았는데요~
                        다들 유익한 정보되셨길 바라며 우리는 다음 시간에 또 만나요!
                    </p>
                </div>
            </div>
            <div class="photo">
                <img src="image/cat1.jpeg" width="70%" style="margin-top:30px">
            </div>
        </div>
    </body>
</html>

< css >

/* container(=wrap) 박스에 width를 지정하는 이유
    -> 브라우저 화면이 축소되었을 때 내부 div 박스들이 찌그러지는 것을 방지하기 위해서 */
.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.post {
    width: 80%;
    height: 300px;
    /* 방법 1) float: left; 사용 시 float를 사용한 다음 div 속성에 clear: both;를 추가해야 함. */
    float: left;
    /* 방법 2) 단, inline-block;을 사용할 시 div 사이의 공백을 모두 제거해주어야 함.
    display: inline-block; */
}

.photo {
    width: 20%;
    height: 300px;
    /* 방법 1) float: left; 사용 시 float를 사용한 다음 div 속성에 clear: both;를 추가해야 함. */
    float: left;
    /* 방법 2) 단, inline-block;을 사용할 시 div 사이의 공백을 모두 제거해주어야 함.
    display: inline-block; */
}

.profile_photo {
    width:50px;
    /* display: block;을 넣어주면 좋은 이유? */
    display: block;
    float:left;
    margin:20px;
}

.profile_info {
    float:left;
    margin-top: 15px;
}

.blog {
    width: 100%;
    height: 200px;
    clear: both;
}

🖥 출력

Tip 1️⃣ ) h, p 태그는 기본적으로 margin을 가지고 있다.
Tip 2️⃣ ) margin, padding의 상하좌우 한 줄 코드 작성 방법

margin: 10px auto 30px auto ;
    /*   상    우   하    좌  */

✔️ float를 사용할 때 주의점(margin-top)

.profile_info {
    float:left;
    margin-top: 15px;
}
  
.blog {
    width: 100%;
    height: 200px;
    clear: both;
}

profile_info 박스가 float 성질로 인해 공중에 붕 띄워져있다.
따라서, profile_info 박스 아래에 위치하는 blog 박스에 margin-top 속성을 추가하면 작은 숫자로는 적용이 되지 않는 것처럼 보여진다.

위와 같은 문제를 해결하려면,
1. profile_info 박스의 height보다 큰 숫자를 margin-top에 적용시켜준다.

<div class="profile_info">
	<!-- 중략 -->
</div>
<div class="blog" style="clear:both; margin-top:100px;">
	<!-- 중략 -->
</div>

profile_info 박스와 blog 박스 사이에 임의의(아무런 의미가 없는) 박스 하나를 추가해 clear:both;를 적용시켜준다.

<div class="profile_info">
	<!-- 중략 -->
</div>
<!-- 임의의 박스 생성 -->
<div style="clear:both;"></div>
<div class="blog" style="margin-top:10px;">
	<!-- 중략 -->
</div>