오늘은 HTML의 콘텐츠들의 역할 및 사용법을 간단하게 공부했다.
header - 제목정보들
footer - 페이지 맨 하단
<h1> <h6> 6단계의 문서 제목 구현
aside - 광부부분? 오른쪽에 따로 되어져있는 부분
nav - navigation
address - 연락처 제공
위에 모두 블럭요소 (영역설정,레이아웃설정!)
우리가 책을 읽을때도 목차부터 해서 큰주제부터 작은주제로 나누어지듯이 사이트들도 만들어지게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./02_content.css">
</head>
<body>
<header>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>article1</h2>
<p>Contents...</p>
</article>
<article>
<h2>article2</h2>
<p>Contents...</p>
</article>
<article>
<h2>article3</h2>
<p>Contents...</p>
</article>
</section>
<aside>
Aside
</aside>
</main>
<footer>
<address>
<a href="mailto:jmg081005@naver.com">jmg081005@naver.com</a>
<a href="tel:+8201012345678">01012345678</a>
</address>
</footer>
</body>
</html>
위코드는 아주 간단하게 구조들의 틀만 나오게 한 코드이다. 큰 페이지의 골격이라고 보면되고
header {
background: tomato;
margin : 10px;
padding : 10px;
}
header nav {
display : flex;
}
header nav ul {
list-style: none;
margin : 10px;
}
header nav ul li {
}
main{
display : flex;
}
section {
width : 70%;
background: tomato;
margin: 10;
padding: 10px;
box-sizing: border-box;
}
section h1 {
}
article {
background: yellowgreen;
margin-bottom: 10px;
padding: 10px;
}
article h2{
}
article p{
}
aside {
width: 30%;
background: tomato;
margin: 10px;
padding: 20px;
box-sizing: border-box;
}
footer {
background: tomato;
margin : 10px;
padding : 20px;
}
footer address{
}
footer address a {
display : block;
}아직 CSS를 배워보진 않았지만 간단한 예제로 살짝만 이해하면서 영역이 어떻게 나오는지정도만 확인했다.
잘 나오는것을 확인할 수 있었다.
ol - ordered list
ul - undordered list
li - list item
위 세개를 공부했는데 약자가 내가 생각한 그대로였어서 놀랐다 ㅋㅋㅋ
<!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>
</head>
<body>
<ul>
<li >
Apple
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<ol>
<li value = "7">
Apple
<ol start ="4" type = "1" reversed>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</li>
<li value = "99">Banana</li>
<li>Mango</li>
</ol>
</body>
</html>ul은 순서를 구분할 수 있는데 파이썬 함수안의 key값들로 추가기능을 할 수있는거같은 기능들이 포함되어 있다.
코드와 실행화면을 한번씩만 보면 바로바로 이해가 될 것이다.
dl - description list
dd - definition Details
dl Definition Term
이번엔 dl 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>Coffee</dt>
<dd>Coffee is a brewed drink prepared form roasetd</dd>
<dt>Milk</dt>
<dd>Milk is a food</dd>
</dl>
<ul>
<li>
<dfn>Coffee</dfn>
<p>Coffee is a brewed drink prepared form roasetd</p>
</li>
<li>
<dfn>Milk</dfn>
<p>Milk is a food</p>
</li>
</ul>
</body>
</html>
큰 특징은 dl 안에는 dt,dd말고는 들어올 수가 없는것이 특징. 그래서 css로 꾸미기 어렵다고 한다. ul,li로도 구현이 충분히 가능하다는것이 특징!
p-문단
hr / - 문단의 분리를 위해 설정
blockquote - 일반적인 인용문을 설정
마지막으로 p,hr, blockquote에 대한 개념을 정리했다. 문단이 어떻게 출력되는지를 담당한다.
말보다는 코드와 실행화면을 한번씩 보면 이해가 잘 될 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./05_p.css">
</head>
<body>
<p>
1. 동해물과 백두산이 마르고 닳도록 <br/> <!-- 줄바꿈 -->
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<hr/>
<p>
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<p>
3. 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<p>
4. 이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
</body>
</html>hr {
border: none;
border-top: 2px dashed red;
}각각 html과 css파일이다.
br은 줄바꿈을 임의로 해주고, p를 사용하면 스페이스바는 먹지않고 출력된다! hr을 이용하면 문단의 분리를 가능하게 한다는 특징이 있다.
그렇다면 내가 쓴 그대로 사용하고싶으면 어떻게할까?? pre을 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./05_p.css">
</head>
<body>
<pre>
1. 동해물과 백두산이 마르고 닳도록 <!-- 탭키 등도 같이들어간다.-->
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</pre>
<pre>1. 동해물과 백두산이 마르고 닳도록 <!-- 탭키 등도 같이들어간다.-->
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세</pre>
</body>
</html>
코드와 비교하면 내가 코드를 쉽게 보기위한 탭키까지 출력되는것을 알 수있다. 그래서 코드 두번째 단락처럼 하는것이 좋다.
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 06_멀티미디어(img,audio,video) (0) | 2021.10.31 |
|---|---|
| 05_HTML 인라인 요소 (0) | 2021.10.31 |
| 03_HTML 블록과 인라인, 메타데이터 (0) | 2021.10.28 |
| 02_css 첫걸음 (0) | 2021.10.28 |
| 01_html 기초 (0) | 2021.10.27 |