Learn & Record
HTML (설정, 주석, 제목태그, 단락태그, 링크태그, 줄바꿈태그, 수평줄 태그, inline 태그, 목록 태그, 인용태그, 연습문제, 이미지태그, 하이퍼링크태그) 본문
Dev/HTML CSS JS
HTML (설정, 주석, 제목태그, 단락태그, 링크태그, 줄바꿈태그, 수평줄 태그, inline 태그, 목록 태그, 인용태그, 연습문제, 이미지태그, 하이퍼링크태그)
Walker_ 2024. 3. 18. 17:351. 설정
- lang = 'en' > 'ko' 변경
- 찾아가서 변경
2. 주석
<!-- 주석 -->
<!-- 주석문은 실행 결과에 아무런 영향을 주지 않으며, 코드 내에서 수정 및 보완을 위해 표시하며 사용-->
<!-- 프로그래밍의 주석과 다르게 사용자가 주석을 볼 수 있으니, 민감한 내용은 적으면 안됨. -->
<!-- 주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 가독성이 좋음. -->
<!-- 공식적으로 주석의 종료는 없음. 하지만 종료 역할을 하는 태그가 있어야 코드의 시작과 끝을 알 수 있음
관습적으로 주석의 종료는 주석의 시작과 동일한 내용이고, 옆에 "//"을 붙여줌-->
<!-- // 주석 -->
3. 제목 태그
- h1 ~ h6 : 숫자가 뒤로 갈수록 글자 사이즈가 줄어듬, 타이틀에 사용, 볼드체
<h1>Header-1</h1>
<h2>Header-2</h2>
<h3>Header-3</h3>
<h4>Header-4</h4>
<h5>Header-5</h5>
<h6>Header-6</h6>
<!-- 다른 태그로도 제목 표현이 가능하나 span 태그는 단순한 텍스트가 들어가는 용도.
html5에서는 표현 뿐만 아니라 '문서 구조'도 중요하니 제목이면 h 태그를 사용 할 것 -->
<span style="font-weight:bold; font-size:32px;">Header-1 by span</span>
4. 단락 태그
- p: 단락, 본문에서 단락을 구분하거나 나타낼 때 주로 글자를 담아서 표현
- p 태그는 레이아웃에 사용하지 않고 본문글의 내용의 단락을 나눌 때 사용할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>단락 태그</title>
</head>
<body>
<h1>Header-1</h1>
<p>
Lorem
Ipsum is simply dummy text of the printing and typesetting industry. <br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
<p>
Lorem
Ipsum is simply dummy text of the printing and typesetting industry. <br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
</body>
</html>
5. 줄 바꿈 태그
- br : 본문 작성시 줄을 바꿔야 하는 경우에 사용
- 닫는 태그가 없다. <br>, <br/> 모두 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>줄 바꿈 태그</title>
</head>
<body>
<h1>Header-1</h1>
<p>
Lorem Ipsum is simply dummy text of<br><br><br><br><br><br><br><br><br><br><br> the printing and typesetting industry.
typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text<br/>Lorem Ipsum is simply dummy text
</p>
</body>
</html>
6. 수평줄 태그
- hr : 수평줄을 나타내는 태그, 단락의 구분 주제가 바뀔 때 / 입체적 닫는 태그가 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>수평줄 태그</title>
</head>
<body>
<h1>Header-1</h1>
<hr>
<p>
Lorem Ipsum is simply dummy text of <br>the printing and typesetting industry.
</p>
<hr>
<p>
Lorem Ipsum is simply dummy text of the <br>printing and typesetting industry.
</p>
</body>
</html>
7. inline 요소의 텍스트
- 글자와 같은 성격을 가진 글자 태그(inline) : 옆으로 쌓이는 태그
- 거의 모든 인라인 속성의 태그는 블럭 속성 안에서 사용 된다
<p>
<!--strong : 경고, 주의사항과 같이 중요한 내용을 강조할 때 -->
<strong>굵게</strong>
<!-- b : 글자를 굴게 표현하고 싶을 때 : 내용이 아니라 표현만 할 때 -->
<b>굵게</b><br>
</p>
<p>
<!-- 주위 텍스트에 비해서 강조된 부분이나 저자의 생각 강조 -->
<em>기울이기</em>
<!-- i: 이텔릭체를 표현하고 싶을 때 : 내용이 아니라 표현만 할 때 -->
<i>기울이기</i> <br>
</p>
<p>
<!-- span : 글장를 꾸밀 때 사용. 스타일의 선택자와 함께 주로 사용
스타일을 안 주면 아무런 효과가 없다. 인라인 태그 중에 사용 빈도가 가장 높다. -->
<span>글자내용</span><br>
<span>글자</span>내용<br>
<span style="font-weight: bold;">글자</span>내용<br>
</p>
<!-- 이 위쪽은 무조건 외우고, 아래는 빈도가 떨어지니 이런 태그가 있었지 정도만 되면 되는데...
외우면 더 좋긴 하다 -->
<p>
<!-- q : 인용할 문구를 표현, 따옴표가 나타남.
글자와 같이 나열되어지며 짧은 부분의 인용을 표현할 때 사용 -->
<q>장마</q>기간입니다.<br>
<!-- mark : 형광펜 효과. 중요한 부분을 강조할 때 사용. 노랑 배경색이 나타남 -->
<mark>형광펜 표시</mark> <br>
</p>
<p>
<!-- del : 문서에서 삭제된 텍스트나 지워야 할 부분 강조. 취소선, 중간 줄 -->
<del>지울 것</del><br>
<!-- ins : 밑줄. 문서에 나타난 텍스트에 강조하거나 밑줄 표현 시 사용 -->
<ins>밑줄 표현</ins><br>
</p>
<p>
<!-- 동아시아 글자 표현, 주석 : 동아시아 국가들의 주석(발음) 내용을 표기 하기 위해 사용 -->
<ruby>
漢子<rt>한자</rt>
</ruby>
<br>
글자의 위로 붙는 <sup>위첨자</sup><br>
글자의 아래로 붙는 <sub>아래첨자</sub>
</p>
8. 목록 태그
- 순서가 없는 목록 태그 예문
- ul : unordered list 의 약자
- li : list item 의 약자
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>울면</li>
<li>야끼우동</li>
</ul>
- al : ordered list의 약자
<ol type="A">
<li>짜장면</li>
<li>짬뽕</li>
<li>울면</li>
<li>야끼우동</li>
</ol>
<ol type="3">
<li>짜장면</li>
<li>짬뽕</li>
<li>울면</li>
<li>야끼우동</li>
</ol>
- 정의 목록 태그
- dl : definition list : 정의 목록
- dt : definition term : 정의 용어 : 용어의 제목
- dd : definition description : 정의 설명 : 용어의 설명
<!-- 정의 목록 전체 선언 -->
<dl>
<!-- 정의될 항목 -->
<dt>강남지점</dt>
<!-- 항목에 대한 설명 -->
<dd>주소 : 서울특별시 서초구 서초대로 77길 3 아리타워 5층</dd>
<dd>전화:02)530-0555</dd>
</dl>
<dl>
<!-- 정의될 항목 -->
<dt>신촌지점</dt>
<!-- 항목에 대한 설명 -->
<dd>주소 : 서울특별시 서대문구 신촌로 183 유안빌딩 5층</dd>
<dd>전화:02)312-9660</dd>
</dl>
9. pre, blockquote 태그
<pre>
<h1>Imagine</h1>
</pre>
<!-- blockquote : 태그는 긴 인용문을 나타낼 때 사용하며, 들여쓰기를 한 것으로 표현 -->
<blockquote>
-존 레논 - <br>
그를 비틀스의 리더로 작가, 그래픽 아티스트, 솔로 가수로도 활동했다.
</blockquote>
10. 연습문제
1) 제목 태그 4번으로 지정
Web Publishing Expert
2) 제목 태그 1번으로 지정
웹 퍼블리싱 전문가
3) 문단 태그
웹 표준의 개념과 원리를 이해하고
웹 표준을 준수한 많은 사이트를 벤치마킹한
다양하고 유용한 실무 스킬과 팁을 활용한 웹사이트를 제작합니다.
4) 단락 들여쓰기 태그
웹퍼블리셔
:기존의 코더라고 불리던 HTML제작자
5) 문단 태그, 취소줄, 밑줄
웹학과 누적수강생30,00039,000
6) 제목 태그 2번으로 지정
교육과정안내
7) 순서가 없는 항목 태그로 지정
* 일러스트<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Practice</title>
</head>
<body>
<h4>Web Publishing Expert</h4>
<h1>웹 퍼블리싱 전문가</h1>
<hr>
<p>웹 표준의 개념과 원리를 이해하고<br>
웹 표준을 준수한 많은 사이트를 벤치마킹한<br>
다양하고 유용한 실무 스킬과 팁을 활용한 웹사이트를 제작합니다.<br></p>
<blockquote>
<strong>웹퍼블리셔</strong><br>
<i>:기존의 코더라도 불리던 HTML제작자</i><br>
</blockquote>
<p>
웹학과 누적수강생<del>30,000</del><ins>39,000</ins>
</p>
<h2>교육과정안내</h2>
<ul>
<li>일러스트</li>
<li>포토샵</li>
<li>웹디자인전문가</li>
<li>스마트폰 웹디자인</li>
<li>웹기획UXUI</li>
<li>제이쿼리</li>
<li>포트폴리오</li>
</ul>
</body>
</html>
11. 이미지 태그
- 이미지를 나타내주는 태그. 단독 태그.
- 글자와 같이 나열되는 성격(inline 속성)
<img src="이미지 파일의 경로 또는 url" alt="대체문자">
- alt : 주석문. 이미지가 안 보일 때를 대비한 대체문자, html5기본 규칙!
- 이미지의 확장자 (대표)
- jpg : 가장 대표적인 이미지 표현방식, 이미지의 색상을 가장 잘 표현할 수 있는 확장자!
- gif : 투명한 배경이 가능한, 색상이 256개의 표현만 가능~화질이 떨어져 보임 / 움짤, 움직이는 이미지
- png : 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있는 확장자!
- 이미지 파일의 경로 : 작성하는 문서(html)의 기점으로부터.
<body>
<!-- 경로에 맞게 불러온 이미지-->
<img src="./img/camera01.png" alt="카메라1"><br>
<!-- 경로에 맞지 않게 불러온 이미지-->
<img src="../img/camera02.png" alt="카메라2"><br>
<!-- 넓이 옵션을 적용한 이미지 -->
<img src="img/camera03.png" alt="카메라3" width="124"><br>
</body>
<!-- 이미지태그를 url로 연결하는 방법-->
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[30]_20210415144252425.jpg" width="300">
<!-- figure : 이미지, 사진, 삽화 같은 콘텐츠를 넣을 때 사용 -->
<figure>
<img src="img/camera01.png" alt="카메라1">
<!-- figure 요소에 캡션을 넣을 때 사용하는 태그로 figure안에서 사용, 제일 처음이나 마지막에 배치! -->
<figcaption>카메라를 올바르게 촬영하는 방법</figcaption>
</figure>
12. 하이퍼 텍스트 링크
- a 태그 : 웹페이지의 연결, url 연결 시 사용
- 1) 다른 페이지의 전환 (메뉴표현) 2) 글자의 길이 나열되는 성격! (inline 속성)
- 링크연결 시 기본 스타일 (글자색, 밑줄, 손모양의 커서) / 브라우저내에서 바로 전환
- href = h + ref / h : hypertext, ref : reference
<!-- 링크 target 값의 종류 -->
<p>
<!-- target 값을 지정하지 않으면 _self와 같음-->
<a href="http://www.naver.com">네이버(None)</a>
</p>
<p>
<!-- 현재 페이지에서 바로 페이지로 이동-->
<a href="http://www.daum.net" target="_self">다음(_self)</a>
</p>
<p>
<!-- 현재 페이지는 그대로 두고 새로운 브라우저 창이나 탭을 새로 생성 -->
<a href="http://www.starbucks.co.kr/" target="_blank">스타벅스(_blank)</a>
</p>
<!-- 다양한 링크의 형태 -->
<p>
<!-- 같은 도메인이라도 http://와 https:// 의 홈페이지 주소가 다른 경우도 있음. 주의할 것 -->
<a href="http://www.naver.com">네이버</a>
</p>
<p>
<!-- 같은 폴더 내의 html 페이지로의 이동 -->
<a href="./08_practice.html">연습문제 페이지로 이동</a>
</p>
<p>
<!-- 아웃룩 메일 계정으로 연결할 때 -->
<a href="mailto:webmaster@koreaedugroup.com">관리자</a>
</p>
<p>
<!-- 빈 링크 또는 임시 링크로 표시 -->
<a href="#">임시링크</a>
</p>
<!-- 빈 링크의 경우 문서의 탑으로 이동하는 성격이 있음 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#">임시링크</a><br>
<a href="#none">임시링크 2</a>
</p>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
'Dev > HTML CSS JS' 카테고리의 다른 글
'Dev/HTML CSS JS' Related Articles
more
