Sun의 정리정돈

[HTML] HTML의 기본 요소 본문

FrontEnd/HTML & CSS

[HTML] HTML의 기본 요소

Sunday31 2022. 11. 3. 18:20

개념 배운 순서대로 간략히 정리

1. HTML 문서의 구조와 내용

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
	<title></title>
	</head>
	<body>
	<h1></h1>
	</body>
</html>
HTML 문서 태그 형식  
<!DOCTYPE html> html 유형 선언
<html></html> html 문서 묶기
<meta charset="utf-8"> 페이지를 utf-8로 읽어라
<head></head> 머릿말 묶기
<body></body> 본문 묶기
<title></title> 페이지 상단 탭 제목
<h1></h1>…<h6></h6> Headline, h1은 한 번만 사용할 수 있음
<center></center> 컨텐츠를 중앙에 위치시킴
<strong></strong> 글씨 bold 처리1
<b></b> 글씨 bold 처리2
<em></em> 글씨 italic 처리1
<i></i> 글씨 italic 처리2
<u></u> 글씨 underline 처리
<br> 문장 enter 처리
<p></p> 문장 enter, 한줄 띄움 처리, 단락 묶기

 

2. 이미지, 링크문자열 태그 넣기

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
	<title></title>
	</head>
	<body>
	<h3>이미지 넣기</h3>
        <figure>
        	<img src="./images/apple.jpg" width="300" height="250" border="0">
            <figcaption>이미지에 대한 설명글</figcaption>
        </figure>
        
        <h3>링크 넣기</h3>
        	<a href="https://www.naver.com">네이버</a>
            <a href="mailto:naver123@naver.com">여기로 메일 클릭</a>
	</body>
</html>
img, link 넣기
<figure></figure> 이미지 묶기
<figcaption></figcaption> 이미지 설명 넣기, 캡션
<img src="./파일경로/파일명.jpg" width=" " height=" "> 이미지 넣기
<a href="사이트링크"></a> 링크 걸기
<a href="mailto:메일주소"></a> 메일 주소 걸기
&nbsp; 시각적으로 강제로 공백을 줌(=1공백)
<h1>→ &lt;h1&gt; 태그 아닌 일반 문자열로 인식하게 하기

 

3. 목록 태그 넣기

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
	<title></title>
	</head>
	<body>
	<h1>목록</h1>
            <ul>
            	<li></li>
                <li></li>
            </ul>
            
            <ol type="a">
            	<li></li>
                <li></li>
            <ol>
	</body>
</html>
목록 만들기
<ul></ul> unorder List,
type="disk"(디폴트:기본적으로 설정된 것)
circle(원), square(네모)
<ol></ol> order List,
type="1"(디폴트: 숫자)
i(로마자 기호), A(대문자표시), a(소문자표시)
<li></li> <ol>, <ul> 사이에 넣는 list
list-style:none; 리스트 항목의 마커를 없앰
   
   

 

4. Semantic

시맨틱한 작성은 개발자 입장에서 가독성이 높아지고 유지보수가 쉬워진다.
콘텐츠의 계층 구조를 더 쉽게 파악이 가능하고 검색엔진은 계층 구조에 따라 키워드의 중요도를 파악하기 때문에 크롤러에 더 구체화한 정보를 제공할 수 있게 된다.

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
	<title></title>
	</head>
	<body>
        <header>
        <h1>머릿말</h1>
        </header>
        
        <nav>
        	<li><a href="#">목차1</a></li>
            <li><a href="#">목차1</a></li>
        </nav>
        
        <article>
            <img src="./img.png">
            <p>[속보] 00구 00동 진도 4.0 지진 발생</p>
            <footer>30분 전 작성...</footer>
		</article>
        <article>
            <img src="./img.png">
            <p>올해 한국 과학자가 노벨상?</p>
            <footer>1시간 전 작성...</footer>
        </article>

        <h1>결혼식 식순</h1>
        <section>
            <h2>식순</h2>
            <p>개식사</p>
            <p>주례 소개</p>
            <p>신랑, 신부 입장</p>
        </section>
        <section>
            <h2>피로연</h2>
            <p>하객 인사</p>
            <p>케이크 커팅</p>
            <p>...</p>
        </section>
        
	</body>
</html>
Semantic 태그
<header></header> 사이트 소개, 상단의 로고와 메뉴를 포함
<nav></nav> 사이트 좌측 등의 메뉴, 다른 페이지 또는 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시킬 때 사
<article></article> 콘텐츠 블록 영역, 단일 게시물을 나타낼 때 사용, 독립적으로 배포하거나 재사용함(크게 묶음)
<section></section> <article>과 유사하나 페이지의 단일 부분을 그룹화 할때 사용. 예로 각 기사의 헤드라인들이나 피드등을 묶음
스타일링을 위해서 묶을 때는 <div>를 사
<aside></aside> 기본 콘텐츠와 직접 관련이 없지만 간접적으로 추가 정보를 포함하는 요소. 분리된 콘텐츠를 나타낼 때 사용
<footer></footer> 하단의 정보열을 묶을 때 사용

 

'FrontEnd > HTML & CSS' 카테고리의 다른 글

미니 프로젝트_사이트 만들기  (0) 2022.11.11
[CSS] 개요, 선택자, 속성  (0) 2022.11.07
[HTML] HTML 속성 그 외  (0) 2022.11.04
'FrontEnd/HTML & CSS' Related Articles more
Comments