본문 바로가기
AI ／ DL/엘리스 SW 코딩 훈련 트랙

[SW 코딩 훈련] 핵심 HTML/CSS 기초 04. 웹 사이트의 레이아웃

by bri9htstar 2022. 11. 2.

박스 모델

박스 모델은 어떠한 요소(content)가 있을 때, 이 컨텐츠를 감싸는 큰 세 가지 축을 의미한다. 겉에서 봤을 때 마치 상자처럼 감쌌다고 해서 박스 모델이라 한다.

박스 모델 구조

컨텐츠의 가장 바깥에 공백을 둘 수 있는데 이를 margin이라 한다. 컨텐츠와 border 사이의 공백을 padding이라 한다. margin은 다른 요소와의 공백이라 볼 수 있다. border는 경계인데 두께에 따라 padding, margin도 달라질 수 있다.

 

margin과 padding의 차이

margin과 padding의 차이

margin은 border 바깥에, padding은 border 안쪽에 여백을 만든다. border가 항상 기준이 된다. padding은 공간이 여백을 포함한 크기로 변경되는 점에 유의해야 한다. padding을 주면 컨텐츠와 border 사이에 틈이 생겨서, border 안쪽의 공간이 커지는 것과 동일한 효과를 가지게 된다. margin은 아무리 늘려봤자 공간, 즉 틀에는 변함이 없다. 따라서 margin을 주냐 padding을 주냐는 큰 차이가 있다.

top right bottom left 순서로 한 줄에 작성 가능

Block 요소와 Inline 요소

Block 요소의 특징

  • <p> 태그가 대표적이다.
  • 줄바꿈 현상이 나타난다.
  • width height 값 사용 가능 → 공간 만들기 가능(가변적)
  • margin과 padding 값 사용 가능 → 상하 배치 작업 가능

Inline 요소의 경우는 줄바꿈 현상이 나타나지 않고 특정한 공간을 차지하지 않는다. 따라서 width height, margin과 padding 값에 영향을 받지 않는다. 이런 요소를 사용하기 위해서 Block 요소를 하나 겉으로 감싸서 그것에 대해서 Block 요소처럼 관리해줄 수 있다. 이런 방법을 통해 HTML 상에서 구획을 지정하고, CSS를 활용해서 해당 Block에 특정 스타일을 입힐 수 있는 것이다.

 

마진 병합 현상

margin은 border 바깥에서 다른 컨텐츠와의 관계를 나타냈다. margin에서 발생하는 특이한 현상인 마진 병합 현상을 크게 두 가지 형태로 나눌 수 있다.

형제지간의 마진 병합

여기서 두 div는 형제지간인데, 여기서 두 객체 사이의 margin은 margin-bottom과 margin-top 중 숫자가 큰 값으로 적용된다. 밑의 객체 입장에서는 이미 충분한 margin이 있기 때문에 더 이상 margin을 만들지 않는다. 동일한 값을 입력하면 당연히 그 값으로 margin이 적용된다.

부모 자식간의 마진 병합

자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미친다.(margin-top: 100px;)

자식의 margin이 부모에게도 영향을 끼칠 수 있는데 이런 경우를 부모 자식간의 마진 병합이라 부른다.

마진 병합 현상은 형제 관계에 있어서, 혹은 부모자식 관계로 인해서 두 마진이 겹치거나 함께 사용되는 현상을 의미한다.

 

레이아웃에 영향을 미치는 속성

display

Block과 Inline 요소의 성격을 바꿀 때 사용한다. inline-block을 사용하면 두 요소의 성격을 모두 가진다. 여기서 inline-block은 줄바꿈은 이루어지지 않고, Block처럼 width와 height는 지정할 수 있다. 그런데 이 둘을 지정하지 않으면 마치 Inline처럼 컨텐츠의 길이만큼 영역이 잡힌다.

 

float

특정한 요소가 왼쪽 혹은 오른쪽에 있는지를 float를 통해 지정할 수 있다. 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용한다. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것이다.

레이어는 어떤 요소 간의 위아래라고 생각하면 좋다(겹친다는 개념). 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left;을 연속적으로 입력한다.

 

Clear(???)

float에 대한 속성을 제어하고자 할 때 사용한다. Clear의 의미는 정렬을 하고 남은 공간을 어떻게 관리할지, 비울지 말지를 결정한다고 보면 된다. / Clear : none, left, right, both

 

브라우저와 공간 사이의 공백 제거하기

<html>과 <body> 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 한다. 없애주지 않으면 공백이 발생한다. 혹은 *로 모든 html 태그 선택 가능하다.

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>레이아웃에 영향을 미치는 속성 - clear</title>
  
  <style>
    
    header {
      width: 100%;
      height: 100px;
      background-color: yellow;
    }
    
    #left {
      float: left;
      
      width: 200px;
      height: 200px;
      background-color: red;
    }
    
    main {
      float: left;
      
      width: 300px;
      height: 200px;
      background-color: green;
    }
    
    #right {
      float: right;
      
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    
    footer {
      width: 100%;
      height: 100px;
      background-color: black;
      
      /* 지시사항 1번 내용을 코드로 작성해보세요. */
      clear: both;
    }

    /* 지시사항 2번 내용을 코드로 작성해보세요. */
    html, 
    body {
        margin:0; 
        padding:0;
    }
    
  </style>
  
