Chap1 HTML
HTML
HTML(Hyper Text Markup Language)
<!--주석 주석 ~~~-->
<!--
여러줄 주석도 가능
-->
<!-- HTML은 대부분 <!DOCTYPE html>로 시작
HTML 문법을 이용하여 작성된 문서라는 일종의 선언-->
<!DOCTYPE html>
<html>
<!-- 모든 HTML문서의 시작 -->
<head> <!-- 페이지의 속성 및 정보를 설정 -->
<meta charset = "UTF-8"> <!-- 페이지 인코딩을 UTF-8로 설정 -->
<title>html 기초연습!!!</title> <!-- 홈페이지를 들어가면 탭에 있는 이름을 보여주는 것-->
</head>
<body> <!-- 브라우저에 실제로 보여질 내용 -->
HTML 연습<br>
<a>하위하위</a><br>
<a>안농~</a><br>
<button>버튼구동Test</button>
<button>실제로 되는구만~</button>
</body>
</html>
<!-- 브라우저에서 확인하기 위한 단축키 : alt + L + O--><!-- 밑의 내용을 자동완성 해주는 기능 : ! + space -->
<!DOCTYPE html>
<html lang="ko">
<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>네이바</title>
<style>
h1 {
background: red;
width: 300px;
height: 300px;
}
div{
background: blue;
}
p {
background : green;
}
</style>
<!-- css를 통해 블록마다 색을 지정
HTML이 블록구조로 되어 있다는 것을 확인하기 위해 사용 -->
<!-- 박스의 크기(width, height) 조정 가능 -->
</head>
<body>
<h1>HTML공부 지금은 블록요소를 확인 중 </h1>
<div>블록 요소의 성질</div> <!-- div : 공간을 표현 -->
<p>블록 요소는 수직으로 배치</p> <!-- p : 문단을 표현 -->
<!-- HTML은 블록 구조로 되어 있으며 기본적으로 블록은 가로를 모두 차지하고 수직형태로 구성되어 있음 -->
</body>
</html>HTML Tag
<!DOCTYPE html>
<html lang="ko">
<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>크카오</title>
<style>
h1 {
background: skyblue;
width: 700px;
height: 200px;
}
span{
background: yellowgreen;
width: 700px;
height: 200px;
}
a{
background: lightcoral;
}
</style>
<!-- h1은 블록요소이므로 블록의 크기를 조정할 수 있지만
inline요소인 span과 a는 블록의 크기를 조절할 수 없음 -->
</head>
<body>
<h1>인라인 요소</h1>
<span>인라인 요소는 수평으로 배치 </span>
<a href = "#">인라인 요소 링크</a>
<!-- span과 a는 블록구조의 div와 p와 다르게 수직이 아니라 수평으로 배치되고 있음 -->
<a href = "Chap1_BasicHTML.html">인라인 요소 링크1</a>
<!-- 오! 같은 파일 안에 있는 html문서를 링크로 걸어서 갈 수 있음
네이버나 다른 브라우저도 이렇게 사용하는구나 -->
<!-- a는 링크를 줄 때 사용하는 요소 -->
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>라윈</title>
</head>
<body>
<h1>
문서 제목 1
<!-- 제목이라는 이름으로 h로 시작하며 h1~6까지 존재 -->
</h1>
<h2>
문서 제목 2
</h2>
<h3>
문서 제목 3
</h3>
<h4>
문서 제목 4
</h4>
<h5>
문서 제목 5
</h5>
<h6>
문서 제목 6
</h6>
<!-- h태그는 숫자가 큰게 밖에 있어야하고 작은게 안쪽으로 -->
<hr>
<!-- 블록 줄개행과 가로로 선을 그어주는 태그 -->
<h1> 자바 웹 개발자</h1>
<h2> 소개</h2>
<p>제 이름은 ~~~입니다.</p>
<h2>주요 학습 과목</h2>
<h3>1. HTML</h3>
<p>
HTML은 웹 브라우저의 구조를 담당
</p>
<h3>2. CSS</h3>
<p>
CSS는 어쩌고 저쩌고 그냥 흘러가듯이 ~~~~~
</p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>쿠팽</title>
</head>
<body>
<!-- header는 홈페이지의 머리부분을 표시해주는 구조 표현 태그
페이지를 이동해도 변하지 않는 메뉴나 꼭 필요한 정보들이 들어갈 수 있겠네
웹 페이지의 소개 및 메뉴 등의 탐색에 도움을 주는 콘텐츠를 나타냄-->
<header>
<h1>리스트 태그 학습</h1>
</header>
<!-- section은 문서의 일반적인 영역을 나타내며 의미 없는 영역을 표시할 때 주로 사용 -->
<section>
<h2>오늘 장 볼 내용(순서가 없는 리스트)</h2>
<ul>
<li>우유</li>
<li>치즈</li>
<ul>
<li>크림 치즈</li>
<li>모짜렐라 치즈</li>
</ul>
</ul>
</section>
<!-- ul : 순서가 없는 리스트를 표현하는 태그이며 그 안에 li라는 태그가 존재
li안에 또 ul태그를 사용하여 세부적인 리스트를 더 만들 수 있음 -->
<section>
<h2>라면 끓이기</h2>
<ol type = "A">
<li>물 끓이기</li>
<li>면 투하</li>
<li>스프, 계란 등 재료 넣기</li>
<li>그릇에 담기</li>
</ol>
</section>
<!-- ol : 순서가 있는 리스트를 표현하는 태그이며 ol도 li라는 태그가 존재
ol에 type을 넣어 순서를 표현하는 요소를 지정가능 -->
</body>
</html>HTML構造
HTMLタグ構造
<!DOCTYPE html>
<html lang="ko">
<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>봬달의민족</title>
<style>
body {
width: 1300px;
margin: 0 auto;
}
header {
display: flex;
border-bottom: 1px solid gray;
}
header h1 {
font-size: 35px;
font-weight: bold;
margin-top: 20px;
margin-left: 20px;
flex: 1;
}
header nav ul {
flex: 1;
display: flex;
}
header nav ul li {
list-style: none;
margin-right: 5px;
padding: 10px;
}
header nav ul li a {
text-decoration: none;
color: gray;
font-size: 1.1em;
}
header nav ul li a:hover {
color: red;
background: yellow;
}
section {
border: 1px solid lightgray;
margin-top: 40px;
padding: 60px;
overflow: hidden;
}
section h2 {
font-size: 30px;
color: red;
border-bottom: 5px dashed red;
text-align: center;
width: 50%;
margin: 0 auto 30px;
}
section article {
height: 300px;
border: 2px solid blue;
padding: 30px;
text-align: center;
width: 25%;
margin-right: 2%;
float: left;
}
aside {
width: 150px;
height: 800px;
background: green;
position: absolute;
right: 5%;
top: 10%;
}
footer {
border-top: 1px solid gray;
margin-top: 60px;
padding: 20px 10px;
}
footer a {
text-decoration: none;
color: #a1a1a1;
margin-right: 30px;
font-size: 22px;
}
</style>
</head>
<body>
<header>
<h1>로고</h1>
<nav>
<ul>
<li><a href="Chap5_ListTag.html">Chap5</a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">방명록</a></li>
<li><a href="#">로그인</a></li>
</ul>
</nav>
</header>
<!-- section이 3개의 article안에 있음 -->
<section class="board">
<!-- 게시판으로 활용될 영역이라는 의미 -->
<h2>게시물목록</h2>
<article>
<h3>게시물제목1</h3>
<p>
어떤 내용이 있음
</p>
<p>
<ul>
<li>순서 없음 블라블라</li>
<li>순서 없음 블라블라1</li>
<li>순서 없음 블라블라2</li>
</ul>
</p>
</article>
<article>
<h3>게시물제목2</h3>
<p>
어떤 내용이 있음
</p>
<p>
<ol type="A" >
<li>순서 있음 </li>
<li>순서 있음1 </li>
<li>순서 있음2 </li>
</ol>
</p>
</article>
<article>
<h3>게시물제목3</h3>
<p>
어떤 내용이 있음
</p>
<p>
<ol type = "I">
<li>순서 있음</li>
<li>순서 있음1</li>
<li>순서 있음2</li>
</ol>
</p>
</article>
</section>
<aside>
Side Banner
</aside>
<footer>
<address>
<a href="mailto:[email protected]">이메일전송</a>
<a href="tel:+821071346774">전화 걸기</a>
<!-- a 태그를 이용하여 이메일과 전화를 걸 수 있는 기능을 추가할 수 있음 -->
</address>
</footer>
<!-- footer 밑에 링크들을 작성 위 링크는 꼭 footer에만 넣을 수 있는건 아님 -->
</body>
</html> <!DOCTYPE html>
<html lang="ko">
<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>댕근마켓</title>
<style>
body a{
font-size :xx-large;
}
</style>
</head>
<body>
<a href="https://www.naver.com">네이버로 이동</a><br>
<a href="https://github.com/sig6774">깃허브로 이동</a><br>
<!-- a 태그를 이용하여 홈페이지 링크를 만들어서 이동할 수 있음 -->
<a href="https://www.google.com" target="_self">구글로 이동</a><br>
<!-- target에 '_self'를 사용하면 위의 내용과 같이 현재 창에서 링크 페이지로 이동 -->
<a href="https://www.google.com" target="_blank">구글로 이동blank</a><br>
<!-- target에 '_blank'를 사용하면 새로운 창에서 링크 페이지로 이동 -->
<header id="top">
<article>
<h1>하위~</h1>
<p style="height: 2000px;">세로길이 늘리기</p>
</article>
</header>
<a href="#top">맨 위로 이동</a>
<!-- a 태그와 id를 이용하여 현 페이지에서 특정 위치로 이동 가능 -->
<!-- #과 id name을 통해 원하는 id가 있는 위치로 이동 가능 -->
</body>
</html> <!DOCTYPE html>
<html lang="ko">
<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>Highlight</title>
<style>
body p {
font-size: 40px;
color: blueviolet;
}
body p1 {
font-size: 30px;
color: green;
}
body p1 span{
font-size : 35px;
font-weight: bold;
background: firebrick;
font-family: cursive;
}
</style>
</head>
<body>
<p>
<abbr title="Hyper Text Markup Language">HTML</abbr>은 웹 페이지의 구조를 만드는 언어입니다.
<!-- 특정영역 래핑 : 래핑하고 싶은 영역을 드래그한 후 F1을 통해서 Emmet을 클릭하여 원하는 태그 부착 -->
<!-- abbr은 강조하고 싶은 내용에 태깅
title에는 강조에 대한 설명을 작성하면 됨 -->
</p>
<p1>
<ol type="A">
<li><mark>1절 </mark>동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.</li>
<br>
<li>
2절 남산 위에 저 소나무, 철갑을 두른 듯
<em>바람 서리 <em>불변함</em>은 우리 기상일세.</em>
</li>
<br>
<li>
3절 가을 하늘 <strong>공활한테</strong> 높고 구름 없이
<span>밝은 달</span>은 우리 가슴 <b>일편단심일세.</b>
</li>
<!-- span은 아무 의미가 없지만 style을 통해서 글씨크기 및 색상 등의 강조를 표현할 수 있음 -->
</ol>
<!-- <mark>는 강조하고 싶은 내용을 형광펜으로 칠해주는 것과 같이 해줌
<em> 조금 더 강조하고 싶을때 사용하는 것 조금 기울어진 글씨로 바뀜 중첩 가능
<strong> 특정 텍스트를 굵은 글씨체로 강조해주며 엄청 중요한 내용을 담고 있다는 의미
<b> 특정 텍스트를 굵은 글씨체로 강조해주지만 특정 의미가 없음 -->
</p1>
</body>
</html>Multimedia
<!DOCTYPE html>
<html lang="ko">
<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>images</title>
<style>
p{
font-size: 50px;
}
</style>
</head>
<body>
<p>
아기 송아지 이미지당~
</p>
<!-- 절대 경로 -->
<!-- src에 파일 위치를 넣고 alt에는 해당 파일 위치에 없으면 띄울 메시지 -->
<figure>
<img src="/Java_Web/Front_end/HTML/4_MultiMedia/Images/basic.jpg" alt="Sorry, Not Found image files." style="width:200px;">
<figcaption>송아지예요.</figcaption>
</figure>
<!-- 이미지에 대한 설명과 하나의 묶음으로 사용할 수 있는 태그들 -->
<!-- 상대경로 -->
<figure>
<img src="./Images/Moon.jpg" alt="Sorry, Not Found image files." style="width:300px;">
<figcaption>달이예요.</figcaption>
</figure>
<!-- 상대경로를 나타내며 내가 현재 있는 위치에서 찾는 것 -->
<figure>
<img src="../tree.jpg" alt="Sorry, Not Found image files." style="width:200px;">
<figcaption>나무예요.</figcaption>
</figure>
<!-- 현재 내가 있는 위치보다 상위에 있는 것을 찾기 위해서는 ../을 작성 -->
<a href="https://www.naver.com">
<img src="../tree.jpg" alt="Sorry, Not Found image files." style="width:200px;">
</a>
<!-- 이미지 태그가 a 태그안에 있어서 사진에 링크가 걸리게 되며 사진을 클릭하게 되면 네이버로 들어가지는 것을 확인할 수 있음 -->
<!-- 인터넷에 있는 사진의 링크를 가져와서 내가 만든 홈페이지에 링크를 만들어줌
1. 이미지 주소 복사
2. img 태그의 src에 복사한 주소를 넣고 링크를 생성하면 됨 -->
<a href="https://www.google.com">
<img src="https://imgnn.seoul.co.kr/img/upload/2019/09/29/SSI_20190929151730_V.jpg" alt="Whale">
</a>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>쏭쏭~</title>
</head>
<body>
<!-- 오디오를 틀어주는 태그 -->
<audio src="./Music/song.mp3" controls autoplay loop muted></audio>
<!-- autoplay : 자동재생 loop : 반복 muted : 음소거
하지만 크롬이나 엣지에서 막아놨음-->
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>비디오</title>
</head>
<body>
<!-- 비디오 재생 태그 -->
<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls autoplay loop poster = "./Images/basic.jpg"></video>
<!-- poster : 동영상이 실행되기 전까지는 내가 지정한 사진을 표시할 수 있게 해줌 -->
</body>
</html>現在のページの他のホームページで使用可能なタグ
<!DOCTYPE html>
< lang="ko">
<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>iframe</title>
</head>
<body>
<h1>현재 페이지에 남의 웹사이트 들고 오기</h1>
<iframe src="https://www.daum.net" frameborder="1" style="height: 480px; width: 640px;"></iframe>
<!-- iframe을 사용하면 남의 웹사이트를 불러올 수 있음
화면상의 화면이 있으며 안되는 싸이트도 있음-->
<h2>유튜브 따오기</h2>
<iframe width="896" height="504" src="https://www.youtube.com/embed/5ch94AaPZRQ?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></body>
</html>Reference
この問題について(Chap1 HTML), 我々は、より多くの情報をここで見つけました https://velog.io/@sig6774/HTML-Tag1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol