본문 바로가기
개발공부일지/CSS

HTML/CSS 따라하기 기본 - Layout 설정

by Hynn1429 2022. 10. 24.
반응형

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 지난 포스팅들의 작성된 Element 와 CSS의 기초개념을 같이 사용하여, 웹 페이지의 Layout을 설정하는 방식의 대한 기본 가이드를 작성하려고 합니다.

 

이 가이드에서는, CSS에서 가장 기초적으로 사용되는 명령어를 위주로 작성하였고, 기초적인 Layout 만을 작성하기때문에, 그를 토대로 여러개의 포스팅 과정을 거쳐 완성해보도록 하겠습니다.

 

가장 접근성이 쉬운 사이트 중 Naver의 회원가입 페이지를 바탕으로 작성해보겠습니다.

 

 

=============================================================================

1. CSS의 의미 

2. 홈페이지 레이아웃 살펴보기

3. HTML 작성 구성도 틀 잡기

4. HTML 에 구성도 레이아웃을 CSS로 적용하기 

=============================================================================

 

1. CSS(Cascading Style sheet) 의 의미

 

CSS는 풀 네임 그대로 "언어"라는 의미보다는, 기존의 HTML 문서의 다양한 설계와 변경하는데의 제약이 많이 따르는 단점을 보완하기 위해 만들어진 것이 "스타일시트" 라고 하며, 이 스타일시트의 표준이 바로  CSS입니다.

 

CSS가 없다면, HTML 의 코드에 하나하나 글꼴을 지정하고, 넓이 높이, 꾸미기등을 지정해야 하기 때문에, 유지보수 및 설정에 많은 불편함, 번거로움이 있었지만, CSS를 활용함으로 스타일시트에 속성을 부여하여 CSS를 작성해두면, 한 가지 요소만 변경해도 관련되는 항목들이 모두 한번에 변경이 되기 때문에, 문서의 일관성, 및 작업시간의 많은 단축을 가져온 기술입니다. 

 

이는 유지보수 측면 뿐 아니라, 보다 풍부한 디자인을 사용할 수 있도록 웹 개발자들을 위해 만들어진 스타일시트입니다. 

먼저 CSS를 사용하기 위해서는 HTML의 Element 에 아래의 두 속성 부여에 대한 이해가 필요합니다.

 

이외에도 다른 속성을 사용하기도 하지만, 본 포스팅에서는 가장 많이 사용되는 속성 두가지에 대해서 알아보고, 그를 적용하여 CSS를 사용해보도록 할 것입니다. 

속성명  속성의 대한 설명  
ID 전역특성으로, 문서 전체에서 유일한 고유식별자를 정의합니다. 다만 HTML 버전에 따라 ASCII 문자, 숫자, '-', '_' '.' 을 제외한 문자는 호환성의 문제가 발생되기 때문에, ID는 위의 언급된 문자로 시작되어야 합니다. 

CSS에서 ID 식별자를 호출할때는 '#'을 사용합니다.		  
Class 전역특성으로, 공백으로 구분한 요소 클래스의 목록입니다. 이 속성은 대소문자를 구분하지 않습니다. 일반적으로 이 속성을 사용할때는 요소의 "의미"와 "목적"을 설명하는 명칭을 사용하는 것이 좋습니다. 

CSS에서 ID 식별자를 호출할때는 '.' 을 사용합니다.		  

 

2. 홈페이지 레이아웃 살펴보기

웹 페이지 레이아웃

 위의 사진이 현재 네이버 웹 사이트에 적용된 레이아웃 입니다.

이 레이아웃을 공백의 페이지에서 만들어보도록 할 텐데요.

 

이를 위해서는 HTML에서 이전에 설명드린대로 Block 개념을 통해 공간을 설정 후, CSS를 통해, 넓이(Width), 높이(Height) 를 설정해야 합니다.

이를 설정하기 위해서는 먼저 범용적으로 많이 쓰이는 Chrome 브라우저의 "검사" 기능을 활용하여, 어떻게 구성되어 있는지 살펴보도록 하겠습니다.

 

크롬 브라우저에서 "검사" 기능 사용하기

공백의 화면에 마우스 커서를 두고 우클릭을 하면 "검사"라는 탭이 가장 밑에 표시가 됩니다.

이를 사용하면 아래의 사진과 같은 형태의 인터페이스를 마주할 수 있습니다. HTML은 기본적으로 공개적인 언어로서, HTML 기반의 모든 웹 페이지는 이러한 방법을 통해 개발자가 어떻게 적용하였는지를 살펴볼 수 있습니다.

 

