[HTML 무작정 해보기] 1. 기본
2022. 12. 16. 10:28ㆍLearning/HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head - css / javascript / 각종 설정 영역 -->
<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>
<!--
body - 페이지에 들어갈 내용
주석: 프로그램 실행에 영향을 주지 않음(Ctrl + /)
Front-end 공식문서: https://developer.mozilla.org/ko/docs/Web/HTML
Front-end school : https://www.w3schools.com/
-->
<h2>웹 문서 구현</h2>
<p>html(HyperText Markup Language): 문서의 구조를 작성한다.</p>
<p>css(Cascading Style Sheets): 문서에 스타일을 작성한다.</p>
<p>javascript: 문서를 동적으로 처리한다.</p>
</body>
</html>
<!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>html_002_heading.html</title>
<style type="text/css">
span {
background-color: rgb(228, 94, 94);
width: 500px;
height: 200px;
/* width height 값 적용되지 않음 - 인라인 요소*/
}
div {
background-color: rgb(75, 75, 238);
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<h2>'h' 문서의 제목을 표시할 때 사용되는 요소이다.</h2>
<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Tilte 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Tilte 6</h6>
<span>인라인의 대표적인 요소이다.</span>
<a href="https://www.naver.com/">naver</a>
<!-- 인라인과 블록 요소의 차이
인라인은 요소의 크기만큼만 공간 할당한다.
인라인 요소는 요소간의 줄바꿈이 일어나지 않는다.
글자(컨탠츠)안에서 꾸며주거나 할 때 사용한다.
width와 height를 지정해도 실제 표현되지 않는다. -->
<div>블록의 대표적인 요소이다.</div>
<!-- 블록 요소는 요소 앞뒤로 줄바꿈이 일어남.
블록 요소는 width와 height를 지정할 수 있다. -->
</body>
</html><!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>CSS</title>
<!-- 외부스타일(external style) -->
<link rel="stylesheet" href="style/outer.css" type="text/css" />
<!-- 내부스타일(internal/embeded style) -->
<style>
.one {
background-color: rgb(128, 40, 210);
color: aquamarine;
}
</style>
</head>
<body>
<!-- 속성 속성명 -->
<div class="one">internal style</div>
<div id="two">external style</div>
<!-- 인라인 스타일(inline style) -->
<div id="three" style="color: darkorange">inline style</div>
</body>
</html>외부 css 파일을 불러온 external style
/* css component */
#two {
/* #(아이디) : 아이디가 같은 요소를 지정 */
background-color: green;
}
p {
color: brown;
border: 2px solid black;
}
'Learning > HTML' 카테고리의 다른 글
| [HTML 무작정 해보기] 0. 설정 (3) | 2022.12.16 |
|---|