대학생 쩡딱구리

코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기 본문

STUDIES/WEB

코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기

쩡딱구리 2021. 2. 16. 01:12

HTML과 CSS에 대한 개념을 4일 동안 학습한 후 5일부터 본격적으로 웹사이트를 만들기 시작했다!

우선 가장 중요한 뼈대, 레이아웃 만들기!

 

1. div 태그와 span 태그

 HTML 문서에서 div 태그와 span 태그는 정말 많이 사용된다. 둘이 무슨 차이가 있냐고 묻는다면 아래 코드와 결과를 보면 좋다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>DIV 1개</div>
    <div>DIV 2개</div>
    <div>DIV 3개</div>

    <span>SPAN 1개</span>
    <span>SPAN 2개</span>
    <span>SPAN 3개</span>
</body>
</html>

코드 실행 결과

 즉, div와 span의 차이는 줄바꿈의 여부이다. div는 입력 시 자동으로 줄바꿈이 되고, span은 줄바꿈이 되지 않는다. 엄밀히 말하면 둘의 차이는 단순히 줄바꿈보다는 display 속성에 의한 것이다. 간단히 설명할 때, 문서의 소스코드를 검사해보면 div 태그에는 display: block; 속성이 설정되어 있으나, span에는 아무 속성도 없다.

div 검사
span 검사

 

2. display 속성

주요하게 다룬 display 속성에 대해서 간단히 정리해보았다.

display: block 기본 너비 100% width, height, margin, padding 설정 가능
display: inline 텍스트/콘텐츠 크기 = 박스 크기 width, height, margin(위아래), padding(위아래) 설정 불가능
display: inline-block width, height, margin, padding 설정 가능

 혹시 padding과 margin에 대한 설명이 필요하다면 아래 글로 가면 좋을 것 같다.

 

코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법

꽤 어려웠던 패딩과 마진 적용하는 방법! 글로 적으면서 다시 한 번 복습하려고 한다! 1. 패딩과 마진  패딩(padding)과 마진(margin)은 CSS에서 여백을 나타내는 중요한 속성이다. 패딩은 박스 테두리

jjeongttakgoori.tistory.com

 div 태그, span 태그 중에서는 div 태그가 보통 더 많이 쓰인다. div 태그 안에 display:inline-block; 속성을 설정하여 사용할 때가 많으며, span태그의 경우 div 태그 내에 폰트 색, 폰트 종류나 크기가 다른 글자가 들어가야 할 때 사용한다. 예를 들어 아래 코드에서는 span태그 부분만 파란색 글씨로 나온다.

<div>태그 안에 <span style="color: blue">span태그 부분만 파란색</span>으로 끝나지요!</div>

 

3. position 속성

 position 속성은 요소(태그)들을 어디에 배치할지 결정하고 화면의 레이아웃을 만들 때 사용하는 속성이다. position 속성값들로 static, relative, absolute, fixed 등이 있다.

 

static 값

 모든 태그들의 기본 position 속성이자, position 속성을 따로 설정하지 않았을 때의 속성이기도 하다. 기본 static 값일 경우 위치를 임의로 배치할 수 없다.

<div style="width: 300px; height: 300px; background-color: red">기본 position 속성</div>
<div style="width: 300px; height: 300px; background-color: yellow">기본 position 속성 2</div>

static 속성

 

relative 값

 position: relative 속성일 때 상대적으로 위치를 지정할 수 있다. 이때의 기준은 static, 원래 위치이다. relative 속성에서는 top, left, bottom, right 모두 적용 가능하다.

 

relative 값

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: lightcoral;
  "></div>
</body>
</html>

 

absolute 값

absolute 값일 때 position: relative 속성 상위 요소를 기준으로 상대 위치를 지정할 수 있다.

absolute 값

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: lightgray;
  ">
        <div style="background-color: antiquewhite">기본 위치</div>
        <div style="
      position: absolute;
      background-color: lightcoral;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
    ">
            ABSOLUTE 박스
        </div>
    </div>
</body>
</html>

 

fixed 값

fixed 값은 화면을 기준으로 상대적 위치를 설정할 수 있다.

fixed 값

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: grey;
  ">
        <div style="background-color: antiquewhite">기본 위치</div>
        <div style="
      position: absolute;
      background-color: lightcoral;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
    ">
            ABSOLUTE 박스
        </div>
        <div style="
      position: fixed;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: lightgreen;
    ">
            FIXED 박스
        </div>
    </div>
</body>
</html>

 

4. 미션

✅ 미니홈피 기본 레이아웃 만들기

 

HTML
!DOCTYPE html>

<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="C:\Users\s\Desktop\static\pagestyle.css" />
</head>
<body>
    <div class="bookcover">
        <div class="bookdot">
            <div class="page"></div>
        </div>
    </div>
</body>
</html>

 

CSS
body {
    background-color: #aeacac;
    background-image: url("../static/images/pattern.png");
    background-size: 100px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.bookcover{
    background-color: #82bcda;

    width: 990px;
    height: 660px;

    border: 2px solid #446474;
    border-radius: 9px;

    margin: 100px auto;

    position: relative;
}

.bookcover .bookdot{
    background-color: transparent;

    width: 940px;
    height: 620px;

    border: 2px dashed #ece9e9;
    border-radius: 9px;

    margin: 20px auto;

    position: relative;
}
.bookcover .bookdot .page{
    background-color: white;

    width: 925px;
    height: 600px;

    border: 1px solid #a9a7a7;
    border-radius: 9px;

    margin: 10px auto;

    position: relative;
}

미션 결과
5일차 코드 리뷰

 

5. 소감

 웹 기초 스터디에서 느끼는 매력이 직접 디자인되는 걸 결과물로 볼 수 있다는 것 같다. 그것을 슬슬 느끼기 시작한 5일차! position 속성은 꽤 어렵지만 기준점을 이해하고 자주 연습하면 할 수 있을 것 같다! 이렇게 하루하루 시간을 투자해 공부하면서 미니홈피가 나온다고 생각하니 정말 기대된다🥰!

'STUDIES > WEB' 카테고리의 다른 글

코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법  (0) 2021.02.14
코뮤니티 모각코 웹 기초 3일차: CSS, 폰트 적용하기  (0) 2021.02.11
코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기  (0) 2021.02.05
코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기  (0) 2021.02.04
코뮤니티 모각코 웹 기초 합격과 시작  (0) 2021.02.04
'STUDIES/WEB' Related Articles more