HTML TAGS
in Programming on HTML/CSS
HTML 구조
html 은 구조를 나타내는 문서이다. 구조만을 나타내는게 목적이고, 디자인적인 부분은 CSS로 나타내준다. 또 html 과 css는 동적인 처리를 하지 못하기 때문에, javascript를 사용해 동적인 처리를 해준다.
전체적으로는 아래와 같은 구조를 가지고 있다.
<!doctype html>
<html lang = "ko">
<head>
</head>
<body>
</body>
</html>
- 좀 더 자세히 본다면 다음과 같은 요소들로 구성되어 있다.
<!doctype html>
<!--이렇게 쓰면 html5 의미한다. 이게 없으면 Quirks mode, 그래서 브라우저마다 살짝 다르게 보일 수 있다.-->
<html lang = "ko"><!--낭독기 언어, 검색 언어-->
<head>
<title>html 공부 환영합니다.</title>
<meta charset="UTF-8"><!--meta 데이터는 데이터의 데이터다. 인코딩 타입 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name ="keywords" content ="키워드1, 키워드2">
<meta name ="description" content ="문서 설명">
<meta name ="author" content="Charlean Park">
<script></script><!--스크립트-->
<style><!--style 태그 안에 css 설정-->
p{
border : 2px solid gray;
margin : 20px;
padding : 10 px;
}
span{
border : 2px solid red;
margin : 20px;
padding : 10 px;
}
</style>
</head>
<body>
<!--화면에 출력되는 문서들이 이곳에 있다. -->
<p>테스트 화면입니다.</p>
<span>스팬</span>
</body>
</html>
- 웹페이지에서 F12클릭하면 아래와 같이 소스코드를 볼 수 있다.
기본문법
태그(tag)
시작태그, 끝태그가 존재하지만, 끝태그가 없을 수도 있다
<p></p> <img >html 문서를 구성하는 가장 중요하고 기본적인 규칙
표현하고자 하는 내용에 이름표를 붙였다는 의미
속성을 가질 수 있다. (필수속성 or 선택속성)
태그 하나에 여러가지 속성을 줄 수 있다.
<img src="..."> <div id= "wrapper">
내용(content):
- test, 그림, 멀티미디어 데이터들
요소(element) :
- 내용을 포함한 태그 전체를 요소라고 한다.
태그의 중첩:
- 태그는 다른 태그를 포함할 수 있다. 그러나 중첩하되, 엇갈려 쓰면 안된다.
끝태그가 없는 태그 (xhtml 표준을 따른 표현식)
<img /> , <input>, <br />
HTML 에서 공백의 처리
- 일반 문서에서의 공백과는 다르게
HTML 주석
- <!– 주석은 이 사이에 쓰도록 한다. –>
태그의 종류
블록 태그
그 태그 하나가 전체 라인에 영향을 미친다. 라인 하나를 다 차지하는 태그다. 다른 블록 태그나 인라인 태그를 감싼다.
ex) div , h1, p, hr, br, blockquote, pre,
Heading tag : 타이틀을 나타내는 용도 h1 ~ h6
paragraph tag
<p></p>Line break : 줄을 나누는 태그 br
블록태그의 구성 (컨텐츠 + 패딩 + 보더 + 마진) :
content 영역 : 실제 내용을 포함하는 영역
padding 영역 : 컨텐트 보더 사이의 여백
border 영역 : 컨텐트 영역을 감싸는 테두리
margin 영역 : 컨텐트 밖 영역, 다른 요소와 구별하기 위한 영역. (auto는 균등하게 분할하여 배당.) 상 우 하 좌
margin collapse :
- 형제 요소일 경우 위 요소의 아래 마진, 아래 요소의 위 마진.
- 부모자식일 경우, 부모의 위마진, 첫번째 자식의 위마진
- 부모자식일 경우, 부모의 아래마진, 첫번째 자식의 아래 마진
인라인 태그
블록태그 내부에서 사용됨. 줄바꿈 없이 텍스트를 표시하는 인라인 레벨. 컨텐츠 + 보더만 존재.
ex) strong, b, em, i , q, mark, span, ruby
꾸밈 태그
<s></s> <!-- strike--><u></u> <!-- underscore--><i></i> <!-- italic-->
앵커 태그
문서를 연결시켜주는 태그, 인라인 태그
<a href=""></a>주소
- 절대주소 : 외부 사이트에 연결할 때
- 상대주소 : 내 문서에 연결할 때
- 내부주소 : 문서 내부에서 연결할 때
<a href="http://www.naver.com">네이버</a> <a href="http://www.nate.com" target>네이트</a> <a href="yejip.html">내 페이지</a> <a href="yejip.html#third">서브문서로 이동하기</a><!-- third라고 태깅되어있는 곳으로 가겠다. 거기부터 보이게--> <!-- yejip.html 문서--> <a id = "third">3번</id>타겟 속성
- _self : 기본 속성
- _blank : 새창
- _parent , _top : 사용하지 않는다.
컨테이너 요소 : 의미 없음
<style> span { color : blue; } </style> <body> <span>Blue sky</span> is pretty. </body>
목록 태그
ol, ul, dl
ol,ul => li 태그를 자식 요소로 갖는다. 메뉴만들 때 많이 사용하나보다.
<div> <h1>3분 카레 만들기</h1> <h2>준비물</h2> <ul> <li>감자 <b>2개</b></li> <li>당근 <b>1/2개</b></li> <li>소고기 안심<b>1kg</b></li> <li>카레가루 <i>0.5g</i></li> <li><s>꽈리고추</s></li> <li>물<b>5컵</b></li> </ul> <h2>만들기</h2> <ol> <li>후라이팬에 고기를 볶는다.</li> <li>채소를 대충 썰어 후라이팬에 같이 볶는다</li> <li>물을 대충 넣는다.</li> <li>카레 가루를 물에 개어 넣는다.</li> <li>고기가 다 익으면 그릇에 담아 먹는다.</li> </ol> </div>dl => dt(title) : inline 요소, dd(definition) : block 요소
<h2> HTML + CSS + Javascript </h2> <dt>HTML</dt> <dd>html은 hyper text markup language의 약자로서... 팀 버너스리가 1990년에 정보를 공유하기 위한 용도로 만든 것이다.</dd> <dt>css</dt> <dd>cascading style sheet로 구조문서에 표현을 하기 위한 문법이다. html을 꾸미는 용도이므로 html 문서가 없으면 의미가 없다.</dd> <dt>Javascript</dt> <dd>html 과 css를 동적으로 만들어주는 언어의 일종이다.</dd>
표 태그
화면 레이아웃을 정리하기 위한 용도로 테이블 사용하는 것은 옳지 않다.
다음과 같은 형식이다.
<table> <thead><th>표 이름</th></thead> <tfoot></tfoot> <tbody> <tr> <td></td> <td></td> </tr></tbody> </table>col이나 row를 합칠 때
<table>
<caption>시간표</caption>
<thead>
<tr>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tfoot>
<td colspan=5>종례시간</tfoot>
<tbody>
<tr>
<th>국</th>
<th>국</th>
<th>영</th>
<th rowspan=2>수</th>
<th>국사</th>
</tr>
<tr>
<th colspan = 2>국</th>
<th >영</th>
<th>수</th>
<th>국사</th>
</tr>
<tr>
<th>국</th>
<th >영</th>
<th colspan = 2 rowspan =2>수</th>
<th>국사</th>
</tr>
<tr>
<th>국</th>
<th >영</th>
<th>국사</th>
</tr>
</tbody>
</table>
<table><thead>
<th>장부</th></thead>
<tfoot>합계 :100만원</tfoot>
<tr>
<tbody>
<td>박예지</td>
<td>60만</td>
</tr>
<tr>
<td>핀이</td>
<td>40만</td>
</tr>
</tbody>
</table>
이미지 태그
img
필수 속성 => src (이미지의 경로 지정), alt(경로가 잘못되었거나 넷워크상에 문제가있어서 이미지를 표현하지 못했을 때 그때 설명글을 들어가게 해준다.) ,title(이미지에 커서 올리면 설명이 나온다)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> img{ width : 100px; } </style> </head> <body> <h2>이미지</h2> <img src="bears.gif" alt = "예쁜 곰도리들" width = "500px"> <img src="flower.jpeg" title = "예쁜 꽃"> </body><style> img{ width : 100px; } 이렇게 주면, img태그 갖는 애들 기본으로 100px갖는다.선택 속성 => width/height
이미지 확장자
- jpg : 실사와 유사한 이미지를 표현할 때 사용. 압축률을 제어로 용량 조절 가능
- gif : 투명 이미지 표현 가능, 이미지에 포함되는 색상 정보가 제한되어 있을 때 주로 사용
- png : 이미지 손실이 적고, 투명이미지, 반투명 모두 지원
figure tag와 함께 사용해도 좋다 .
<figure> <img src= "cuteDog.png" alt = "the picture of cute dog"> <figcaption>갱얼쥐 귀여웜</figcaption> </figure>
하이퍼링크
a tag
- href 다음에 주소가 나오면 된다.
- target 속성은 _blank, _self, _parent , _top 이 있다.
- _blank : 새창이나 새탭에서 열린다.
- _self : 기본값, 링크가 있는 화면에서 열린다.
- _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
- _top : 프레임 사용시, 내용을 프레임에서 벗어나 전체에 표시한다.
<a href="링크 주소">클릭하세요</a>
<a href="링크 주소" target="_blank">클릭하세요 새창에서 열린답니다.</a>
- a태그를 이용해 한 문서 안에서 점프하려면 다음과 같이 하면 된다.
<a href = "#content">2. css 활용하기</a>
....
<h2 id="content">
2장 css 확인하기 입니다.
</h2>