다만 네이버와 완전히 똑같은 제작을 하는 것이 아니라, 이러한 웹 페이지의 구성만을 살펴보고 Layout을 설정할 것이기 때문에, 기초적인 부분만을 표기하여 작성해보도록 하겠습니다.

먼저 검사탭에서 좌측 위편에 보면 이러한 아이콘이 있습니다.

이 아이콘을 활성화 하여 마우스를 웹 페이지에 가져가면, 검사 탭의 항목이 아래의 그림과 같이 표시가 됩니다.

혹은 두번째 그림과 같이, 검사 탭에서 이미 사용된 HTML 언어를 선택하면 파란색으로 해당 영역이 선택됩니다. 

 

이 항목들을 하나씩 이해해야, 구성도의 설정을 알 수 있습니다.

웹 페이지에 마우커서를 이동시 나타나는 화면
검사 탭에서 설정된 HTML 언어를 선택하여 영역을 확인하는 방법

 

위의 사진의 검사탭은 3개의 영역으로 구분이 되어 있습니다.

 

가장 왼쪽에는 실제 HTML 언어가 어떻게 작성되어 있는지, 언어의 작성내용이 나타납니다.

여기서는 이미 이전 포스팅에서 다루었던 각종 Element 와 속성이 나열되어 있고, 어떠한 HTML Element 를 사용했는지를 알 수 있습니다.

 

가운데 항목에는 이번 포스팅에서부터 다루게 될 CSS의 적용이 어떻게 이루어졌는지 알 수 있습니다.

HTML 언어를 작성하면, 각 HTML Element 옆에 속성이 있는데, 여기서 CSS를 적용하기 위한 속성은 ID/Class 와 같은 속성이 있습니다.

 

3. HTML 작성 & 구성도 틀 잡기

 

이제 위의 기본적인 개념을 바탕으로 HTML과 CSS를 사용하여, 웹 페이지의 레이아웃을 설정해보도록 하겠습니다.

일반적으로 웹 페이지의 전체 페이지를 선택하는 id 구분자는 'wrap' 으로 표기합니다.

위의 네이버 페이지 역시 'wrap' 으로 id 속성이 부여되었습니다.

 

따라서 wrap으로 먼저 전체 페이지의 영역을 지정합니다.

당연하게도 영역을 지정해야 하므로 <DIV> Element 를 사용하여 영역을 지정합니다.

 

이 영역을 지정하고 난 후 , 'wrap' 으로 설정한 <DIV> 내에서 각 항목별 영역을 설정합니다.

*영역설정은 항상 크게 시작하여 작은 항목을 잡는것이 가장 유리합니다.

 

그리고 난 뒤, 각 항목별로 살펴보면 'Header' 라고 하여, NAVER Logo가 표기된 항목, 'Join_form' 이라고 하여, 회원가입 정보 입력 항목, Footer 라고 하여, 이용약관 및 회사정보, 고객센터 정보가 표시된 항목 3가지로 나뉘어 있습니다.

 

이 경우, 이전 포스팅에서 배운것을 활용하면 HTML 작성예시는 아래와 같습니다.

<!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>네이버: 회원가입</title>
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="join_form"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

이전 포스팅의 복습을 간단하게 하자면, Head 영역의 Title 은 회원가입 페이지니, "네이버:회원가입" 그대로를 입력하였으므로, 당연히 웹 페이지 제목에는 위의 텍스트가 그대로 표시됩니다.

 

Body 항목에 이제 위의 영역을 설정하였다면, 작성자의 의도는 이러한 그림으로 표시할 수 있습니다. 

영역 설정하기

하지만 실제 작성한 HTML 코드에서는 영역에 대한 넓이, 높이를 설정하지 않았기 때문에, 이 영역의 넓이와 높이를 비로소 CSS를 통해 지정하게 됩니다.

 

CSS를 적용하는 방법은 크게 세가지 방법이 있습니다.

먼저 가장 기초적인 CSS 적용은 HTML Element 에 속성형태로 하나하나의 Style을 부여하는 방법입니다.

 

*작성예제 - 1번째 방법

<div id="header" style="width: 100px;" style="height: 500px" style="background:red;">1</div>

위 방법은 단순히 작성해야할때는 간편하겠지만, 많은 양의 CSS를 적용할 수록 반복노동 및 웹 문서의 가독성이 현저히 떨어지는 단점이 있습니다.

 

*작성예제 - 2번째 방법

