forbob@naver.com

Sumter,SC 29150

simple-coding

+ 00 00 0000

Have any Questions?

04_Simple Coding – CSS – Chapter04 – 요약

forbobpro

04_Simple Coding – CSS – Chapter04 – 요약

📃 요약

Html 은 문서 구조, CSS 는 디자인을 담당하며 색깔, 폰트형태, 배치 등 다양한 속성을 제공하고 있음, 선택자를 통해 태그등을 선택해서 디자인을 적용하는 방식임

요소 기술 및 테이블 설계는 아래와 같습니다.

요소 기술 :

– Basic : CSS

📃 기술 구현

스펙 :

- vscode
- css 5

📃 기본 선택자

CSS 기본 사용법 :

선택자 {
    속성:값;
}

CSS 기본 선택자 : 태그 선택자, id선택자 , class 선택자, 전체선택자 가 있음

전체 선택자 : *

예) 
  * {
        padding: 0;
        margin: 0;
    }
태그 선택자 : html 태그 , <p> , <ul> 등

예) 
  p {
        color : red;
    }
id 선택자 : html 태그 내에 id 속성의 값을 선택 <p id=”contents”> 등
   선택자 앞에 # 을 붙여서 사용

   예) 
    #contents {
         color: red;
    }
- class 선택자 : html 태그 내에 class 속성의 값을 선택 <p class=”contents”> 등
   선택자 앞에 . 을 붙여서 사용

   예)
     .contents {
          color: red;
    }

📃 폰트 속성

font-family : 폰트를 지정할 수 있는 속성

-  pc 에 폰트가 있어야 화면에 적용됨
- 사용법 : font-family: 스타일1, 스타일2, 스타일3
- 스타일1 이 있으면 스타일 1이 적용됨, 없으면 스타일2가 적용됨 , 없으면 스타일3이 적용됨

font-style: italic;

- 이탤릭체 : 기울임체 적용

text-align: center/left/right

- center : 중앙 정렬
- left   : 왼쪽 정렬
- right  : 오른쪽 정렬
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_font_family.css">
</head>
<body>
    <!-- Lorem ipsum ... : 아무 의미없는 글자 (디자인 신경써라) -->
    <h1 class="font_arial">Lorem ipsum</h1>
    <p class="font_italic">안녕하세요 홍길동입니다.</p>
</body>
</html>
.font_arial {
    /* 폰트 스타일 : pc 에 폰트가 있어야 화면에 적용됨 */
    /* font-family: 스타일1, 스타일2, 스타일3 */
    /* 스타일1 이 있으면 스타일 1이 적용됨 
       없으면 스타일2가 적용됨 , 
       없으면 스타일3이 적용됨
     */
    font-family: Arial, Helvetica, sans-serif;
}

.font_italic {
    /* 이텔릭체 */
    font-style: italic;
    /* 굵은글씨 */
    font-weight: bolder;
    /* 글자 중앙 정렬 : 이미지 등의 안됨, 글자만 가능 */
    text-align: center;
    /* 왼쪽 정렬 */
    /* text-align: left; */
    /* 오른쪽 정렬 */
    /* text-align: right; */

}

📃 특수 선택자

속성 선택자 :

- html 속성을 선택해서 디자인 적용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/14_attribute_basic.css">
</head>
<body>
    <!-- 속성선택자 예제 -->
    <form>
        <input type="text" />
        <input type="password" />
    </form>
</body>
</html>

사용법 :
    태그[속성="값"] {
        속성:값;
    }

예)
input[type="text"] {
    background-color: red;
}

input[type="password"] {
    background-color: blue;
}

반응선택자 :

- 마우스가 위로 올라갔을때 또는 클릭했을때 디자인 적용하는 가상선택자
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_etc_action.css">
</head>
<body>
    <!-- 반응 선택자 예제 -->
    <h1>반응 선택자</h1>
</body>
</html>

/* 반응 선택자 */
/* 선택자:hover - 마우스가 위로 올라가면 디자인 적용 */
h1:hover {
    color:red;
}

/* 선택자:active - 마우스를 클릭하면 디자인 적용 */
h1:active {
    color: blue;
}

상태선택자 :

