0. 학습목표
CSS기초를 이어서 배우고, 자주 쓰이는 속성을 익히기 위해
경일게임아카데미 웹사이트를 따라 만들기로 했다.
첫째로 위 검은 색 헤더를 구현하고(사선 처리는 나중에)
둘째로 메뉴상단, 마지막으로 이미지 위에 <div>를 올리면 된다.
우선 배운 걸로 메뉴상단부터 만들어 봤다.
1. CSS기초와 작업 전 확인
<!DOCTYPE html>
<html lang="en">
<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>
<link href="./css/sample2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>hello, world!</div>
</body>
</html>링크가 연결된 기본 양식부터 작성했다. 작성하기 전에 항상 연결이 잘 됐는지 확인하라고 하셨다. css파일과 연결한 html 문서 div 영역에 색이 변하는지 확인할 내용을 입력하고
*{
margin: 0;
padding: 0;
color: red;
}
연결한 css파일에서 글자 색을 빨강으로 바꿨다. * 선택자는 파일 전체를 선택하는데 엘리먼트에는 디폴트로 들어가 있는 마진이나 패딩값들이 있는 경우가 종종 있다. 초기에 margin과 padding을 0으로 설정하면 편하게 작업할 수 있다. 적용을 의도하지 않은 엘리먼트에까지 전부 속성을 부여해 오류를 낼 수 있어 실무에서는 이렇게 하지 않는다고 한다.
전체 선택자를 사용하면 html 태그를 포함해 head, title, style 태그까지 선택한다.
잘 나온다.
1.1 구현순서 파악
좌상단 꼭짓점부터 내가 쓴 코드들이 구현된다.
margin: 0 auto;로 이렇게 좌상단부터 시작하는 div 종속관계 코드들을 가운데 정렬할 수 있다.
예전에는 가로 사이즈 1024px로 놓고 웹페이지를 만들다가 시대가 변하면서 1200px이 현재 보통 쓰는 사이즈가 되었다고 한다. 우리는 1200px로 놓고 작업했다.
위처럼 <div>가 종속관계에 있는 게 아니라 각각 있으면 아래처럼 구현된다.
<body>
<div >글자쓰기</div>
<div>글자쓰기2</div>
</body>
Live Server로 직접 눈으로 확인하지 않아도 코드 구조를 보고 어떤 결과물이 나올지 알고 있어야 한다고 했다.
1.2 부모/자식 구조 코드
종속된 코드(여기서는 <div id="header">) 는 그 부모 코드(<div id="wrap">) 안에서만 효과를 적용받을 수 있다.
1.3 구분을 <div>로 하는 이유
인라인속성은 넓이나 높이 적용을 못한다.
자기가 가지고 있는 텍스트 크기만큼만 css효과가 적용되기 떄문이다.
그래서<span>대신<div>쓰는게 좋다.
2. 메뉴상단
헤더가 <div>세 개로 이루어져 있다.
2.1 구조 파악
3개의 <div>로 하나는 경일아카데미 로고를 만들고, 하나는 옆에 있는 메뉴를 만들고, 나머지 하나는 로고와 메뉴를 올리는 전체적인 공간을 만들어 구분하겠다.
#코드구조
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<div id="menu">
</div>
</div>
</div>
</div>
</body>2.2 로고
전체를 감싸고 있는 <div>태그들 안에 로고를 <h1>으로 줬다. 유일무이한 제목으로 대부분의 웹포털(네이버, 다음 등)도 이런 방식으로 로고를 만든다고 했다.
<h1 id="logo">
<a href=".\sample.html"></a>
<img src=".\logo.png" alt="로고이미지">
</h1>alt 속성은 사용자에게 이미지가 전달되지 않을 경우 텍스트로 정보를 대신해준다.
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#">
<img src="./logo.png">
</a>
</h1>
</div>
</div>
</body> 
로고가 잘 들어갔다. 그런데 위에 너무 딱 붙어 있어서 구현해야 하는 화면이랑 다르다. 저렇게 헤더가 딱 붙어있는 이유는 사실 요소 자체에 저마다의 마진과 패딩을 가지고 있는데, css파일에서 전체적으로 애초에 그 값을 없애기로 설정하고 시작해서 그렇다.
2.3 작업~ 메뉴상단 완료
*{
margin: 0;
padding: 0;
}
그렇다면 헤더에 마진-탑을 20px 주어서 어느정도 간격을 확보하겠다.
*{
margin: 0;
padding: 0;
}
#header {
margin-top: 20px;
} 
이제 저 로고가 있는 헤더 뿐만이 아니라 앞으로 작업할 비주얼, 그 아래 콘텐츠 부분도 가운데 보기 편하게 되어 있는데 그렇게 전체적으로 가운데 정렬을 하기 위해 모든 하위 div를 감싼 div id="wrap"에게 css파일에서 margin: 0 auto;로 값을 줄 것이다.
*{
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
margin-top: 20px;
} 
이어서 ul 와 li 요소로 메뉴를 만들겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="./css/index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1><a href="#">
<img src="./logo.png" />
</a></h1>
</div>
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
</div>
</body>
</html> 다시 봤는데 메뉴가 5개였다.
5개로 만들고
#logo {
float: left;
}로고를 먼저 왼쪽으로 붙인다.
ul은 오른쪽으로 붙여준다.
그 다음, 안에 있는 li 속성을 inline-block으로 바꿔 나열해준다.
#menu > li {
display: inline-block;
} 
텍스트 내용을 바꾸고, 굵기, 색 등을 주어 꾸미고, 간격을 벌려 배치하겠다.
#menu > li {
width: 180px; li가 차지하는 넓이
display: inline-block; 컴퓨터가 li요소를 inline으로 읽도록 하는 명령
text-align: center; li안의 글자를 가운데로 정렬
color: #004385;
font-weight: bold; 글씨체를 굵게하는 명령
} 
윗 간격도 벌려줘야겠다.
#menu > li {
width: 180px;
padding: 20px 0 0 0; 위에만 20px 주어 상대적으로 글자가 내려가 보이게 함
display: inline-block;
text-align: center;
color: #004385;
font-weight: bold;
} 
이상 메뉴상단을 따라 만들어 보았다.
3. 오늘 적은 코드
#HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="./css/index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1><a href="#">
<img src="./logo.png" />
</a></h1>
</div>
<ul id="menu">
<li>학교소개</li>
<li>교육과정</li>
<li>취업정보</li>
<li>커뮤니티</li>
<li>상담신청</li>
</ul>
</div>
</div>
</body>
</html>#CSS
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
margin-top: 20px;
height: 100px;
}
#logo {
float: left;
}
#wrap > #header > #menu {
float: right;
padding: 0;
}
#menu > li {
width: 180px;
padding: 20px 0 0 0;
display: inline-block;
text-align: center;
color: #004385;
font-weight: bold;
}