쫑's바른생활

[코딩 초보 개발일지] 입문_03-2. css 작업물 만들기 본문

개발일지/입문

[코딩 초보 개발일지] 입문_03-2. css 작업물 만들기

쫑이야기 2023. 4. 3. 13:28
728x90
반응형

<설정 값>

  • 웹페이지(title) 제목은 '레이아웃02'
  • 전체 태그 css에 바깥안쪽여백0 
  • 글자크기 30, 글자색 검정(헥스코드 사용)
  • 모든 글자 가운데정렬(div사용=div로 묶인 곳 동일설정)
  • 블록설정(넓이는 wrap과 동일, 글자모두 세로 가운데 정렬)
  • 모두 화면에 보이도록 블록정렬(float사용)
  • wrap: 넓이1000, 좌우 가운데정렬, 배경 베이지
  • 헤더: 높이100, 배경 아쿠아
  • 배너: 높이300, 배경 핑크
  • 컨텐츠1: 넓이500, 높이200, 배경 빨강, 글자색 하양
  • 컨텐츠2: 넓이500, 높이200, 배경 파랑, 글자색 하양
  • 푸터1: 넓이500, 높이100, 배경 초록
  • 푸터2: 넓이500, 높이100, 배경 주황

<설정 값(가이드)>

html 보기 전, 가이드와 설정값을 토대로 연습해보기!

여기서 잠깐!
body의 블록설정 시 class를 사용하였다.
id와 class의 차이와 상세내용은 추후 작성할 예정
 
코드는 아래와 같다.

728x90
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃02</title>
    <style>
        *{ /* *: 사용하는 모든 tag */
            margin: 0;
            padding: 0;
            font-size: 30px;
            color: #000000; /*글꼴색 : 검정색*/
        }
        div{
            text-align: center;
        }
        #wrap{
            width: 1000px;
            margin: 0 auto;
            background-color: beige;
        }
        #header{
            width: 1000px;
            height: 100px;
            background-color: aqua;
            line-height: 100px;
        }
        #banner{
            width: 1000px;
            height: 300px;
            background-color: pink;
            line-height: 300px;
        }
        #conents div{ /*cont1,2 동일 css이므로 #contents 의 div로 묶어서 설정*/
            width: 500px;
            height: 200px;
            float: left;
            line-height: 200px;
            color: #ffffff; /* #ffffff: 하얀색*/
        }
        #conents .cont1{
            background-color: red;
        }
        #conents .cont2{
            background-color: blue;
        }
        #footer div{
            width: 500px;
            height: 100px;
            float: left;
            line-height: 100px;
        }
        #footer .cont1{
            background-color: green;
        }
        #footer .cont2{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">헤더</div>
        <div id="banner">배너</div>
        <div id="conents">
            <div class="cont1">컨텐츠1</div>
            <div class="cont2">컨텐츠2</div>
        </div>
        <div id="footer">
            <div class="cont1">푸터1</div>
            <div class="cont2">푸터2</div>
        </div>
    </div><!--//wrap-->
</body>
</html>

코드 중간중간
/**/  와 <!----> 는 주석이라고 불린다.
문서에서 쓰는 주석과 동일한 성격인데,
상세설명을 넣어준 것으로 참고하면 된다.
"상세설명 참고"
 
<결과물>

728x90
반응형

'개발일지 > 입문' 카테고리의 다른 글

[코딩 초보 개발일지] 입문_04-2. css 작업물 만들기(네비게이션)  (0) 2023.04.10
[코딩 초보 개발일지] 입문_04-1. css 작업물 만들기  (0) 2023.04.05
[코딩 초보 개발일지] 입문_03-1. css 작업물 만들기  (0) 2023.04.03
[코딩 초보 개발일지] 입문_02. html 배우기  (1) 2023.04.02
[코딩 초보 개발일지] 입문_01. 프로그램 설치  (1) 2023.04.02
'개발일지/입문' Related Articles more
Comments