<!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>네이버: 회원가입</title>
    <style>
        #header {
            width:100px;
            height: 500px;
            background:red;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">1</div>
        <div id="join_form"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Body에 각 DIV에 지정된 속성, 여기서는 각 DIV에 부여된 ID 속성명을 이용하여 "Head" 영역에 <Style> Element 를 사용하여 선언 후, 그 안에 ID 호출자 '#' 을 이용하여 Header 를 지정하여 '{ }' 괄호 내에 CSS 를 부여하는 방법입니다.

이 역시 하나의 HTML 문서 내에서 이루어지므로, 페이지 내용이 많아질 수록 문서를 한눈에 보기가 매우 힘든 단점이 존재합니다.

 

그래서 이제 언급하게 될 3번째 방법으로, 대부분의 웹 개발자가 사용하게 됩니다.

이 방법은 별도의 css 파일을 생성한 뒤 , HTML과 Css 파일을 연결하여 물리적으로 파일은 분리가 되고, HTML Element 를 사용하여, CSS 파일과 HTML 파일을 연결하는 방법입니다.

 

이를 연결하기 위해서는 HTML <HEAD> 영역 내의 아래의 작성예시 Element 를 사용하여 파일을 연결해야 합니다.

<link href="파일경로" type="text/css" rel="stylesheet">

위 Link Element 내에서 "href" 속성에서는 파일 경로를 지정해야 합니다. 경로지정은 아래의 두가지 유형이 있는데, 이 차이에 대해서는 별도의 포스팅을 통해 자세하게 설명하도록 하겠습니다.

경로유형 설명 표기방법
절대경로 디렉토리 최상단부터의 위치를 지정합니다. ./~
상대경로 현재 경로를 기준으로 위치를 지정합니다. /~

위의 경로 지정이 모두 되었다면, CSS 와 HTML 이 연결되었습니다. 이제 연결된 파일을 작성하여 CSS를 작성해보도록 하겠습니다. 

 

4. HTML의 구성도 레이아웃을 CSS로 적용하기 

 

위의 경로지정까지 마치고, VisualStudio Code 에서 각각의 파일을 열어 작업을 시작할 준비를 마쳤습니다.

VisualStudio Code

 

먼저, CSS를 작성할 때, 필자는 가장 먼저 "Margin" , "Padding" 을 0으로 설정 후 작업을 시작할 예정입니다. 

이전 포스팅에서 다룬 내용 중 Display Porperty 의 개념에서 In-Line, Block 의 특성은, 각각의 Element 특성에 따라 여백이나, 공간을 포함하고 있기 때문에, 이를 0으로 모두 통일 후 레이아웃을 설정하면, 보다 정확하게 설정이 가능하기 때문에, 이를 지정해보도록 하겠습니다.

 

이를 문서 전역에 적용하고자 할 때는 '*' 기호를 사용하여 선언할 수 있으며, CSS에서 앞으로 사용하게 될 구분자는 크게 *, {} > # . 기호가 존재합니다. 각 기호별 설명은 다음과 같습니다.

 

기호 설명 작성예시
* 문서 전역에 적용하기 위한 와일드카드 * {

}
{} 구분자 입력 후 { } 내에 각각의 속성 부여  * {
margin : 0
}
; 각각의 속성적용 후 종료 선언 * {
margin : 0;
}
# HTML Element 에 적용된 ID 속성 호출 #header {
margin : 0;
padding: 0;
}
. HTML Element 에 적용된 Class 호출 .header {
margin: 0;
padding : 0;
}
> HTML Element 의 경로 지정 #wrap > #header {
margin: 0;
padding : 0;
}

위의 방법을 적용하여, 먼저 CSS 에서 Margin, Padding 을 0으로 설정한 뒤, 각각의 영역을 설정해보도록 하겠습니다.

현재 네이버 회원가입의 페이지를 검사기능을 이용하여 넓이와 높이를 확인시, 아래의 사이즈로 확인이 되는 것을 볼 수 있습니다.

 

DIV ID 넓이(Width)*높이(Height)
Header 768 * 124
Join Form 768 * 1027
Footer  768*84

현재 우리가 보는 웹 사이트는 대부분이 1920*1080 에 최적화가 되어 있습니다.

이는 가장 많이 범용적으로 사용되는 해상도가 1920*1080(FHD) 입니다. 하지만, 많지 않은 사용자더라도, 4K, QHD, WQHD 등의 다양한 해상도 역시 존재하기 때문에, 넓이의 경우 모니터마다 다르게 표기될 수 있습니다.

 

따라서 위 글에서는 해상도내에서 이를 가운데로 항상 표시될 수 있도록 레이아웃을 설정할 것입니다.

영역에 각각 색상을 부여하여 올바르게 적용이 되었는지 확인을 해보도록 하겠습니다.

