CSS 학습2
본격적으로 헬스장 사이트에 대한 면분할 작업부터 진행해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>센트럴짐_면분할</title>
<link href="css/color.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<div id="skipnav"></div>
<div id="header">
<div id="header_left">
<div id="left_top"></div>
<div id="left_lnb">
<ul>
<li><a href="">센트럴짐</a></li>
<li><a href="">트레이너</a></li>
<li><a href="">내부전경</a></li>
<li><a href="">공지사항</a></li>
<li><a href="">상담문의</a></li>
</ul>
</div>
</div>
<div id="logo">
<h1><a href="">로고</a></h1>
</div>
<div id="header_right">
<div id="right_top">
<div id="gnb">
<ul>
<li><a href="">로그인</a></li>
<li><a href="">회원가입</a></li>
<li><a href="">마이페이지</a></li>
<li><a href="">고객센터</a></li>
</ul>
</div>
</div>
<div id="right_lnb">
<ul>
<li><a href="">웨이트트레이닝</a></li>
<li><a href="">펑셔널트레이닝</a></li>
<li><a href="">그룹트레이닝</a></li>
<li><a href="">개인트레이닝</a></li>
<li><a href="">필라테스</a></li>
<li><a href="">골프</a></li>
</ul>
</div>
</div>
</div>
<div id="contentwrap"></div>
<div id="footer">
<div id="fnb">
<ul>
<li><a href="">HOT 이벤트</a></li>
<li><a href="">GX 스케줄</a></li>
<li>
<h2><a href="">하단로고</a></h2>
</li>
<li><a href="">상담 및 문의</a></li>
<li><a href="">블로그 방문하기</a></li>
</ul>
</div>
<div id="address">
<address>센트럴짐 | 경기도 의정부시 | <a href="">사업자등록번호</a> 000-00-00000 | 대표 000 | 대표상담번호 000-000-0000<br>
평일 06:00~24:00 | 토요일 08:00~20:00 | 일/공휴일 10:00~18:00 | 매월 둘째, 넷째 일요일 휴무 | ©2021 CENTRALGYM ALL RIGHTS RESERVED</address>
</div>
</div>
</div>
</body>
</html>먼저 HTML 코드를 살펴보면 id가 wrap인 블록태그 div 테두리 안에 크게 4가지 skipnav, header, contentwrap, footer를 만들어주었습니다.
각 영역별로 li 태그로 목록을 만들어주고, footer의 경우는 address 태그로 사업자 정보와 저작권에 대해 표기해주었습니다.
목록에 있는 것들은 대부분 클릭 시 해당 제목에 알맞는 다른 페이지로 링크가 걸려서 이동시켜주어야해서 하이퍼링크를 안에다 넣어주었으며, 제목 로고부분은 h1 태그, 하단에 부제목은 h2 태그를 넣어주었습니다.
@charset "utf-8";
/*** 브라우저 초기화 및 전체 설정 ***/
* {
margin: 0;
padding: 0;
color: #fff;
text-align: center;
/*글자 가로 정렬: 중앙정렬*/
}
a {
text-decoration: none;
/* 밑줄 등 글자의 장식 제거 */
}
li {
list-style: none;
float: left;
}
/*** header ***/
#header {
width: 1000px;
height: 120px;
background-color: red;
}
#header_left {
width: 400px;
height: 120px;
background-color: #ff5d5d;
}
#left_top {
width: 400px;
height: 60px;
background-color: #f99;
}
#left_lnb {
width: 400px;
height: 60px;
background-color: #f33;
}
#left_lnb li {
border: 1px solid blue;
/*외곽선: 두께 종류 색상*/
/*border는 width와 height에 불포함(기본설정)*/
width: 78px;
height: 58px;
line-height: 60px;
/*행간-글이 1행일 때 height와 같게 설정하면 세로 중앙 정렬*/
}
#left_lnb li a {
display: block;
/*크기를 적용할 수 없는 인라인요소에 크기를 적용하기 위해 블록요소로 변경*/
width: 100%;
height: 100%;
}
#logo {
width: 204px;
height: 120px;
background-color: #be0000;
}
#header_right {
width: 396px;
height: 120px;
background-color: #ff5d5d;
}
#right_top {
width: 396px;
height: 60px;
background-color: #f99;
}
#gnb {
float: right;
}
#gnb li {
border: 1px solid blue;
width: 64px;
height: 18px;
}
gnb li a {
display: block;
width: 100%;
height: 100%;
}
#right_lnb {
width: 396px;
height: 60px;
background-color: #f33;
}
#right_lnb li {
border: 1px solid blue;
/*외곽선: 두께 종류 색상*/
width: 64px;
height: 58px;
}
#right_lnb li a {
display: block;
width: 100%;
height: 100%;
}
/*header의 직계 하위 div*/
#header > div {
float: left;
}
/*** contentwrap ***/
#contentwrap {
width: 1000px;
height: 667px;
background-color: green;
}
/*** footer ***/
#footer {
width: 1000px;
height: 100px;
background-color: blue;
}
#fnb {
width: 1000px;
height: 50px;
background-color: #5b5bff;
}
#fnb li {
border: 1px solid red;
/*외곽선: 두께 종류 색상*/
/* border의 기본설정은 width와 height의 불포함 */
width: 198px;
height: 48px;
line-height: 50px;
/*행간 - 글자가 1행일 때 height와 동일하게 적용하면 세로 중앙 정렬*/
}
#fnb li a {
/*크기적용을 위해 블록태그로 변환*/
display: block;
width: 100%;
height: 100%;
}
#address {
width: 1000px;
height: 50px;
background-color: #0000bf;
}
address {
font-style: normal;
/* 글자의 기울기 취소(address의 기본 설정은 italic) */
}css에서는 1번 학습때와 마찬가지로 기본 브라우저 초기값 설정을 해주었으며, a 태그 지정 시 걸려있는 밑줄에 대해 제거를 해주었으며, li 태그에 대해서는 목록 스타일을 제거 및 인라인으로 배열하기 위해 float: left; 속성을 사용해주었습니다. header에서 영역별로 나누어 주었는데, 좌측 영역 2개, 중앙 로고로 1개, 우측 영역 2개로 총 5개의 영역을 지정해주었습니다. css에서 영역을 만들어 줄 경우는 두부를 칼로 자르는 것과 같이 잘라서 붙이는 방식이아닌, 상자안에 작은상자를 넣고, 그 안에 크기를 지정해서 작은상자를 또 만들어주는 식으로 논리적으로 생성시켜준다는 느낌으로 이해하시면 됩니다.
이에 대해서 기본 header에 크기로 가로 1000px, 세로 높이 120px로 큰 상자 하나를 만들어주었으며, 좌측 영역을 먼저 1개의 영역으로 header_left로 가로 400px, 세로 120px로 작은상자 하나를 만들어주고, 그 안에 작은상자를 2개인 left_top, left_lnb로 나누어주었습니다. 이와 같이 우측도 right_top, right_lnb로 나누어주었습니다. 좌측, 우측 모두 블록으로 영역을 나누어준 것이기 때문에 별도로 float:left; 속성을 사용하지 않았습니다. li 목록 태그에 대해서는 앞서 전역으로 float:left;를 지정해주었으므로, 인라인 방식인 가로로 표기되며, width, height로 li 별 크기를 지정해주었으며, 해당 영역 부분 클릭 시 a 태그로 하이퍼링크가 되어야하는데, 기본적으로 a 태그의 경우는 인라인 방식으로 크기 지정이 되지 않아, 글자가 적혀있는 부분에만 하이퍼링크가 걸려있으며, 크기를 지정해준 영역내에서는 이동되지 않습니다. 따라서 left_lnb li a 안에 display: block;로 해당 설정을 해주게 될 시에 기본 인라인 방식인 a태그를 블록 형식으로 바꿔주어 생긴 영역 크기만큼 모두 하이퍼링크가 가능한 것을 보실 수 있습니다.
#header > div 와 같은 부분이 보이는데, 이것은 바로 밑에 해당하는 요소에 대해서만 설정을 해주는 것입니다.
header 클래스 바로 밑에 있는 div에 대해서만 설정이 되는 것입니다.
만약 #header div 로 설정을 했다면 header 클래스 밑에 있는 모든 div 태그가 들어간 요소들에 대해 설정을 해주게 됩니다. border 속성은 테두리에 대한 것으로 border: 1px solid red; 와 같은 경우 테두리 색상을 빨간색, 종류는 실선, 두께는 1px로 표기하라는 의미입니다.
line-height: 50px; 이라는 부분이 존재하는데, 이것은 행간의 높이를 지정할 때 사용합니다.
보통 li 태그로 목록을 만들 때, 글자가 한줄로 표기될 경우 해당 글자 기준 위, 아래로 반씩 나눠 배치되게 됩니다.
위에서 50px로 지정해주었기 때문에, 해당 리스트 안에 각 글자들 기준으로 위아래로 25px씩 간격이 생기게 됩니다.
보통 한줄의 경우 이런방법으로 세로 가운데 정렬을 하게 됩니다.
기본적으로 border로 테두리 두께에 대해서는 width, height 값이 포함되지 않아, 테두리선의 크기를 생각하고 지정해주어야합니다.