- 입력양식의 상태에 따라 디자인 적용
    (1) enabled  : 입력가능한 상태
    (2) disabled : 입력불가능한 상태
    (3) focus    : 입력양식에 커서가 있는 상태
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/18_etc_state.css">
</head>
<body>
    <!-- 상태 선택자 예제 -->
    <h2>사용 가능</h2>
    <input type="text" />
    <h2>사용 불가능</h2>
    <!-- disabled="disabled" : 입력 못하게 막기 속성 -->
    <input type="text" disabled="disabled">
</body>
</html>
/* 상태 선택자 */
/* input: 현재 입력가능한 상태일때 디자인 적용 */
input:enabled {
    background-color: white;
}

/* input: 현재 입력 불가능한 상태일때 디자인 적용 */
input:disabled {
    background-color: gray;
}

/* input: 커서가 있을때(포커스) 디자인 적용 */
input:focus {
    background-color: orange;
}

자손선택자 : 부모선택자 > 자손선택자

– 부모 밑에 자손 태그 등을 구체적으로 지정해서 사용하는 방식

– 비슷한 태그가 많을 경우 그 태그만 디자인을 적용하고 싶을 때 사용함

사용법 : 
선택자 > 선택자 {
    속성:값;
}

예) ul 태그 바로 밑에 li 태그만 선택됨
 ul > li {
     color: red;
 }

후손선택자 : 부모선택자 후손선택자

– 부모 밑에 후손 태그들을 모두 선택해서 사용하는 방식

– 비슷한 태그가 많을 경우 그 태그들만 디자인을 적용하고 싶을 때 사용함

사용법 : 
선택자  선택자 {
    속성:값;
}

예) ul 태그 밑에 li 태그, 또 그 밑에 li 태그 가 있을 경우 li 태그 모두 선택됨
 ul  li {
     color: red;
 }

📃 박스 속성

- css 디자인에서 가장 많이 활용되는 속성들
- 사각형 박스를 디자인 하는데 필요한 여러 속성들을 소개함

박스 속성들

- height  : 높이
- weight  : 가로
- margin  : 바깥여백(마진)
- padding : 안쪽여백(패딩)
- border  : 외곽선
    - 사용법 : border: 선두께 선스타일 선색깔 
    - 예    : border: 5px solid orange;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_box_width_height.css">
</head>
<body>
    <!-- 1st 박스 -->
    <div></div>
    <!-- 2nd 박스 -->
    <div></div>
</body>
</html>

box 기본 속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선

예)
div {
    /* 가로 */
    width: 100px;
    /* 세로  */
    height: 100px;
    /* 배경색 */
    background-color: red;
    /* 외곽선 */
    /* 사용법 : border: 선두께 선스타일 선색깔 */
    border: 5px solid orange;
    /* 안쪽 여백(padding) */
    padding: 30px;
    /* 바깥 여백(margin) */
    margin: 10px;
}

박스 속성 (축약형) :

- 마진/패딩을 1줄에 (상/우/하/좌) 방향을 모두 적용하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_box_detail.css">
</head>
<body>
    <div></div>
</body>
</html>
/* box 기본 속성 : 상세 */
div {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 외곽선 */
    /* border: 선두께 선스타일 선색깔 */
    border: 5px solid orange;
    /* 안쪽 여백 : 상/좌/하/우 */
    /* 축약형 :  */
    /* padding: 상 우 하 좌 (12시 기준으로 시계방향 한바뀌 돈다)*/
    padding: 30px 0 30px 0;
    /* padding-left: 0px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 30px; */

    /* 바깥 여백 : 상/좌/하/우 */
    /* 축약형 : 패딩과 동일하게 사용할 수 있음 */
    /* margin: 상 우 하 좌 */
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
}

background 속성 :

- background-image   : css 에서 이미지를 html 문서에 넣을 수 있는 속성 
- background-repeat  :  배경 이미지 반복 중지 속성
- background-position: 배경 이미지 를 위치(좌표) 이동 : 단위(%, px)
- background-size    : 배경 이미지 크기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/14_background_image.css">
</head>
<body>
    <!-- 백그라운드 이미지(배경 이미지) 예제 -->
</body>
</html>