* {
    margin:0;
    padding:0;
}

#wrap {
    width:100%;
}

#header {
    width:768px;
    height:124px;
    background-color:red;
    margin:0 auto;
}

#join_form{
    width:768px;
    height:1027px;
    background-color:green;
    margin:0 auto;
}

#footer {
    width: 768px;
    height:84px;
    background-color:yellow;
    margin:0 auto;
}

영역이 설정된 Naver 회원가입 페이지

 

위 스타일의 CSS를 적용하면, 넓이에 상관없이 컨텐츠 영역이 가운데로 정렬되는 것을 알 수 있습니다.

이에 대해서 간략하게 설명을 하자면, 먼저 영역 전체를 지정하는 "wrap" 에 Width, 즉 넓이를 'px' 단위가 아니라 %단위로 100%를 부여하였습니다.

 

이는 페이지를 늘리거나 줄이더라도 항상 100% 영역을 지정하였습니다.

그 뒤에 각각의 Header, Join_form, Footer 에 margin(여백) 을 0 auto 로 선택한 것을 볼 수 있습니다.

 

속성명  속성설명 속성 단위 작성예시
Width Element의 넓이를 지정 px, % { width: 100px;}
{ width : 100%}
Height Element의 높이를 지정 px, % {height : 100px;}
{height : 100%;}
Background-color Element의 배경색을 설정 색상명 혹은 #xxx, #xxxxxx {background-color : red;}
{background-color : #000;}
{background-color : #ffffff;}
Margin 여백을 설정 ' 0 0 0 0 ',
' 0 0 ',
' 0 '		 {margin : 10px 5px 10px 5px}
{margin : 10px 5px;}
{margin : 5px}
Padding  늘리기를 설정  ' 0 0 0 0 ',
' 0 0 ',
' 0 '		 {padding : 5px 5px 5px 5px}
{padding : 5px 5px;}
{padding : 5px}

각각의 설명을 포함하자면, 'px' 는 픽셀단위를 나타냅니다. 이 단위는 CSS에서 가장 많이 쓰이는 단위이니, 이는 반드시 기억하도록 합시다.

 

Background-Color 에 사용되는 색상 중 #000, #000000 으로 표기되는 숫자는 16진수로 각 색상을 지정합니다. 여기서 3개와 6개의 구분은 단순히 아래의 구분으로 나타냅니다.

 

1) #000 

  • #000000 과 같이, 6개의 숫자가 연속되는 색상은 3개로 작성이 가능합니다. #000000, #ffffff 는 #000, #fff 로 표기가 가능합니다. 혹은 #00ffaa 같은 색상 역시도 #0fa 로 표기할 수 있습니다.이는 16진수를 압축한 것입니다.

 

2) #000000

  • #00 00 00  단위로 색상을 표현합니다. 각 항목은 0~9, a~f 까지의 16진수로 표시가 되어 있으며, 두자리 단위로 R(Red), G(Green), B(Blue) 의 영역입니다. 

또한 Margin과 Padding 에서 쓰이는 순서별의 의미는 아래와 같습니다. Auto 의 경우, 사전적 의미 그대로 자동으로 설정하는 것을 뜻합니다. 그렇지 않은 경우 웹 개발자는 자신이 원하는 픽셀을 지정하게 됩니다. 

물론 이러한 방법이 아니라, 각각 top,bottom, left, right 와 같은 항목을 설정하여 한곳에 지정도 가능합니다. (ex. Margin-top) 하지만 특별한 상황이 아니라면, 이 하나의 명령으로 4방향을 모두 지정하게 됩니다. 

 

1) 0 0 0 0

  • 각 순서대로 12시, 3시 , 6시, 9시 방향에 얼마나 값을 지정할 건지를 설정합니다. 이 값은 검사 탭에서 아래의 그림처럼 표기가 됩니다.

2) 0 0

  • 첫번째의 숫자는 12시,6시를 뜻하며, 두번째의 숫자는 3,9시를 뜻합니다.

3) 0 

  • 4방향 전체를 하나의 값으로 지정할 때 사용합니다. 

 

 

다음 시간에는 각 영역에 컨텐츠를 삽입하는 CSS 및 HTML을 적용해보도록 하겠습니다.

 

감사합니다.

반응형

'개발공부일지 > CSS' 카테고리의 다른 글

HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Footer  (0) 2022.10.28
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 3  (0) 2022.10.26
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 2  (0) 2022.10.26
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 1  (0) 2022.10.25
HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Header  (0) 2022.10.25

관련글

댓글

티스토리툴바