1. 문단을 표현할 땐 p태그
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="1. 문단을 표현할 땐 p태그 13.css">
</head>
<body>
<!--p태그는 문단 태그라고 한다.-->
<!--p태그는 문단의 시작을 알린다.-->
<!--p태그는 display: block;을 가지고 있다.-->
<!--<p style="display: inline-block;">안녕하세요!</p>-->
<!--문단복사: Alt+Shift+방향키 아래로-->
<!--텍스트 자동 채우기: <p>Lorem</p>-->
<!--p태그 안에 공백은 Space바 한 번으로 취급된다.-->
<!--<br>: 줄바꿈-->
<!--&: 공백을 의미-->
<!--<> = <> = 모두 꺽쇠를 표현-->
<!--##검색 키워드: html entities (익스케이프 문법 치환표)-->
<body style="border: 4px solid red">
<p>안녕하세요!</p>
<p>안녕하세요!</p>
<p>Lorem ipsum dolor sitx amet consectetur adipisicing elit. Minus, corrupti nihil
quibusdam libero quos suscipit consectetur quo repellat ad iure omnis, odio amet dolore fugit nemo illo, eius ratione corporis?</p>
<>&&
</body>
</html>2. 제목을 표현할 땐 h태그
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="2.css">
</head>
<body>
<!--가로 다중선택: 함수(h1)클릭 -> Ctrl+D -> 수정-->
<!--세로 다중선택: 함수(<h)드래그 -> Ctrl+D -> 방향키로 이동 -> 입력-->
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
<h1>안녕하세요!</h1>
<p style="font-size: 2rem; font-weight: bold">안녕하세요!</p>
<!--id=""는 고유값으로 사용하기로 개발자들 간의 협의되었다.-->
<!--제목을 표현할 때는 <h1></h1>를 사용하기로 개발자들 간의 협의되었다.-->
</body>
</html>3. 목록을 보여주는 ul, ol, li 태그
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="3.css">
</head>
<body>
<!--
ol: 순서 목록
ul: 순서가 없는 목록
li: 목록의 내용
목록들을 중첩되어서 사용될 수 있다.
-->
<ol>
<li>가나다</li>
<li>마바사</li>
<li>abc</li>
<li>def</li>
</ol>
<ol start="5">
<li>가나다</li>
<li>마바사</li>
<li value="10">abc</li>
<li value="20">def</li>
</ol>
<ol style="list-style: none;">
<li>가나다</li>
<li>마바사</li>
<li>abc</li>
<li>def</li>
</ol>
<ul style="list-style: none; padding-left: 0px;">
<li>가나다</li>
<li>마바사</li>
<li>abc</li>
<li>def</li>
</ul>
<ul style="list-style-type: circle;">
<li>가나다</li>
<li>마바사</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>가나다</li>
<li>마바사</li>
<li>abc</li>
<li>def</li>
</ul>
</body>
</html>4. 폰트 스타일을 위한 태그들
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="4.css">
</head>
<body>
<p>
안녕하세요!
<!--스타일은 -->
<b>판다코딩</b>입니다.
<i>판다코딩</i>입니다.
<u>판다코딩</u>입니다.
<!--시멘틱 태그 (특별한 의미 때문에 만들어진)와
디자인 태그는 다르나 헷갈릴 수 있다.
##검색 키워드: html text semantic (시멘틱 태그 종류)
[시멘틱 태그 종류]
u: 고유명사, 철자가 틀렸을 때
s: 문서가 틀렸을 때
del: 예전버전에 있었던 문장인데, 최신 버전에서 빠졌을 때
-->
<p><center>안녕하세요! 판다코딩입니다.</center>
<!--center 태그는 html5 부터 더이상 표준태그가 아니다.
유독 디자인 관련 태그가 이러하다.-->
</p>
</emody>
</html>5. 특별한 의미를 가지고 있는 Semantic Tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="5.css">
</head>
<body>
<p>
<p><b>안녕하세요! 판다코딩입니다.</b></p>
<!--
b: 단순히 글자만 굵게
-->
<p><strong>안녕하세요! 판다코딩입니다.</strong></p>
<!--
strong: 문서에서 중요한 단어
-->
<p><i>안녕하세요! 판다코딩입니다.</i></p>
<!--
이태리체
-->
<p><em>안녕하세요! 판다코딩입니다.</em></p>
<!--
(이태리체와 유사하게 출력되는) 시맨틱 태그
-->
<p>2<sup>2</sup> 2<sub>2</sub></p>
<!--
sup: (자주 사용되는 시맨틱 태그) 위에 첨자 만들기
sub: (자주 사용되는 시맨틱 태그) 아래 첨자 만들기
-->
<addr title="HyperText Markup Language">HTML</addr>
<!--
(자주 사용되는 시맨틱 태그) 숨은 메모추가
-->
</p>
</emody>
</html>6. 브라우저에서 경로를 표현하는 방식
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="6.css"> </head> <body> <!-- 1. 절대경로 : 인터넷, url로 접속가능한 경로 2. 상대경로 : (통상적으로) 개발 환경에서 시작되는 경로 . 현재 파일이 위치한 경로 .. 이전 경로 / 상위 경로 / 구분 ./ = 생략 *ex) <br/> = <br> --> <p><a href="https://www.naver.com/"> 네이버 </a></p> <p><a href="./6.test/6.sample.html"> sample </a></p> <p><a href="./6.test/6.panda/6.coding.html"> coding </a></p> <p><a href="./6.main.html"> main </a></p> </body> </html>
- main.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>Document</title> </head> <body> <h1> main입니다! </h1> </body> </html>
./6. test/6.sample.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>Document</title> </head> <body> <h1> test폴더의 sample.html입니다. </h1> <a href="../6.html"> index </a> <!-- .. = 뒤로가기 --> </body> </html>
./6. test/6.panda/6.coding.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>Document</title> </head> <body> <h1> 코딩입니다. </h1> </body> </html>
7. 이미지를 출력하는 img 태그
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="7.css"> </head> <body> <img width="100px" height="100px" src="./7.img/프로필.png" alt="프로필"> <img style="width: 100px; height: 100px;" src="./7.img/프로필.png" alt="프로필"> <img src="https://media.istockphoto.com/id/817514770/ko/%EC%82%AC%EC%A7%84/%ED%95%9C%EA%B5%AD-%EA%B5%AD%EA%B8%B0%EB%8A%94-%ED%91%B8%EB%A5%B8-%ED%95%98%EB%8A%98%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%ED%9D%94%EB%93%A4%EB%A9%B0.jpg?b=1&s=612x612&w=0&k=20&c=0xIlVpStwmMda58gH67d6vIV7OCigrTjNZugGkGs0i8=" alt=""> <!--블록 주석 설정/해제: Shift+Alt+A --> <!-- 상기 명령어는 같다. <img width="100px" height="100px" src="./7.img/프로필.png" alt="프로필"> <img style="width: 100px; height: 100px;" src="./7.img/프로필.png" alt="프로필"> --> </body> </html>
./7. 이미지를 출력하는 img 태그.img/프로필.png
8. 동영상, 오디오, 멀티미디어 태그
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="8.css"> </head> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/ik0Pp-ZY1UY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <!-- 비디오태그 예시: https://www.w3schools.com/html/html5_video.asp 오디오태그 예시: https://www.w3schools.com/html/html5_audio.asp 컨텐츠가 없을 때 아래와 같이 표햔할 수 있다. <allowfullscreen></iframe> = <allowfullscreen /> iframe 태그는 새로운 해당 태그 안에 새로운 html을 넣는 방식입니다. iframe 태그로 작성된 코드를 실행 후, 크롬에서 출력한 값을 개발자 도구(Ctrl + Shift + I)로 확인할 경우 '#document' 토글목록을 확인할 수 있습니다. --> </body> </html>
./8. 동영상, 오디오, 멀티미디어 태그.img/프로필.png
9. 공간을 나누는 div 태그와 span 태그
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="9.css">
<style>
.red{
color: red;
}
.blue{
color: blue;
font-size 16px;
font-weight: bold;
}
.blue2{
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<!--
1.Div : Division / 가상의 경계, 가상의 레이아웃
*모든 웹페이지에 레이아웃은 div 태그로 되어 있다.
2.Span :
-->
<div class="red">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
</div>
<div class="blue">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem necessitatibus maiores aspernatur expedita suscipit perferendis quasi optio vitae. Hic obcaecati eveniet voluptate tempore recusandae et laboriosam accusamus molestiae inventore ad?</p>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<div>Aliquam laudantium ea natus earum quaerat,</div>
at, velit dolorem optio dignissimos neque sed eum repellendus? Voluptates corrupti dolor rem ullam quidem quis!
</p>
<p>
안녕하세요! <span class="blue">판다코딩</span>입니다.
</p>
</body>
</html>10. 특별한 의미를 가지고 있는 Semantic Tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 시멘틱태그 설명: https://www.w3schools.com/html/html5_semantic_elements.asp -->
</body>
</html>참조
[Psalm 25:3] Blockchain Developer