쫑's바른생활

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

개발일지/입문

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

쫑이야기 2023. 4. 3. 10:44
728x90
반응형

앞선 게시글에서 만들어두었던 각각의 블록들에 
배경색, 글자색, 높이와 넓이를 줘보자

<첫번째 설정값>

wrap : 넓이 1200
header : 넓이 동일, 높이 100, 배경 베이지, 글자크기 20
banner : 넓이 동일, 높이 300, 배경 빨강, 글자크기 20
contents : 넓이 동일, 높이 200, 배경 아쿠아, 글자크기 20
footer : 넓이 동일, 높이 100, 배경 파랑, 글자크기 20

여기서 잠깐!
wrap에도 높이를 줘도 되지만, 굳이 남는 영역을 만들지 않도록
wrap 안에 있는 header~footer에만 높이를 줄 예정.

css 속성은 앞서 작성한 게시글에서 확인한다.
 
id 를 나타내는 #wrap 과 css 작성영역 {} 입력
마찬가지로 header부터 작성하면 아래와 같다.

<!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>Document</title>
    <style>
        #wrap{
            width: 1200px;
        }
        #header{
            width: 1200px;
            height: 100px;
            background-color: beige;
            font-size: 20px;
        }
        #banner{
            width: 1200px;
            height: 300px;
            background-color: red;
            font-size: 20px;
        }
        #conents{
            width: 1200px;
            height: 200px;
            background-color: aqua;
            font-size: 20px;
        }
        #footer{
            width: 1200px;
            height: 100px;
            background-color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="conents">conents</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

 
<두번째 설정값>
여기서 좀 더 수월한 팁은 header~footer의 동일한 설정값인 글씨크기는 
굳이 일일이 설정해줄 필요없이 감싸는 wrap에만 설정해주어도 결국 동일하다.

1. 위 사진의 파란색 처럼 웹 페이지 안에 여백이 생기는데
이 파란색 여백을 줄이기 위해 바깥여백0, 안쪽여백0을 주자.
페이지 전체를 나타내는 * 로 여백0을 나타내는 css를 넣어준다.

2. 그리고 모든 블록들의 바깥 위여백=0, 양옆여백=동일값(자동) 으로 넣기

위 과정들을 반영한다면 아래와 같다.

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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 1200px;
            font-size: 20px;
            margin: 0 auto;
        }
        #header{
            width: 1200px;
            height: 100px;
            background-color: beige;
        }
        #banner{
            width: 1200px;
            height: 300px;
            background-color: red;
        }
        #conents{
            width: 1200px;
            height: 200px;
            background-color: aqua;
        }
        #footer{
            width: 1200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="conents">conents</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

<세번째 설정값>
01. 글자를 가로 가운데정렬 ( text-align : center )
02. 글자를 세로 가운데정렬 ( line-height : 해당블록 높이값 )
여기서는 텍스트가 한줄이라, 줄간격을 나타내는 line-height로 입력. 
03. footer 글자색 하얀색으로 수정

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 1200px;
            font-size: 20px;
            margin: 0 auto;
            text-align: center;
        }
        #header{
            width: 1200px;
            height: 100px;
            background-color: beige;
            line-height: 100px;
            /*줄간격(세로가운데정렬로 사용. 단, 한줄일 때)*/
        }
        #banner{
            width: 1200px;
            height: 300px;
            background-color: red;
            line-height: 300px;
        }
        #conents{
            width: 1200px;
            height: 200px;
            background-color: aqua;
            line-height: 200px;
        }
        #footer{
            width: 1200px;
            height: 100px;
            background-color: blue;
            line-height: 100px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="conents">conents</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

 
<최종 결과물>

728x90
반응형

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

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