1. HTML 기본 구조
<!DOCTYPE html>
<!--
HTML 최신버전으로 인식해달라는 명령어이다.
해당 명령을 하지 않을 경우 구형 버전으로 인식될 수 있다.
이해를 돕기위해 추가 설명을 하자면 html은 태그들의 집합이다.
현재(2023)는 HTML5을 사용하고 있는 상황이다.
-->
<html>
<!--
Html : HyperText Markup Language
사용자(유저). 브라우저(크롬, 웨일, --) > 웹페이지
개발자 사용자에게 보여주고 싶은 컨텐츠를
브라우저가 읽을 수 있도록 만들어 놓은 문서
-->
<head>
<!--
BODY태그를 읽기 이전에 알아야 할 정보
이 HTML 파일의 기본적인 정보
-->
<style>
body {
border: 4px solid red;
}
</style>
</head>
<body>
<!--
사용자에게 보여주고 싶은 컨텐츠
이 안에 가장 많은 코드가 작성될 것으로 예상된다.
-->
<h1>안녕하세요</h1>
</body>
</html>2. HTML을 이루는 Tag - 태그의 선언
<!DOCTYPE html>
<head> </head>
<body>
<p>
<!-- 여는 태그-->
컨텐츠를 입력!
<span> 안녕하세요! </span>
<!--닫는 태그-->
</p>
<img />
<!--이미지 태그는 클로즈 태그로 불리며,
컨텐츠가 필요하지 않은 경우 상기와 같이 한 번만 선언한다.
-->
</body>3. HTML을 이루는 Tag - 태그의 구조
<!DOCTYPE html>
<html>
<head> </head>
<body>
<!-- tag들은 계층적으로 이루어져 있다!-->
<p>
컨텐츠를 입력!
<span> 안녕하세요! </span>
</p>
</body>
</html>4. HTML을 이루는 Tag - 태그의 속성
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>
안녕하세요1
</p>
<p class=" id">
안녕하세요2
</p>
<a href="https://www.naver.com/">
네이버
</a>
</body>
</html>5. CSS - Inline 방식으로 적용하기
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--
HTML : 웹페이지의 내용
CSS : 웹페이지의 디자인
-->
<p style="font-size : 48px;
font-weight: lighter;
color: rgb(119, 30, 76);
">
안녕하세요
</p>
</body>
</html>6. CSS - Style 태그로 적용하기
<!DOCTYPE html>
<html>
<!--
style tag는 왜 head 안에 선언되는가?
body tag 안에 선언해도 되지만 코드가 많아질 경우 순서에 따라 렌더링이 늦어질 수 있다.
[적용 우선순위]
1. inline *ex) p{} / <p style="color: black;"> </p>
2. id *ex) #heading{} / <p id="heading"> </p>
3. class *ex) .title{} / <p class="title"> </p>
4. tag *ex) p{} / <p> </p>
-->
<head>
<style>
p {
font-size: 36px;
color: green;
font-weight: bold;
}
.title {
font-size: 36px;
color: red;
font-weight: blod;
}
#heading {
font-size: 36px;
color: blue;
font-weight: bold;
}
</style>
<body>
<p id="heading">
안녕하세요
</p>
<p class="title">
안녕하세요
</p>
<p style="color: black;" class="title" id="heading">
판다코딩입니다!
</p>
</body>
</head>
</html>7. CSS - class와 id 속성
<!DOCTYPE html>
<html>
<!--
주석처리: Ctrl + K + C
주석제거: Ctrl + K + U
id에 값은 고유하게 한 번만 사용하자고 개발자들끼리 협의 하였습니다.
class는
. = class
# = id
p#div*5
<p id="div"></p>
<p id="div"></p>
<p id="div"></p>
<p id="div"></p>
<p id="div"></p>
p.title*5
<P class="TITLE"></P>
<P class="TITLE"></P>
<P class="TITLE"></P>
<P class="TITLE"></P>
<P class="TITLE"></P>
ul>li*5
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
-->
<head>
<style>
.title-color {
color: red;
}
.title-size {
font-size: 36px;
}
.title-font {
font-weight: blod;
}
#heading {
font-size: 36px;
color: blue;
font-weight: bold;
}
</style>
<body>
<p id="heading">
판다코딩입니다!
</p>
<p class="title-color title-size title-font">
안녕하세요!
</p>
</body>
</head>
</html>8. CSS - Link 태그로 CSS 파일 불러오기
html
<!DOCTYPE html> <!-- 개발자들은 하나의 파일은 하나의 역할만 담당하는 것을 좋아한다. 하나의 함수는 하나의 기능만 동작하기를 원합니다. --> <html> <head> <!--link:css => <link rel="stylesheet" href="style.css">--> <!--CSS Peek 단축키 변경: 파일->기본설정->바로 가기 키(Ctrl+K - Ctrl+S) -> 'peek'Search -> 키 바인딩 수정(Alt+F12 -> Ctrl+E)--> <!--CSS Peek 단축키 활용: 함수 드래그해서 단축키 클릭(Ctrl+E)->수정 --> <link rel="stylesheet" href="8. CSS - Link 태그로 CSS 파일 불러오기.css"> </head> <body> <p id="title">안녕하세요!</p> <p class="author">판다코딩입니다!</p> </body> </html>
css
#title{ color:red; } .author{ color:blue; } p{ font-size: 24px; }
참조
[Psalm 25:3] Blockchain Developer