body {
    /* 배경 이미지 : 기본 , 모든 화면을 꽉 채움 */
    /* css 이미지 넣기 : url("이미지경로") */
    /* 사용법 : background-image: url("이미지경로"); */
    background-image: url("https://picsum.photos/id/10/200/300");

    /* 배경 이미지 반복 중지 속성 */
    background-repeat: no-repeat;

    /* 배경 이미지 를 위치(좌표) 이동 : 단위(%, px) */
    /* 사용법: background-position: 왼쪽 위쪽; */
    background-position: 20% 20px;

    /* 배경 이미지 크기 */
    /* 화면단위 : %, px(고정크기), 
            vw(뷰포트가로크기), vh(뷰포트세로크기) : 반응형 디자인 단위 */
    /* 사용법 : background-size: 가로크기 세로크기 */
    background-size: 50vw 50vh;
}

📃 캐스캐이딩 스타일시트 : css

    - css(cascading style sheet): 우선순위가 있는 스타일시트라는 의미
    - 위/아래, 태그/id/class 선택자들 간에 우선순위가 있음
    - 우선순위에 따라 디자인이 적용되어 디자인 충돌(에러)를 방지함

css 디자인 우선순위 : 여러 선택자가 있을때 디자인 적용 우선순위를 결정

1) 부모 태그 - 자식태그 :  자식의 디자인이 우선됨
2) id선택자 > 클래스선택자 > 태그선택자 > 전체선택자
    - id선택자가 가장 우선순위가 높고 전체선택자가 우선순위가 가장 낮음

📃 display 속성

- div 특징 : 블럭(block) 속성, 자동 줄바꿈 발생 , p태그, h1~h6 태그 등
- span 특징 : 인라인(inline) 속성, 줄바꿈 없음 , input태그, img 태그 등
  width, height 속성 무시, 안에 컨텐츠(글)에 따라 크기가 정해짐
- display 속성 : block <-> inline 변경 가능

display : block -> inline 변경

- 강제로 inline 속성으로 변경하면 줄바꿈과 가로/세로 속성이 적용되지 않음
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_display_div.css">
</head>
<body>
    <!-- 줄복사 : ctrl + d -->
    <div class="box">홍길동</div>
    <div class="box2">홍길동</div>
    <div class="box3">홍길동</div>
</body>
</html>
/* id선택자 : #변수명, class선택자 : .변수명, 
    * : 전체선택자, 태그선택자 */
/* div 특징 : 블럭(block) 속성, 자동 줄바꿈 발생 , p태그, h1~h6 태그 등 */
/* span 특징 : 인라인(inline) 속성, 줄바꿈 없음 , input태그, img 태그 등 */
/*             width, height 속성 무시, 안에 컨텐츠(글)에 따라 크기가 정해짐 */
/* TODO: display 속성 : block <-> inline 변경 가능 */
.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    display: inline;
}
.box2 {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline;
}
.box3 {
    width: 50px;
    height: 50px;
    background-color: yellow;
    display: inline;
}

display : inline -> block 변경

- 강제로 block 속성으로 변경하면 줄바꿈과 가로/세로 속성이 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_display_span.css">
</head>
<body>
    <span class="box">홍길동</span>
    <span class="box2">홍길동</span>
    <span class="box3">홍길동</span>
</body>
</html>

.box {
  background-color: blue;
  /* block 속성 지정 */
  display: block;
  /* 가로크기 */
  width: 50px;
  /* 세로크기 */
  height: 50px;
}

.box2 {
  background-color: red;
  /* block 속성 지정 */
  display: block;
  /* 가로크기 */
  width: 50px;
  /* 세로크기 */
  height: 50px;
}

.box3 {
  background-color: yellow;
  /* block 속성 지정 */
  display: block;
  /* 가로크기 */
  width: 50px;
  /* 세로크기 */
  height: 50px;
}

display : inline-block 변경

- 강제로 inline-block 속성으로 변경하면 가로/세로 속성이 적용되지만 줄바꿈은 일어나지 않음
- 주로 메뉴의 세로배치를 가로배치로 디자인 변경할 때 사용함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/03_display_inline_block.css">
</head>
<body>
    <div class="box">대상 객체</div>
    <div class="box2">대상 객체</div>
    <div class="box3">대상 객체</div>