</head>
<body>

  <header></header>
  
  <article id="left"></article>
  <main role="main"></main>
  <article id="right"></article>
  
  <footer></footer>

</body>
</html>
<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>마진병합현상</title>
  
  <style>
    #box1 {
      width: 100%;
      height: 200px;
      background-color: yellow;
      /* 지시사항 1번 내용을 코드로 작성해보세요. */
      margin-bottom: 150px;
    }  
    
    #box2 {
      width: 100%;
      height: 200px;
      background-color: pink;
      /* 지시사항 2번 내용을 코드로 작성해보세요. */
      margin-top: 100px;
    }
    
    /* 지시사항 4번 내용을 코드로 작성해보세요. */
    main {
        width: 100%;
        height: 400px;
        background-color: yellow;
        margin-top: 100px;
    }
    
    /* 지시사항 5번 내용을 코드로 작성해보세요. */
    article{
        width: 100%;
        height: 100px;
        background-color: red;
        margin-top: 100px;
    }
    
  </style>
  
</head>
<body>
  
  
  <!-- 형제 지간에 발생하는 마진 병합 현상 -->
  <div id="box1"></div>
  <div id="box2"></div>
  
  
  <!-- 부모 자식 지간에 발생하는 마진 병합 현상 -->
  <main role="main">  
    <article></article>
  </main>
  

</body>
</html>

웹사이트 레이아웃

이번 장에서는 웹사이트의 레이아웃을 구성하는 방법을 배웠어요.
많이 어려우셨나요?
우리가 배운 내용을 되돌아보며 확인해봅시다 😊

 

 

1. 박스 모델

Point I
margin과 padding의 차이

<style>
    div {
    ...
    margin-left: 100px; 
    padding-left: 100px;
    }
</style>
  • .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦
  • .padding-left: border 안쪽에서 왼쪽에 여백을 만듦
  • top, right, bottom, left에 여백을 만들 수 있음
  • 공간이 여백을 포함한 크기로 변경되는 점 유의

Point II
top right bottom left 순서로 한 줄에 작성 가능

<style>
    div { margin: 100px 0 0 100px; }
</style

 

 

2. Block 요소와 Inline 요소

Point I
Block 요소의 특징

<style>
    p {
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
</style>
  • <p> 태그가 대표적
  • 줄바꿈 현상이 나타남
  • width/height 값 사용 가능 (공간 만들기 가능)
  • margin과 padding 값 사용 가능 (상하 배치 작업 가능)

Point II
Inline 요소의 특징

  • 줄바꿈 현상 없음
  • width/height 값 적용 불가
  • margin /padding /bottom 값 적용 불가

 

 

3. 마진 병합 현상

Point I
형제지간의 마진 병합: margin-bottom과 bottom-top 중 숫자가 큰 값으로 적용

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

 

.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { bottom-top: 100px; }

Point II
부모 자식간의 마진 병합: 자식 뿐만 아니라 부모에도 영향을 미침

<main role="main">
    <article>
    </article>
</main>

 

article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
  • 자식인 <article>뿐만 아니라 부모인 <main>에도 영향을 미침

 

 

4. 레이아웃에 영향을 미치는 속성

Point I
display: Block과 Inline 요소의 성격을 바꿀 때 사용

p { display: inline; }
a { display: block; }
a {display: inline-block; }
  • inline-block을 사용하면 두 요소의 성격을 모두 가짐

Point II
float: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

<div class="left"> Hello World </div>
<div class="right"> Hello World </div

 

.left { float: left; }
.next {float: left; }

Point III
clear: float에 대한 속성을 제어하고자 할 때 사용

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>

 

footer { clear: both; }

Point IV
브라우저와 공간 사이의 공백 제거하기

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>
  • <html>과 <body> 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
  • 혹은 *로 모든 html 태그 선택 가능
저작자표시 (새창열림)

'AI ／ DL > 엘리스 SW 코딩 훈련 트랙' 카테고리의 다른 글

[SW 코딩 훈련] 핵심 JavaScript 기초 02. 자바스크립트의 객체와 연산  (0) 2022.11.08
[SW 코딩 훈련] 핵심 JavaScript 기초 01. 자바스크립트 시작하기  (0) 2022.11.08
[SW 코딩 훈련] 핵심 HTML/CSS 기초 03. 웹 사이트의 디자인Ⅱ  (0) 2022.11.01
[SW 코딩 훈련] 핵심 HTML/CSS 기초 02. 웹 사이트의 디자인Ⅰ  (0) 2022.10.30
[SW 코딩 훈련] 핵심 HTML/CSS 기초 01. 웹사이트 만들기  (0) 2022.10.11

관련글

댓글

티스토리툴바