https://opentutorials.org/course/3084
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
opentutorials.org
저번 w3school 에서 레퍼런스 느낌의 문서를 보며 기초를 배웠다면 이번에는 생활코딩의 web1, web2 강의를 봤습니다.
이 강의는 아무것도 모르는 초심자에게 알려 준다는 느낌을 받았으나 전의 w3school 문서처럼 많은 내용들을 전달해
주는 방식이 아닌 기본 내용(태그 사용법, css 적용법 등...)을 알려 준 후 여기서 더 나아갈 사람들에게 다음 강의로
이어지게 하는 형식입니다.
일단 html과 css를 아예 모르는 상태는 아니라고 가정하고, 위 강의를 듣고 난 후 나온 결과물과 코드에 대해
설명 드리겠습니다.
먼저 WEB1 html 강의를 보고 난 후 결과물 페이지입니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>main page</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.</p>
</body>
</html>(메인 페이지와 html, css, javascript를 클릭했을 때 나오는 페이지와 코드 내용이 거의 유사하기에 메인 페이지를 기준으로
설명하겠습니다.)
기본 html 구조를 보면 맨 위에 !DOCTYPE html 을 통해 html 문서라는 것을 선언해 줬습니다.
그리고 html 태그가 전체를 감싸고 있고 그 안에 head 태그와 body 태그로 나뉘는데, head 태그는 해당 페이지의
메타 데이터(데이터를 설명하는 데이터라고 생각하면 된다.) 정보들이 담겨지는 태그입니다.
head 태그 안의 내용을 보면 meta charset이라는 태그가 있는데 이 페이지의 인코딩을 utf-8이란 것으로 읽겠다는
의미입니다.
(쉽게 말해서 브라우저에게 문자들을 그리는 방식을 알려주는 것으로, utf-8로 하지 않으면 한글이 깨질 수 있습니다.)
바로 밑의 title 태그는 브라우저의 탭에 나오는 제목으로,
이렇게 title에 넣은 글자가 나오게 됩니다.
이제 body 태그를 보면, 위의 웹 페이지 사진을 봤을 때 HTML, CSS, JavaScript가 1번~3번 순서대로 정렬되어 있는 것을
볼 수 있습니다.
위와 같이 관련 있는 것들끼리 정렬시키고 싶을 때 사용하는 태그가 위 코드의 ol 또는 ul 태그이며, 해당 태그 안에
li 태그로 순서대로 놓을 것들을 감싸면 됩니다.
그 밑의 h2 태그는 WEB 글자를 제목 효과를 줘서 글자 크기와 굵기를 키우는 역할 태그이고, p 태그는 한 단락을
나누는 태그로써 위, 아래에 기본으로 여백 값을 주게 됩니다.
그리고 CSS 강의까지 보고 난 후의 결과물입니다.
보다싶이 구분짓는 선이 생기는 등 디자인이 추가되었으며,
화면의 가로 크기를 일정 이상 줄이게 되면 구분짓는 선이 사라지고 화면 구성이 위에서 아래로 차례대로 배치되도록
바뀝니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML,
SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually
engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
</div>
</div>
</body>
</html>html 코드를 보면 위쪽의 코드와 비교했을 때 추가된 코드는 head 태그에서 link 태그로 style.css 파일의 내용을
넣어 주는 코드가 추가되었습니다.
그리고 ol과 내용(h2, p 태그)에 div로 감싸준 후 id 값을 줬습니다.
이 id 값은 css에서 활용될 것이기에 css 코드를 보겠습니다.
body{
margin:0;
}
a {
color:black;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1 {
border-bottom:none;
}
}
전체적인 코드는 이렇고, 하나씩 설명하겠습니다.
body{
margin:0;
}body 태그는 페이지의 내용 태그들 전체를 감싸는 태그로, margin 값을 0으로 준 것은 기본으로 페이지와 내용 사이에
적용되는 여백 값을 없어지게 하도록 하는 것입니다.
a {
color:black;
}a 태그는 위 페이지에서 1. HTML ~ 3. JavaScript 부분으로 클릭 시 다른 페이지로 넘어가게끔 하는 역할의 태그입니다.
이 때 a 태그의 기본 css 디자인은 색을 띄게 되는데 해당 색깔을 검은색으로 바꿔 주겠다는 의미입니다.
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}h1 태그는 페이지를 봤을 때 맨 위의 WEB 이라고 되어 있는 부분으로, 글씨 크기를 45px로 키운 후 가운데 배치를
합니다.(text-align)
그리고 아래 내용들과의 구분 선을 긋기 위해 border-bottom을 적용해 주고 margin과 padding 값으로 여백을
조절했습니다.
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}ol 태그는 li 태그 전체를 감싸는 태그로, 페이지를 봤을 때 오른쪽에만 선이 그어져 있고(border-right) 그 선과 여백이
어느 정도 있는 것을 볼 수 있습니다.(margin, padding)
그리고 가로 값을 100px이라는 고정된 값을 줌으로써 100px만큼의 가로 공간을 차지하도록 했습니다.
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}여기서 중요한 것은 grid-template-columns인데, 위 html 코드를 보면 div id="grid" 안에 크게 ol 태그와
div id="article" 태그가 있습니다.
그 때 grid-template-columns의 값을 150px, 1fr로 주게 되면 첫 번째 영역인 ol 태그 영역의 가로 값이 150px 만큼
차지하게 되고 150px을 제외한 나머지 영역을 div article에게 주게 됩니다.
그렇게 위 페이지 사진을 보게 되면 목차와 내용이 150px, 나머지 영역으로 크기를 나눠 가지게 됩니다.
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1 {
border-bottom:none;
}
}마지막으로 midia query에 대한 내용인데, 페이지를 보면 화면 가로 크기를 줄였을 때 일정 크기 이상 줄어들게 되면
화면 배치가 바뀌는 것을 볼 수 있는데 그에 대한 설정을 여기서 했다고 보면 됩니다.
보면 grid id 값에 display를 다시 block으로 줘서 원래 html 페이지 모양처럼 위에서 아래로 배치되도록 바꿨으며,
ol과 h1 태그의 border 값을 제거하여(구분선이 없어짐) 최종적으로 위 페이지 사진처럼 위에서 아래로 배치되게
만든 것입니다.
'기타 이야기 > 공부 이야기' 카테고리의 다른 글
| 공부 과정 기록04_생활코딩 JavaScript 강의 (0) | 2022.08.16 |
|---|---|
| 공부 과정 기록03_HTML, CSS 활용하여 페이지 제작 (0) | 2022.08.16 |
| 공부 과정 기록01_w3school HTML, CSS 문서 (0) | 2022.08.15 |
| 공부 과정 기록_시작 (0) | 2022.08.15 |
| 1일 1커밋 1년 도전 (0) | 2022.03.09 |
댓글