</body>
</html>

.box {
  /* 가로크기 */
  width: 100px;
  /* 세로크기 */
  height: 100px;
  /* 배경색 */
  background-color: red;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

.box2 {
  /* 가로크기 */
  width: 100px;
  /* 세로크기 */
  height: 100px;
  /* 배경색 */
  background-color: blue;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

.box3 {
  /* 가로크기 */
  width: 100px;
  /* 세로크기 */
  height: 100px;
  /* 배경색 */
  background-color: yellow;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

display : none

- 강제로 none 속성으로 변경하면 화면에 대상 태그가 보이지 않음
- 메뉴의 드롭다운 메뉴를 구현할때 주로 사용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/04_display_none.css">
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>
#box {
    /* 배경색 */
    background-color: yellow;
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* display 속성 */
    /* 화면에서 보이지 않게 만듬 */
    display: none;
}

float

- 박스의 왼쪽정렬/오른쪽정렬시 사용, 중앙배치 없음
- float 를 태그에 적용하면 다른 태그가 float 태그를 인식하지 못해 디자인이 틀어지는 부작용 발생
- float 태그를 인식하게 하는 속성을 적용하면 부작용 해결됨
    1) clear: both 속성 적용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/07_float.css">
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

.box {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: red;
    /* 바깥여백 */
    margin: 10px;
    /* 좌로 배치(왼쪽 정렬) */
    float: left;
}

.box2 {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: blue;
    /* 바깥여백 */
    margin: 10px;
    /* 우로 배치(오른쪽 정렬) */
    float:right;
}

📃 position

position

- 기본적으로 html 문서는 좌표가 없음
- 좌표를 적용할 수 있는 모드가 있음
    1) 절대좌표 : 웹브라우저 왼쪽/위 모서리를 0,0 좌표로 하는 좌표
    2) 상대좌표 : html 태그 다음부터 0, 0 좌표로 사용하는 좌표

1) position : absolute

- 절대좌표
- 웹브라우저 화면에 좌표가 생김
- left/top 이용해서 태그를 이동시킬 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_position_absolute.css">
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

.box {
  /* 가로 */
  width: 100px;
  /* 세로 */
  height: 100px;
  /* 배경색 */
  background-color: red;
  /* 절대좌표(absolute) */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 0;
  /* 위쪽(y좌표) */
  top: 0;
  /* 겹칠때 위에 올라오도록 우선순위를 정하는 속성 */
  /* 규칙 : 수치가 클수록 위, 수치가 작을수록 아래 */
  z-index: 30;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 절대 좌표 */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 40px;
  /* 위쪽(y좌표) */
  top: 40px;
  z-index: 20;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 절대 좌표 */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 80px;
  /* 위쪽(y좌표) */
  top: 80px;
  z-index: 10;
}

2) position : relative

- 상대좌표
- 웹브라우저 화면에 좌표가 생김
- left/top 이용해서 태그를 이동시킬 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_position_relative.css">
</head>
<body>
    <p>안녕하세요. 홍길동입니다.</p>
    <p>안녕하세요. 홍길동입니다.</p>
    <p>안녕하세요. 홍길동입니다.</p>
    <div class="rbox"></div>
</body>
</html>

/* 상대좌표로 설정된 박스 */
.rbox {
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: blue;
    /* 상대좌표 */
    position: relative;
    /* 왼쪽 */
    left: 0;
    /* 위쪽 */
    top: 0;
}

3) 부모 position : relative, 자식 position : absolute

- 부모 태그에 상대좌표를 설정하고 자식태그에 절대좌료를 설정하면 0,0 이 웹브라우저 왼쪽 모서리가 아니라 부모 박스의 왼쪽 모서리로 변경됨
- 문서의 다른 태그가 추가되도 자식 div 태그는 수정이 필요없음 : 유지보수성 향상
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/14_pos_relative_absolute.css">
</head>
<body>
    <!-- 줄복사 : ctrl + d -->
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <div class="parent">
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

