1. Tag 개념
1.1. Tag와 Attribute
1) Tags
tag를 붙여서 웹문서에 들어가는 콘텐츠가 무엇인지 알리게 된다.
- 임의로 이름을 부여할 수도 있지만 그렇게 되면 나만 이해할 수 있다.
- 웹 브라우저가 이해할 수 있게 약속된 태그를 사용해야 한다.
- tag는 매우 방대하기에 전부 암기 할 필요는 없다.
[ 태그 사용시 주의 사항! ]
일반적인 태그 사용법으로
<food> 이런 식으로 태그를 열었다면 반드시
</food> 형태로 닫아줘야 합니다.
- (ex) <food>김치</food>
- (ex) <name>니콜라스</name>
[ Self_closing tag ]
콘텐츠가 없는 태그를 Self_closing tag라고 말한다.
이 태그들의 모든 정보는 속성을 통해 제공된다.
다른 태그와 다르게 </>로 닫는 태그가 없다.
- <img>
- 이것 자체가 닫기 tag가 된다.
- 소스 주소는 인터넷 주소 뿐만 아니라 폴더 및 파일 주소로도 할 수 있다.
- (ex) <img src="소스 주소">
[ 주석 comment ]
html
<!-- comment -->css
/* Comment */2) Attributes
tag에 추가하는 정보들이다.
- <a>
- anchor - link를 떠올리면 된다.
페이지 사이의 하이퍼링크를 생성한다.
다른 웹사이트로 이동하게 하려면 그 사이트의 주소를 추가해줘야 한다. - href
- HTTP reference( hyperlink reference)라 하며 이동할 주소를 적는다.
( anchor 태그에만 추가 가능하다 )
(ex) <a href="http:google.com">
- HTTP reference( hyperlink reference)라 하며 이동할 주소를 적는다.
- target
- 기본값은 "_self"이고, "_blank" 입력 시 새 탭에서 링크가 열린다.
(ex) <a href="http:google.com" target="_blank">
- 기본값은 "_self"이고, "_blank" 입력 시 새 탭에서 링크가 열린다.
- anchor - link를 떠올리면 된다.
1.2. Tag의 고유 이름
태그에는 ID / Class를 붙여 사용할 수 있다.
1) ID
unique identifier ( 고유 식별자 )로 어떤 태그에도 넣을 수 있지만 1개만 사용해야 한다.
- ID는 1개 이상 써도 오류가 나지 않지만 고유성을 유지하는게 의의가 있기 때문에 의도적인 노력을 해야 한다.
- 보통 고유한 1가지를 사용할 때 쓰인다.
- [참고] 네이버의 경우 footer를 ID로 표현하고 있다.
2) Class
- 여러 개의 class를 사용할 수도 있다. ( 사용을 권장하지는 않는다. )
<span class="tomato hello money honey">hello</span>- class명은 유일할 필요가 없다. ( 다른 요소들과 함께 사용할 수 있다. )
<span>hello</span>
<span class="tomato">hello</span>
<span>hello</span>
<span class="tomato">hello</span>
<span>hello</span>
<span class="tomato">hello</span>
<span>hello</span>
3) style ( css )
<style> 태그는 해당 HTML 문서의 스타일 정보를 정의할 때 사용합니다.
CSS 작업을 할 때 사용된다.
id나 class를 선택자(selector)로 지정해서 한번에 적용 시킬 수도 있다.
- #tomato : id="tomato"
- .tomato : class="tomato"
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
[ 개발자 TIP ]
ID와 Class는 여러 사이트의 사용법을 보고 숙지하면 좋다.
( 사이트 마다 기업 마다 사용 방식이나 노하우가 다르다. )
1.3. Tag 관계
<parent 부모태그>
<children 자식태그>
<grandchildren 손주태그></grandchildren /손주태그>
=> mdn에서는 잘 쓰이지 않는 표현이다.
</children /자식태그>
<children 자식태그>
</children /자식태그>
</parent /부모태그>- sibling - 형제자식 : 자식 태그간의 관계를 말하면 sibling이라고 부른다.
- descendant - 자손 : 손자 증손자 등 모두 포함한 것을 말한다. ( 보통 자식보다 자손 태그를 많이 쓴다. )
- Child combinator - 자식 결합자 : header-search > h1 {...}
- Descendant combinator - 자손 결합자 : header-search h1 {...}
2. head / body의 태그
2.1.DOCTYPE / html
1) DOCTYPE
<!DOCTYPE html>
브라우저에게 이 HTML 문서가 어떤 버전의 html 파일인지 가르켜 주는 필수 태그다.
html5 버전이라 알고 싶다면 <!DOCTYPE html>라고 입력하면 된다.
2) html
html lang="주 사용 언어"
웹사이트의 주로 사용하는 언어가 무엇인지 검색엔진에게 알려준다.
만약, 한국어를 사용할 경우 lang="ko"를 입력해 준다.
<!DOCTYPE html>
<html lang="ko">
...2.2. head
웹사이트의 환경을 설정하는 것으로, 외부적으로 보이지 않는 부가적인 정보를 담당한다.
( head 태그에 속해 있는 모든 태그들은 화면 상에 거의 보여지지 않는다. )
1) meta ★
부가적인 정보, 데이터를 관리한다. ( self-closing 태그 )
<meta name = "description" content="사이트 설명" /> - 검색 시 표시되는 사이트 설명이다.
- 검색 엔진은 검색시 title과 meta 정보를 보여준다.
<meta charset = "UTF-8">- 인코딩 방식을 알려주는 태그이다.
웹 브라우저나 컴퓨터가 HTML 파일을 웹 브라우저에 표시될 수 있도록 변환하는 인코딩 작업을 하게 된다.- 한글이나 다른 특수문자 깨짐을 방지한다.
2) title
홈페이지의 title 이름으로 문서의 제목이라고 보면 된다.
( 브라우저 창이나 검색 엔진에서 간접적으로 이름을 사용한다. )
3) link
- icon
- 최상단 홈페이지 미니 아이콘 표시 ( 파비콘 )
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="이미지 주소명" />
- css
- external 방식으로 css 파일을 연결한다.
<link rel="stylesheet" href="./styles.css" />[ link와 a 태그 차이 ]
link : 파일을 함께 연결한다.
a : 페이지 사이의 하이퍼링크를 생성한다.
4) etc
- og / fb / twitter
- 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터로 가지고 갈 수 있도록 설정하는 것
og : 네이버 카카오톡
fb : 페이스북
twitter : 트위터
- i
- 기울임 태그다.
- [참고] html에서 디자인 관련 태그를 사용하는 것에 대한 논쟁이 있다.
- 개인적으로는 유지 보수를 위해 안 쓰는 것이 좋아 보인다.
2.3. body ①
브라우저 상에 보이는 부분으로 사용자가 볼 수 있는 content 부분을 담당하는 태그들이다.
body 영역에 들어가는 태그들이다.
1) 제목 - Heading elements
<h1>...<h6>, <hgroup>
※ <h1> ~ <h6>까지 있다. header no.N 이라는 뜻이다.
2) 목록 - list
(1) 리스트
<ul> <ol> <li>- <ol> : orderded list - 순서가 있는 리스트
- <ul> : unordered list - 순서가 없는 리스트
- <li> : list itme - 리스트 안에 사용할 수 있는 태그
(예시)
<ol>
<li>김치</li>
<li>beer</li>
<li>meat</li>
<li>milk</li>
</ol>
(2) 정의 리스트
<dl> <dt> <dd>- dl ( Definition List, Description List)
- ol, ul과 같은 리스트 태그처럼 dl 태그는 리스트를 묶어주는 역할을 합니다.
- dl 태그는 dt 태그와 dd 태그가 하나의 짝으로 이루어져 있습니다.
- dt (Description Term)
- 정의하고자 하는 용어, 단어를 나타내는 것이다.
- dd (Description-Description)
- dt에 기재된 용어의 뜻. 정의를 나타냅니다.
(예시)
<dl>
<dt>아이언맨</dt>
<dt>토니 스타크</dt>
<dt>Iron Man</dt>
<dd>마블 코믹스의 인기 히어로</dd>
</dl>[참고] MDN에서는 위와 같이 dt 태그나 dd 태그는 여러 개를 사용해도 된다고 규정하고 있다.
3) 문장
<div> <p> <span>
4) 이미지 / 링크
<img> <a>
[ img ( 이미지 ) ]
<img src="이미지경로"/ alt="">- alt - 이미지에 대한 설명을 달아준다.
- src - 이미지가 위치한 디렉토리 등의 경로를 적는다.
2.4. body ②
1) 표
<table>
2) 입력 폼
<fieldset> <legend> <label> <form> <input> 
<section>
<h1>공지사항 검색폼</h1>
<form>
<fieldset>
<legend>검색어 입력필드</legend>
<label>검색분류</label>
<select>
<option value="title">제목</option>
<option value="writer">작성자</option>
</select>
<label>검색어</label>
<input type="text" />
<input type="submit" value="검색" />
</fieldset>
</form>
</section>
[ fieldset / legend ( 범례 ) ]
네이버에서 사용하는 태그로 특이하게 약간의 디자인이 되어 있다.
legend는 범례로 이해하면 편하다.
<fieldset>
<legend>검색</legend>
</fieldset>
[ input ]
- checkbox type - 체크하기 / 해제하기 를 누를 수 있다.
- radio type - name을 그룹화 시켜서 1가지만 클릭하게 만들 수 있다. 양자택일 형태다.
<input/>
<input type="checkbox"/>
<input type="radio" name="group"/>※ self closing tag
스스로 닫는 태그로 제로초는 무조건 닫기 표시를 남기는 것을 권장하고 있다.[참고] 네이버, BBQ, BHC, 우아한형제들, BBC, 쿠팡, 다음 등의 소스 코드를 확인한 결과 닫기 표시를 남기지 않았다.
[ form ]
정보를 제출하기 위한 대화형 컨트롤을 포함한 문서를 나타낸다.
<form>
<input type="file" accept=".pdf, .jpg" />
<label for="Name">Name</label>
<input id="Name" required placeholder="Name" type="text" />
<label for="Password">Name</label>
<input id="Password" required placeholder="Password" minlength="4" type="password"/>
<input type="submit" value="Create Account" />
</form>- required
- 아무것도 없을 시 제출이 안 되게 하는 attribute이다. ( 경고 안내를 준다. )
- ㄴ form을 검증한다.
- label
- label은 input과 함께여야 작동한다.
( for / id의 속성 값이 같게 지정하기 )
- label은 input과 함께여야 작동한다.
~ form 속성 - 2가지 ~
- action : 어떤 페이지로 data를 보낼 건지 지정할 수 있다.
- method :두 가지 방식 중 하나를 쓸 수 있다.
- POST : 백엔드 서버에 정보를 전송하는 방식이다.
- GET
- 보안에 취약하다.
- username과 password를 GET 방식으로 보내면 안된다.
- URL에 포함되어도 상관없는 정보들을 GET 방식으로 보낸다.
<form action="friends.html" method="get" id="login-form">
3) 형태
<button> <textarea>
[ button ]
보통 버튼 태그를 사용시 마우스 모양이 손가락 형태로 바뀌게 끔 따로 코딩한다.
<button> </button>[참고] button 속성 특징
button에서 한 가지라도(예를들어 배경색 등) 바뀌면 지정되어 있던 border 속성을 잃는다.
즉, 디폴트 스타일을 바뀌면 처음부터 다시 스타일 해야한다.
[ textarea ]
긴 글 쓸 때 사용하는 태그다. 크기를 조절 할 수 있다.
<textarea></textarea>
4) 기타 etc
[ iframe ]
HTML 태그로 하나의 웹 페이지 안에 작은 웹 페이지를 넣을 수도 있다.
<iframe src="사이트 주소" frameborder="0" scrolling="no"></iframe>
3. Semantic / Section 태그
3.1. Semantic tag
- none-semantic
- html에서 의미 없는 태그, 기능은 있음. (div, span)
- semantic
- 문서를 보기 만해도 그 의미를 짐작 할 수 있는 것 ( header,main,footer 등 )
- ( document와 content를 명확하게 묘사 할 수 있도록 semantic 방식을 사용하자. )
<div> <span> => <header> <main> <footer>
예전에는 전부 div로 떡칠을 했지만 semantic 태그로 대체되어서 생산성 있는 문서 작업을 할 수 있다.
<header> : 머릿말을 의미하는 태그
<main> : 내용을 의미하는 태그
<footer> : 꼬릿말을 위한 태그
<div> : division(박스라고 생각해도 된다)로 만든다. 2개의 박스는 양옆에 있을 수 없기 때문에 한칸 띄우는 것 처럼 보인다.
<span> : 짧은 텍스트를 의미하는 태그
<p> : 문단 텍스트(paragraph)
3.2. Section tag
<section> 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
<section> 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.
heading 태그를 나누어 초기화 시켜주기 위해 사용된다.
즉, section 태그를 사용함으로써 section 태그를 기준으로 heading태그의 넘버링이 부여되는 방식으로 사용된다.
<h1>...<h6><section>
<h1>HTML</h1>
<p>HTML(HyperText Markup Language)은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의
웹 페이지를 위한 마크업 언어이다.</p>
</section>
<section>
<h1>HTML의 역사</h1>
<p>최초의 HTML은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.</p>
</section>
[ 의미가 살아있는 section 섹션 태그 ]
- nav : navigation은 ul안에 많은 li들로 구성되는데, 구글도 navigation을 찾아서 ul의 li 안에 있는 정보를 가져오게 끔 설정되어 있다.
<article> <nav> <aside>
<nav> : 링크로만 이루어져 있는 섹션
<article> : 아티클이 담겨 있는 섹션 ( 자세한 내용을 나타낸다. )
<aside> : 그 외의 섹션
3.3. 태그 사용 예시문
(예시1)
<section>
<h1>공지사항목록</h1>
<table border="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td>
<a href="">
자바 백엔드 개발자들을 위한 새로운 강의를 녹음 중에 있습니다.
</a>
</td>
<td>newlec</td>
<td>2019-02-18</td>
<td>169</td>
</tr>
<tr>
<td>2</td>
<a href="">
<td>유튜브를 위한 영상편집</td>
</a>
<td>newlec</td>
<td>2019-02-18</td>
<td>432</td>
</tr>
<tr>
<td>1</td>
<a href="">
<td>앞으로 모든 강의를 무료로 새로 시작합니다.</td>
</a>
<td>newlec</td>
<td>2018-11-18</td>
<td>695</td>
</tr>
</table>
</section>
(예시2)
<section>
.....
<section>
<h1>페이지 정보</h1>
<div>1 / 1 page</div>
</section>
<nav>
<h1>페이지</h1>
<div>
<div>이전</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
</div>
</nav>
</section>
(예시3)
<footer>
<section>
<h1>회사정보</h1>
<section>
<h1>소유권자정보</h1>
<dl>
<dt>주소:</dt>
<dd>서울 특별시 마포구 인우빌딩 266호</dd>
<dt>관리자 메일:</dt>
<dd>admin@newlecture.com</dd>
<dt>사업자등록번호:</dt>
<dd>132-18-46763</dd>
<dt>통신 판매업:</dt>
<dd>신고제 2013-서울강동-0969</dd>
<dt>상호:</dt>
<dd>뉴렉처</dd>
</dl>
</section>
<section>
<h1>저작자연락처</h1>
<div>
Copyright © newlecture.com 2012-2014 All Right Rewerved.
Contact admin@newlectur.com
</div>
</section>
</section>
</footer>
참고자료
[웹표준 기반의 웹 퍼블리싱 HTML5, CSS3 강좌]- 뉴렉처
[WEB1 - HTML & Internet] - 생활코딩
[WEB2 - CSS] - 생활코딩
[HTML,CSS 개발을 위한 핵심 가이드] - 코드스쿼드
[코코아톡 클론 코딩] - 노마드코더
'Programming Language > HTML&CSS' 카테고리의 다른 글
| 05. CSS 개념과 역사 (0) | 2024.01.31 |
|---|---|
| 04. HTML 문서 구조(작성 순서) (0) | 2024.01.20 |
| 02. HTML의 역사 (0) | 2024.01.17 |
| 01. 웹 역사와 브라우저 (0) | 2024.01.16 |
