전에 생활코딩 강의까지 봤었다면, 이번에는 JavaScript는 아직 하지 않았으니 지금까지 공부한 것 복습 겸해서
HTML과 CSS를 활용하여 페이지를 하나 만들어 보자는 생각이 들었습니다.
일단 완성된 모습부터 보여 드리겠습니다.
메인 페이지의 모습입니다.
전 글에서 한 번 소개했었던 미디어 쿼리를 활용하여 화면의 가로 길이에 따라 디자인이 3가지로 변하도록
만들었습니다.
또한, 왼쪽의 목차를 클릭하면 각 페이지로 넘어가게 됩니다.
이 페이지를 만들면서 느낀 점은 확실히 문서를 읽거나, 강의를 보고 따라 하는 것보다 직접 어떤 페이지를 만들지
고민하고 디자인을 어떻게 할지 고민하면서 구현에 있어 모르는 부분이 있으면 찾아 보고 하며 더욱 공부가
잘 되었습니다.
특히 강의를 보거나 문서를 읽으며 머리로는 이해해도 이 태그, 문법들이 실제로 어떻게 쓰일지에 대한 것은
감이 잡히지 않았는데 직접 생각해가며 코딩하니 더 알아야 할 점과 어떤 코드가 어떻게 쓰이는지
이해하게 되어 훨씬 좋았습니다.
그럼 코드를 보며 어떻게 했는지 알아 보겠습니다.
(세부 소개 페이지의 html 코드는 구조가 거의 비슷하기에 메인 페이지와 세부 소개 페이지 1개 정도만
예시로 보여 드리겠습니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Main Page</title>
<link rel="stylesheet" href="pagecss.css">
</head>
<body>
<div class="header">
<h1><a href="main.html">여행지 소개</a></h1>
</div>
<div class="section">
<div class="nav">
<ul>
<li><a href="macau.html">마카오</a></li>
<li><a href="taiwan.html">대만</a></li>
<li><a href="japan.html">일본</a></li>
</ul>
</div>
<div class="article">
<p>메인 페이지입니다.</p>
<p>왼쪽의 메뉴를 선택하면 각 나라의 정보가 나옵니다.</p>
</div>
</div>
<div class="footer">
<p id="today"></p>
<p id="changeDay"></p>
</div>
<script type="text/javascript" src="travelPageJS.js"></script>
</body>
</html>
먼저 메인 페이지의 HTML 코드입니다.
head 태그에는 meta charset 값을 utf-8로 정해 주고 title 값을 준 후 link href로 css 파일을 불러서 디자인을
적용시켰습니다.
body 태그의 구조를 보면 크게 header, section, footer 3가지로 나눠져 있으며 이는 div 태그로 감싼
것을 볼 수 있습니다.
div section 안에는 nav, article로 나눠져 있으며, 이 클래스 값들은 css에서 활용되기 때문에 기억해 두시면
좋을 것 같습니다.
css를 보기 전 간단하게 설명하자면 header 내용은 페이지 맨 위의 "여행지 소개" 제목 텍스트를 담고 있는
태그이고, section은 제목 밑의 왼쪽의 목차와 오른쪽의 설명 내용이 담겨져 있는 공간 전체를 감싸는
태그에 footer는 화면 밑 쪽에 현재 날짜, 마지막 수정 날짜 등을 담고 있는 공간입니다.
그리고 제목과 목차 텍스트를 보면 a 태그로 감싸져 있어 텍스트 클릭 시 해당 페이지로 넘어갈 수
있게끔 했습니다.
(물론 href 값은 현재 제 경로 기준으로, 컴퓨터마다 경로에 맞게 설정해 줘야 합니다.)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Macau_Main Page</title>
<link rel="stylesheet" href="pagecss.css">
</head>
<body>
<div class="header">
<h1><a href="main.html">여행지 소개</a></h1>
</div>
<div class="section">
<div class="nav">
<ul>
<li><a href="macau.html" id="selected">마카오</a>
<ul>
<li><a href="macau_senado.html">세나도 광장</a></li>
<li><a href="macau_paul.html">성 바울 성당</a></li>
<li><a href="macau_venetian.html">베네시안 호텔</a></li>
</ul>
</li>
<li><a href="taiwan.html">대만</a></li>
<li><a href="japan.html">일본</a></li>
</ul>
</div>
<div class="article">
<img src="picture/macauMain.jpg" alt="macau picture" title="마카오 야간 풍경">
<h2>마카오</h2>
<p>마카오(澳門, Macau)는 동아시아의 도시이자 중화인민공화국에 속한 특별행정구이다.
전신은 포르투갈의 식민지였던 포르투갈령 마카오였다. 수백 년 전부터 포르투갈인들이 지어온 남유럽풍 고건축과 문화가 남아있어 이색적인 분위기를 간직하고 있어 여러모로 관광객들을 끌어들여 관광 산업이 발달해 있다. 이베리아 반도와 중국을 동시에 느낄 수 있다. 역사적인 이유로 인해 마카오는 중국 영토이지만 일국양제가 시행되어 많은 부분에서 본토인 중국 대륙과 분리되어 있다. 마카오는 몇몇 국가 대표팀도 중국과는 별도로 가지고 있고 국제기구에도 중국과는 별도로 가입할 자격이 주어진다.</p>
</div>
</div>
<div class="footer">
<p id="today"></p>
<p id="changeDay"></p>
<p>문구 출처 : <a href="https://namu.wiki/w/%EB%A7%88%EC%B9%B4%EC%98%A4" target="_blank">나무위키 마카오 문서</a></p>
</div>
<script type="text/javascript" src="travelPageJS.js"></script>
</body>
</html>
다음으로 마카오 페이지의 HTML 코드입니다.
다른 페이지(대만, 일본 등....)들도 위 코드와 내용만 조금씩 다르고 구조는 거의 비슷하기에 이 코드 하나만
가져 왔습니다.
메인 페이지의 HTML 코드와 비교했을 때 새롭게 추가된 부분을 보겠습니다.
먼저 section > nav 태그 안의 내용을 보면 해당 나라를 클릭했을 때 그 나라의 관광 지역 3곳을 목차에 추가로
표시하기 위해 li 태그 안에 ul 태그를 추가로 넣은 것을 볼 수 있습니다.
여기서는 마카오 메인 페이지이기 때문에 마카오 li 태그 안에 ul 태그를 넣은 것이며, 현재 목차에서 마카오
페이지가 선택되어 있다는 것을 디자인하기 위해 "마카오" 텍스트를 감싸고 있는 a 태그에 id 값으로
selected라는 값을 줬으며, 이 id 값 또한 css에서 활용될 것입니다.
그 외에 article에서도 해당 나라(또는 관광 지역)의 사진을 넣기 위해 img 태그를 사용하였으며, src의 값은
이미지를 다운받아서 사용한 저의 경로값이기 때문에 이는 그때 상황에 맞는 경로값을 넣어 줘야 합니다.
그리고 footer에서도 문구 출처 텍스트를 추가하였으며, 여기서 텍스트를 눌렀을 때 새로운 탭에서
페이지가 열리게 하기 위해 target="_blank" 값을 추가한 a 태그를 사용했습니다.
마지막으로 메인 페이지와 이 페이지의 코드 맨 밑 쪽을 보면 script 태그가 있는데, 이 당시에는 JavaScript를
배우지 않았으나 페이지 구상 단계에서 현재 날짜를 표시해 주면 좋겠다는 생각에 따로 JavaScript 문법을
찾아 넣었기 때문에 script 태그가 추가되어 있습니다.
이제 CSS 코드를 보겠습니다.
(이 css는 모든 html 페이지에 공통으로 적용되어 있는 코드입니다.)
/* 일반 태그 CSS */
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
a:active {
color: powderblue;
}
img {
max-width: 100%;
height: auto;
}
/* 클래스 선택자 CSS */
.header {
text-align: center;
margin-bottom: 40px;
}
.footer {
padding: 10px;
font-size: 14px;
}
.section .nav {
float: left;
width: 23%;
}
.section .article {
float: left;
width: 73%;
padding: 20px;
}
.section::after {
content: "";
display: table;
clear: both;
}
.section .nav ul {
padding: 20px;
}
.section .nav li {
list-style-type: none;
margin: 20px;
}
.section .nav li > ul {
font-size: 12px;
margin: 0;
padding: 0;
color: rgb(60, 60, 60);
}
.section *, .footer {
background-color: white;
margin: 10px;
border-radius: 10px;
}
/* ID 선택자 CSS */
#selected {
color: gray;
}
/* 미디어쿼리 CSS */
@media only screen and (max-width: 1010px) {
.section .nav, .section .article {
width: 97%;
}
}
@media only screen and (min-width: 1600px) {
.section{
width: 70%;
}
.section .article {
width: 75%;
}
.section .nav{
width: 20%;
}
.footer {
float: left;
width: 28%;
}
.section::after {
clear: none;
}
}
전체 코드입니다.
코드가 좀 길어서 일반 태그, 클래스, id, 미디어 쿼리로 나눠서 코드를 보겠습니다.
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
a:active {
color: powderblue;
}
img {
max-width: 100%;
height: auto;
}
일반 태그 css 코드입니다.
먼저 전체 선택자( * ) 를 사용하여 box-sizing: border-box 를 적용시켰는데, css를 적용시킬 때 보면 가로 세로 값을
정해도 생각보다 크기가 더 크게 나오는 경우가 있습니다.
그럴 때에는 padding이나 margin과 같은 다른 요소들이 크기값에 영향을 미쳐 그렇게 되는 경우가 많은데,
이를 방지하기 위해 border-box 값을 사용한 것입니다.
border-box 값을 사용하면 다른 요소(여백값 등)를 포함하여 크기값을 계산하기 때문에 위와 같은 경우를 방지할
수 있게 됩니다.
그리고 body 태그에는 배경색을 지정하고 margin 값을 0으로 줌으로써 페이지의 기본 여백값을
없어지게 했습니다.
a 태그는 제목과 목차 텍스트를 감싸는 태그로, a 태그의 기본 css인 밑줄을 없애기 위해 text-decoration 값을
none으로 준 후 텍스트 색상을 black으로 줬습니다.
바로 밑의 a:hover는 a 태그에 마우스를 올렸을 때의 상태를 의미하는 css 선택자로 이 때에는 밑줄이
그어지도록(underline) 했습니다.
그리고 a:active는 a 태그 영역을 클릭한 상태를 의미하는 선택자로, 텍스트 색상을 변경합니다.(powderblue)
a 태그 위에 마우스를 올린 상태와, a 태그 영역을 클릭한 상태에 css가 적용된 모습입니다.
마지막으로 이미지 태그(img)에는 max-width값 100%, height값 auto로 줌으로써 이미지 크기가 화면 크기에
맞게 상대적으로 정해지면서, 원래 이미지 최대 크기보다는 커지지 않게 적용시켰습니다.
.header {
text-align: center;
margin-bottom: 40px;
}
.footer {
padding: 10px;
font-size: 14px;
}
.section .nav {
float: left;
width: 23%;
}
.section .article {
float: left;
width: 73%;
padding: 20px;
}
.section::after {
content: "";
display: table;
clear: both;
}
.section .nav ul {
padding: 20px;
}
.section .nav li {
list-style-type: none;
margin: 20px;
}
.section .nav li > ul {
font-size: 12px;
margin: 0;
padding: 0;
color: rgb(60, 60, 60);
}
.section *, .footer {
background-color: white;
margin: 10px;
border-radius: 10px;
}
클래스 선택자 css입니다.
코드 내용이 많으니 기본 설정값(padding, margin, color, font 등....)의 설명은 건너뛰고 중요한 부분만
보겠습니다.
.section .nav {
float: left;
width: 23%;
}
.section .article {
float: left;
width: 73%;
padding: 20px;
}
.section::after {
content: "";
display: table;
clear: both;
}
바로 이 부분입니다.
이 코드가 위에서 봤었던 목차와 설명 영역을 배치하는 코드로, float: left가 그 역할을 합니다.
float: left를 하게 되면 웹 페이지를 3차원이라고 생각했을 때 float 값을 준 영역이 위로 띄워진다고 생각하면 됩니다.
그럼 여기서는 float left 값을 줬으니 section의 nav 영역과 article 영역이 위로 띄워져 왼쪽으로 차례대로 붙는다고
생각하면 되고 거기에 nav에는 가로값 23%, article에는 가로값 73%를 줬으니 브라우저의 크기를 조절하면
해당 % 값 만큼 상대적으로 크기가 바뀌게 됩니다.
그리고 float 값에는 중요한 특징이 하나 더 있는데, float값을 주게 되면 해당 영역이 위로 띄워지게 되는데 그렇게 되면
원래 HTML 페이지의 특성상 위에서 아래로 배치되었던 아래의 영역들이 위로 올라오게 되어 float 영역에게 가려지게
될 수도 있습니다.
이를 방지하기 위한 값이 clear: both 값이며, section: after 선택자는 section 영역의 다음 영역들에게 css 코드를
적용시키겠다는 의미의 선택자입니다.
#selected {
color: gray;
}
id 값 css 코드인데, 이 코드의 의미는 단순합니다.
저는 목차에서 현재 선택된 텍스트에 다른 효과를 주고 싶었고, 이를 selected라는 id 값 css 코드를 새로 만들어
글자 색을 회색(gray)으로 주게 되어 HTML 코드에서는 해당 페이지에서 선택된 목차에 id 값으로 selected 값만
주면 바뀌게 했습니다.
대만의 중정기념당 페이지를 클릭하여 그 페이지로 가게 되면 중정기념당 텍스트의 a 태그에 id 값 selected를 줘서
글자 색이 다른 글자와 다르게 회색으로 표시되는 것을 볼 수 있습니다.
@media only screen and (max-width: 1010px) {
.section .nav, .section .article {
width: 97%;
}
}
@media only screen and (min-width: 1600px) {
.section{
width: 70%;
}
.section .article {
width: 75%;
}
.section .nav{
width: 20%;
}
.footer {
float: left;
width: 28%;
}
.section::after {
clear: none;
}
}마지막으로 미디어쿼리 css 코드입니다.
이 글의 맨 위쪽을 보면 브라우저의 크기 값을 조절했을 때 화면의 배치가 3종류로 바뀌는 것을 볼 수 있습니다.
이것을 미디어쿼리로 동작하게 한 것이며, 위에서 지금까지 봤던 css 코드는 그 중 브라우저가 중간 크기일 때를
가정하여 css 코드를 쓴 것입니다.
위쪽의 미디어 쿼리부터 보게 되면 max-width: 1010px 값을 볼 수 있습니다.
이 의미는 브라우저의 가로 길이가 1010px까지 아래의 코드를 적용시킨다는 것으로, 이 경우는 브라우저의 가로
길이가 작을 때 적용할 코드라고 보면 되겠습니다.
이 때 section 안의 nav와 article 영역의 width 크기를 97%로 주게 되는데 이렇게 되면,
위에서 봤던 것처럼 화면의 가로 크기가 작을 때의 배치로 바뀌게 됩니다.
그 다음은 화면의 가로 크기가 1600px 이상으로 커졌을 때의 배치에 대한 코드인데, 먼저 section과 section 내부의
nav, article의 width 값을 % 값으로 줬습니다.
그리고 footer도 위쪽으로 올라와 section과 같은 라인에서 배치되게 float left 값을 주고, 28%의 가로값을 줬습니다.
이 때 위쪽의 css 코드를 보면 section::after 선택자로 clear both 값을 줘서 이후의 영역들에게 float 값을 해제하도록
했었는데, footer의 float left 값 적용을 위해 다시 section:: after로 clear: none 값을 줌으로써 footer 영역도 section
영역 옆으로 붙게 했습니다.
그렇게 해서 화면 크기가 1600px 이상 늘어났을 때의 배치가 완성된 것입니다.
'기타 이야기 > 공부 이야기' 카테고리의 다른 글
| 공부 과정 기록05_w3school 문서 (0) | 2022.08.17 |
|---|---|
| 공부 과정 기록04_생활코딩 JavaScript 강의 (0) | 2022.08.16 |
| 공부 과정 기록02_생활코딩 HTML, CSS 강의 (0) | 2022.08.15 |
| 공부 과정 기록01_w3school HTML, CSS 문서 (0) | 2022.08.15 |
| 공부 과정 기록_시작 (0) | 2022.08.15 |
댓글