/* 부모 박스 */
.parent {
    /* 가로 */
    width: 500px;
    /* 세로 */
    height: 500px;
    /* 외곽선 */
    border: 1px solid gray;
    /* 상대좌표 : 부모 */
    position: relative;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 절대좌표 */
    position: absolute;
    /* 왼쪽(x좌표) */
    left: 50px;
    /* 위쪽(y좌표) */
    top: 50px;
}

4) position : fixed

- 메뉴를 고정할 때 사용하는 속성
- 본문이 메뉴의 세로 크기와 겹치는 부작용이 있음
    1) 본문에 마진을 이용해서 보정해주어야 함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/15_position_fixed.css">
</head>
<body>
    <!-- 메뉴  -->
    <div class="top-bar"></div>
    <!-- 본문 -->
    <div class="container">
        <!-- 줄복사 : ctrl + d -->
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
    </div>
</body>
</html>

/* fixed (메뉴 고정으로 많이 사용) */
/* 주의점 : 고정되면 아래 태그가 위로 말려 올라옴(본문과 겹침 현상) */
/* 메뉴 */
.top-bar {
    /* 세로 */
    height: 50px;
    /* 배경색 */
    background-color: red;
    /* 고정(fixed), 좌표 사용 가능(left/top/right/bottom) */
    position: fixed;
    /* 왼쪽(x좌표) */
    left: 0;
    /* 위쪽(y좌표) */
    top:0;
    /* 오른쪽(-x좌표) */
    right: 0;
}

/* 본문 */
.container {
    /* 바깥여백 - 위 */
    /* margin-top: 50px; */
}

📃 One True Layout

- 현대 홈페이지를 만드는 전형적인 구조
- 시맨틱 태그를 이용해서 주로 제작됨
- 머리말, 상단메뉴, 본문, 사이드바, 꼬리말 형태로 제작됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_oneTrueLayout_basic.css">
</head>
<body>
    <!-- TODO: one true layout == 현대 홈페이지를 만드는 전형적인 구조 -->
    <!-- container == 1 page 디자인 -->
    <div id="container">
        <!-- 줄복사 : ctrl + d -->
        <!-- 머리말 시작 -->
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <!-- 머리말 끝 -->

        <!-- 사이드메뉴 시작 -->
        <aside id="sidebar">
            <h2>사이드바</h2>
        </aside>
        <!-- 사이드메뉴 끝 -->

        <!-- 본문 시작 -->
        <section id="contents">
            <h2>본문</h2>
        </section>
        <!-- 본문 끝 -->

        <!-- 꼬리말 시작 -->
        <footer id="footer">
            <h2>꼬리말</h2>
        </footer>
        <!-- 꼬리말 끝 -->
    </div>
</body>
</html>

/* 여백 초기화 */
* {
    padding: 0;
    margin: 0;
}

/* 전체 페이지 크기 정하기 */
#container {
    /* 가로 */
    width: 1200px;
    /* 중앙 정렬 : auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/
    /* 사용법 : margin: 상/하 auto */
    margin: 20px auto;
}

/* 머리말 */
#header {
    /* 세로 */
    height: 120px;
    /* 임시 */
    background-color: gray;
}

/* 디자인 계산 : 전체(1200px) == 사이드(300px) + 본문(900px) */
/* 사이드바(좌측메뉴) */
#sidebar {
    /* 가로 */
    width: 300px;
    /* 세로 */
    height: 600px;
    /* 임시 */
    background-color: aqua;
    /* 좌측 배치 */
    float: left;
}

/* 본문(우측) */
#contents {
    /* 가로 */
    width: 900px;
    /* 세로 */
    height: 600px;
    /* 임시 */
    background-color: beige;
    /* 우측 배치 */
    float: right;
}

/* 꼬리말 */
#footer {
    /* float 영향 제거 */
    clear: both;
    /* 세로 */
    height: 100px;
    /* 임시 */
    background-color: burlywood;

}
, , ,

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Recent Categories

Recent Posts

Post Archive

Catogery Tags

algorism backend cm coding-test css deploy docker figma html java js multi-provider social login nginx si simple-coding social login spring boot springboot sql stomp toast ui tomcat vue websocket 간편 로그인 구글 로그인 소셜 로그인

Connect With Us