JunO3O
HTML 기초
HTML 기초
2023. 3. 21. 03:10ㆍ비공개
HTML(Hypertext Markup Language) 개요
: HTML은 콘텐츠의 구조를 규정하는 것이며, 페이지에 버튼, 양식, 링크 등 무엇이 있는지 나타냅니다.
: HTML은 웹 페이지라는 문서에 마크업을 하기 위한 마크업 언어입니다.
: HTML은 완전한 프로그래밍 언어가 아닙니다. => 복잡한 논리 같은 것을 전혀 필요로 하지 않기 때문!
: 마크업이란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지를 말하며, 굵은 글씨로 강조하거나 이탤릭체로 글씨를 기울이는 역할을 합니다.
: 마크업을 하기 위해서는 HTML 요소가 필요합니다.
<p> 태그와 태그 사이에 내용(Content)를 입력합니다. </p>
: 마크업을 위해 HTML 요소인 <태그>를 사용하여 아래와 같이 만들 수 있습니다.
<h1>네잎 클로버</h1>
<hr/>
<b>네잎 클로버(영어: Four-leaf clover)</b>는 네 잎을 가지는 토끼풀속의 기형이다.
<br/>
예부터 전해지는 미신에서는 행운을 가져온다고 한다.[1] 하지만 이 미신의 역사나
과학적 근거는 불분명하다. 콩과의 여러해살이풀인 토끼풀(Trifolium repens)의
돌연변이가 아닌, 일시적인 기형 현상으로 4잎이 된다.[2]
MDN(모질라 개발자 네트워크)
: HTML, CSS, JavaScript에 관한 기본적인 자료 뿐만 아니라 웹 기술에 대한 자료가 아주 많은 사이트입니다.
: https://developer.mozilla.org/ko/ 으로 접속합니다.
단락 요소 <p>
: <p> 태그를 이용하면 단락으로 구분할 수 있습니다.
: 글 뿐만 아니라 이미지, input 태그, label 태그 모두 단락으로 구분 가능합니다.
<h1>네잎 클로버</h1>
<hr/>
<b>네잎 클로버(영어: Four-leaf clover)</b>는 네 잎을 가지는 토끼풀속의 기형이다.
<br/>
<p>
예부터 전해지는 미신에서는 행운을 가져온다고 한다.[1] 하지만 이 미신의 역사나
과학적 근거는 불분명하다. 콩과의 여러해살이풀인 토끼풀(Trifolium repens)의
돌연변이가 아닌, 일시적인 기형 현상으로 4잎이 된다.[2]
</p>
제목 요소 <h1>
: <h1>부터 <h6>까지의 태그는 제목 요소를 나타낼 때 사용합니다.
: <h1>이 가장 큰 제목이며 <h6>으로 갈 수록 작은 제목입니다.
: <h1>은 최상위 제목을 의미하는 것이기 때문에 페이지당 하나만 사용하자는 약속이 있습니다.
=> why? 한 페이지에 최상위 주제가 두 가지일 수 없기 때문에 최상단에 딱 하나만 있어야 합니다.
<h1>네잎 클로버</h1>
<hr>
<h2>네잎 클로버</h2>
<hr>
<b>네잎 클로버(영어: Four-leaf clover)</b>는 네 잎을 가지는 토끼풀속의 기형이다. 예부터 전해지는 미신에서는 행운을 가져온다고 한다.[1] 하지만 이 미신의 역사나 과학적 근거는 불분명하다.
콩과의 여러해살이풀인 토끼풀(Trifolium repens)의 돌연변이가 아닌, 일시적인 기형 현상으로 4잎이 된다.[2]
<h3>발생</h3>
<hr>
대략 10,000번에 한 번 꼴로 네잎 클로버가 핀다고 알려져 있다.[3](0.01%) 그러나 실제로 5백만 개의 클로버를 조사한 결과 네잎 클로버가 핀 것은 5000번에 한 번 꼴로 알려진 확률의 2배이다.[4](0.02%) 또한 네잎클로버는 옮겨심는다고 그곳에 또 다른 네잎클로버는 나지 않는다.
<p>
<h3>각주</h3>
<hr>
Harry Oliver (2010). 《Black Cats & Four-Leaf Clovers: The Origins of Old Wives' Tales and Superstitions in Our Everyday Lives》 reprint판. Penguin. ISBN 9781101442814.
“토끼풀 특징, 네잎클로버는 돌연변이가 아니라..”. 《일간스포츠》. 2015년 2월 23일. 2018년 6월 6일에 확인함.
Bradley, David (2008년 10월 31일). “Five-leaf Clovers”. 《ScienceBase.com》.
"[1] Archived 2018년 6월 24일 - 웨이백 머신" How rare are four-leaf clovers really?
</p>
Chrome Inspector(개발자 도구)
: 크롬에는 디버그를 위한 도구나 HTML, CSS, JavaScript 작업을 도와주는 도구가 있습니다.
: 크롬 브라우저에서 아무 곳에 마우스를 가져간 후 우클릭을 하면 '검사' 항목이 있습니다.
HTML 상용구
: HTML 문서에 들어가야 하는 표준화된 마크업 언어입니다.
<!DOCTYPE html>
<html>
<head>
<title> 페이지의 제목을 적는 곳입니다. </title>
</head>
<body>
페이지의 내용을 적는 곳입니다.
</body>
</html>: <!DOCTYPE html> 은 HTML5를 사용하고 있다는 표식입니다.
: <html> 은 문서의 최상위 요소를 뜻합니다.
: <head> 는 화면 상에 보이지 않는 웹 페이지와 스크립트에 대한 모든 메타데이터 정보를 담고 있습니다. ex) CSS, JS, 폰트, 아이콘 등
: <title> 은 브라우저의 제목을 정합니다.
: <body> 는 문서의 모든 내용을 담고 있는 요소입니다.
=> HTML 상용구는 ! 를 입력하고 Tab 을 눌러 자동 완성할 수 있습니다.
<!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>Four_Leaf_Clover</title>
</head>
<body>
<h1>네잎 클로버</h1>
<hr>
<h2>네잎 클로버</h2>
<hr>
<b>네잎 클로버(영어: Four-leaf clover)</b>는 네 잎을 가지는 토끼풀속의 기형이다. 예부터 전해지는 미신에서는 행운을 가져온다고 한다.[1] 하지만 이 미신의 역사나 과학적 근거는 불분명하다.
콩과의 여러해살이풀인 토끼풀(Trifolium repens)의 돌연변이가 아닌, 일시적인 기형 현상으로 4잎이 된다.[2]
<h3>발생</h3>
<hr>
대략 10,000번에 한 번 꼴로 네잎 클로버가 핀다고 알려져 있다.[3](0.01%) 그러나 실제로 5백만 개의 클로버를 조사한 결과 네잎 클로버가 핀 것은 5000번에 한 번 꼴로 알려진 확률의 2배이다.[4](0.02%) 또한 네잎클로버는 옮겨심는다고 그곳에 또 다른 네잎클로버는 나지 않는다.
<p>
<h3>각주</h3>
<hr>
Harry Oliver (2010). 《Black Cats & Four-Leaf Clovers: The Origins of Old Wives' Tales and Superstitions in Our Everyday Lives》 reprint판. Penguin. ISBN 9781101442814.
“토끼풀 특징, 네잎클로버는 돌연변이가 아니라..”. 《일간스포츠》. 2015년 2월 23일. 2018년 6월 6일에 확인함.
Bradley, David (2008년 10월 31일). “Five-leaf Clovers”. 《ScienceBase.com》.
"[1] Archived 2018년 6월 24일 - 웨이백 머신" How rare are four-leaf clovers really?</p>
</body>
</html>ㄴ> HTML 상용구에 맞춰 네잎 클로버 페이지를 만들려면 위와 같이 코드를 작성해야 합니다.
목록 요소 <ul>, <ol>, <li>
: <ul> 은 점으로 표시되는 목록, 즉 순서가 없는 목록입니다. --- Unordered List
: <ol>은 숫자로 표시되는 목록, 즉 순서가 있는 목록입니다. --- Ordered 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>강아지</title> </title>
</head>
<body>
<h1>강아지</h1>
<hr>
<p><b>강아지</b>(puppy, 프랑스어: Chiot)는 개의 새끼를 일컫는다.[1] 강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2], 정서적인 변화를 겪기도 한다.[3] 강아지 알레르기가 있으면 강아지를 피하는 것이 좋다.</p>
<h2> 명칭</h2>
<hr>
<p>한국어 ‘강아지’는 ‘개’에 어린 짐승을 뜻하는‘아지'가 붙은 말이다. 경상북도 사투리로는 강생이라고도 한다. 각 언어마다 강아지에 대한 별도의 명칭이 있는데, 영어로는 강아지를 ‘Puppy’(퍼피)라 부르며, 일본어로는 ‘小犬(코이누)’라 하며, 중국어로는 '小狗(샤오거우)' 혹은 幼犬(유추안)이라 한다.</p>
<h2> ul 목록</h2>
<ul> <!-- 순서가 없는 목록 만들기-->
<li>개</li>
<li>강아지풀</li>
<li>사료</li>
<li>반려견</li>
<li>새끼 고양이</li>
<li>말티즈</li>
</ul>
<h2> ol 목록 </h2>
<ol> <!-- 순서가 있는 목록 만들기 -->
<li> 개</li>
<li> 강아지풀</li>
<li> 사료</li>
<li> 반려견</li>
<li> 새끼 고양이</li>
<li> 말티즈</li>
</ol>
</body>
</html>
ㅁ 중첩 요소를 만들 수 있습니다.
: 목록 안에 목록을 만들어 중첩된 목록 요소를 만들 수 있습니다.
<h2> 중첩 요소 만들기</h2> <!-- 중첩 요소 만들기 -->
<ol> <!-- 순서가 있는 목록 만들기 -->
<li> 개
<ul> <!-- 상위 ol 목록 안에 ul 목록 만들기 -->
<li>말티즈</li>
<li>푸들</li>
<li>진돗개</li>
</ul>
</li>
<li> 강아지풀</li>
<li> 사료</li>
<li> 반려견</li>
<li> 새끼 고양이</li>
<li> 말티즈</li>
</ol>
앵커 태그 <a>
: 다른 페이지로 연결되는 하이퍼링크를 만들 때 가장 많이 사용합니다.
: 앵커 태그 <a> 를 사용할 떄는 하이퍼링크가 연결되는 곳인 목적지를 함께 적어줘야 합니다.
: a 와 함께 href 속성을 사용하여 목적지를 지정합니다.
<a href="목적지 링크"> 표시할 내용 </a>
ex) <a href="https://ko.wikipedia.org/wiki/%EA%B0%95%EC%95%84%EC%A7%80"> 위키피디아 강아지 </a>
ㅁ 네이버나 구글 등 웹 페이지의 링크 뿐만 아니라 파일로도 링크를 걸 수 있습니다.
<a href="목적지 문서 경로"> 링크 내용 </a>
ex) <a href="HTML_Four_Leaf_Clover.html"> 네잎클로버 파일</a>
이미지 <img>
: 이미지 태그는 img 라는 태그만 있고 사이에 아무 콘텐츠가 없으며 닫기 태그가 없습니다.
: HTML 문서와 Img 파일이 같은 폴더 내에 존재하는 경우 경로를 적어줄 필요 없이 이미지 파일명만 적어주면 되지만 다른 폴더에 있는 경우 폴더의 경로도 함께 적어줘야 합니다.
<img src="이미지 파일 경로">
ex) <img src="/2022/Img/puppy.jpg">
<!-- 이미지의 크기를 지정할 수 있습니다. -->
<img src="이미지 파일 경로" width="너비 값" height="높이 값">
ex) <img src="/2022/Img/puppy.jpg" width="100px" height="100px">
ㅁ 웹 페이지에 있는 이미지의 URL을 복사하여 사용할 수도 있습니다.
<img src="이미지 주소 경로">
ex) <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/280px-Golde33443.jpg">
ㅁ alt 속성
: alt 속성은 이미지를 불러오지 못할 경우 대체 텍스트를 출력해줍니다.
<img src="이미지 파일 경로" alt="경로가 잘못되었을 때 출력할 문구">
ex) <img src="puppy.jpg" alt="강아지 사진">
주석
: 주석은 브라우저에서는 보이지 않지만 HTML, CSS, JS 등의 문서를 작성할 때 코드에 대한 설명이나 구분을 위해 작성합니다.
: HTML 에서는 <!-- 주석 내용 --> 형식을 사용하고, CSS, JS 에서는 /* 주석 내용 */ 형식을 사용합니다.
<!-- 주석 처리할 내용 -->
ex) <!-- 강아지 소개 부분 -->
<h1> 강아지 </h1>
<h2> 강아지 종류 </h2><!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>
<h2>
코드에서는 주석 내용이 보이지만 웹 브라우저에서는 주석 내용이 보이지
않습니다.
</h2>
</body>
</html>
'비공개' 카테고리의 다른 글
| CSS 선택자 (1) | 2023.03.21 |
|---|---|
| CSS : 기초 (1) | 2023.03.21 |
| HTML : 폼, 테이블 (0) | 2023.03.21 |
| HTML : 시맨틱(Semantics) (0) | 2023.03.21 |
| 웹 개발 (1) | 2023.03.21 |