Git&GitHub Pages에서 레파지토리를 구성하고 소스 관리까지 했다.
기본 콘텐츠와 html을 구성했다.
html로만 만드니 왼쪽에 다 붙어있다.
이제 레이아웃을 꾸며야겠다.
HTML 소스.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<title>Blog</title>
</head>
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"><a href="html/test.html" target="_blank">로고</a></h1>
<dl class="headernavi">
<dt>상단 네비</dt>
<dd><a href="#">사이트맵</a></dd>
</dl>
<nav>
<h1>메인 네비</h1>
<ul class="mainnavi">
<li><a href="#">홈페이지 기초</a></li>
<li><a href="#">GITHUB</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<hr>
<div id="container">
<div class="snb">
<h2>홈페이지 기초</h2>
<ul>
<li><a href="#">소개</a></li>
</ul>
</div>
<hr>
<section id="contents">
<p class="location">
<a href="#">홈</a>
<a href="#">홈페이지 기초</a>
<strong>소개</strong>
</p>
<h1>소개</h1>
<p class="tagimg">
<img src="images/202601150006.png" alt="photo">
</p>
<p>수십년 개발자로 살고 있다. 쉽게 홈페이지를 만들 수 있는 방법을 공유하고자 한다.
</p>
</section>
</div>
<hr>
<footer id="footer">
<p class="copyright">
Copyright 2026 by Novel Lab. All Rights Reserved.
</p>
</footer>
</div>
</body>
</html>
|
cs |
6번 라인에 css 링크를 넣고 css 디렉터리에 main.css를 만들었다.
CSS로 배경색 작성.
먼저 페이지 전체 배경색을 지정하자.
3~5번 라인을 보면 body 태그에 background-color로 색을 지정했다.
어떻게 변했을까?
초록색 계열로 변했다.
하지만 기본 뒷배경을 이 색으로 하고 실제 홈페이지는 흰색으로 하고 싶다.
그래서 추가했다.
7~11 라인을 추가했다.
너비 width는 800px, margin 은 0 auto 그리고 배경색은 white로 했다.
결과는 다음과 같다.
잘 적용되었다.
HEADER 영역 만들기.
지금 왼쪽으로 항목들이 쭉 늘어서있다.
header 먼저 배치해 보자.
우선 16라인의 상단 네비와 20라인의 메인 네비는 코드상에서만 보면 된다.
그래서 화면에 나오면 안 된다.
숨겨야 해서 hide class를 만들었다.
이 구성은 단순히 글자만 숨기는 것이 아니다.
글자를 숨기고 그 자리는 보존하는 css 코드다.
9번 라인은 클릭 등 이벤트를 방지하는 코드다.
10번 라인은 글자를 투명하게 하고 11번 라인은 드래그를 방지한다.
그 결과 다음과 같이 나온다.
위 이미지를 보면 왼쪽의 상단 네비와 메인 네비라는 글자가 오른쪽을 보면 사라졌다.
그리고 그 위치에 공간은 그대로 유지되었다.
사이트맵 조정.
이제 사이트맵을 우측으로 보내고 우리의 로고로 변경할 것이다.
먼저 sitemap을 우측으로 옮기자.
16번 라인은 상단 네비 글자를 숨기기 위해 hide class로 설정했었다.
17번 라인 사이트맵은 왼쪽에 붙어 있었는데 우측 상단 적절한 곳으로 이동하자.
위 html 소스에서 13번 라인과 15번 라인을 보자.
15번 라인의 class="headernavi"가 13번 라인 id="header"에 포함된 자식 요소다.
그래서 사이트맵은 header에 자식 요소에 포함되어 있다는 의미다.
그래서 css 소스에서 25번 라인을 보자.
position:absolute로 설정했다.
부모인 header에서 position:relative로 설정했다면 absolute는 부모를 기준으로 움직인다.
실제로 header에서 position값을 설정하지 않으면 자식 요소는 브라우저 끝에 붙는다.
브라우저 크기를 조절할 때마다 우측 30px, 상단 20px의 위치에 고정돼서 따라 움직이게 된다.
즉, 우리가 만든 header 공간을 벗어나기도 한다는 의미다.
그래서 header:relative로 설정해야 header 범위에서 자식 요소가 고정된다.
이렇게 말이다.
왼쪽 상단에 logo도 이미지로 바뀌었다.
로고 조정.
html 먼저 확인해 보자.
14번째 라인을 보면 로고가 있다.
logoimg class로 설정되어 있다.
이제 css를 설정하자.
우선 31번째 라인을 보면 display를 block로 지정했다.
<a> 태그가 인라인이라 width, height 설정이 안 된다.
height:80px; 를 적용시키려면 블록으로 지정해야 하니 display:block;로 설정했다.
33번째 라인은 이미지 경로를 넣고 배경으로 반복되지 않도록 no-repeat로 설정했다.
34번째 라인 overflow는 사이즈를 벗어나는 이미지는 hidden 하라는 뜻이다.
35번째 라인에서 들여 쓰기인 text-indext:100%;를 사용해 오른쪽으로 이동한다.
34번째 라인의 overflow:hidden; 덕에 범위를 벗어나게 돼서 글자는 안 보이게 된다.
36번째 라인의 white-space:nowrap; 는 혹시 글자가 길어 줄 바꿈이 되는 걸 막는다.
이제 로고가 제대로 나오는지 확인해 보자.
로고 이미지가 잘 나왔다.
이미지는 좀 다듬어야겠다.
마무리
HTML과 CSS를 공부하다 보니 모르는 게 정말 많았다는 것을 알았다.
열심히 공부하자!
'Software > HTML&CSS' 카테고리의 다른 글
| [html 독학]왕초보 처음 HTML 배우는 중! 블로그, 홈페이지 내 손으로. 1탄 (0) | 2025.09.30 |
|---|
