FRONT/Html

[Front] HTML 태그(tag)

권택현 2020. 6. 10. 19:24
html 태그의 특징
  1. html태그는 대소문자를 구분하지 않는다. 하지만 소문자를 권장하고 있다.
  2. 태그를 작성할때 <태그 속성=속성값(변수)> 형식으로 적는데 속성 값을 작성할 때 큰 따옴표가 필요하지 않는다. 하지만 큰 따옴표를 하는것을 권장한다. 
  3. 작은 따옴표를 사용할 수도 있는데 이는 속성 값에 큰 따옴표를 사용해야 할 경우이다. ex)<p title=”John ‘ShotGun’ Nelson”>
html 태그와 CSS 태그
  1. <a> : 하이퍼 링크를 지원하는 태그 ex)<a href=”링크의 주소”>
  • 하이퍼 링크에 대한 속성이 있는데 
  • _blank : 링크된 문서를 새 창이나 탭에서 연다.
  • _self : 클릭 한 것과 동일한 창/탭에서 문서를 연다.
  • _parent : 부모 프레임에서 문서를 연다.
  • _top : 링크된 문서를 창 전체에서 연다.
  • <a href=”주소” target=”_blank”>이와 같은 형식으로 작성하면 된다.

책갈피 : 하이퍼 링크라고 해서 반드시 웹 주소만 값을 가질 수 있는것은 아니다.

<!DOCTYPE html>
<html>
<body>
<a href="#C4">이것을 누르면</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="C4">이곳으로 옵니다.</h2>
</body>
</html>

이와 같이 작성하면 href의 주소값과(반드시 #을 주소 가장 앞에 써야한다.)해당 문서의 id값과 일치하는 부분으로 이동 할 수 있다. 마치 웹의 맨위로 같은 버튼과 같은 것이다.

 

2.<p> : 문단을 지원하는 태그

위 코드를 작성하면 아래와 같은 결과를 볼 수 있는데

‘이것’에는 p태그가 없으나 앞뒤로 개행이 되어있는것을 볼 수 있다.

이처럼 p태그는 문자열을 문단으로 만들어주고 해당 태그 앞뒤로 개행문자가 포함되어있다.

  • title : 툴 팁이 표시되게 하는 태그로 <p title=”I’m a tooltip”>This is a paragraph.</p> 와 같이 적으면 title내부 값이 툴팁으로 표시된다.
<!DOCTYPE html>
<html>
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
<p title=about w3schools>this is a ex</p>
이것
<p title="jhon 'sg'">p tag
pp tag
ppp tag</p>
</body>
</html>

 

3.<h1> : 제목을 작성할 때 규격화된 크기로 지정하는 태그로 숫자가 커질수록 크기는 작아진다. 제목인 header를 지정하는 태그이므로 p태그 처럼 앞뒤로 개행 문자가 존재한다.

  • style : CSS 속성중 하나로 꼭 h1태그가 아닌 다른 태그에서 해당 태그에 스타일 즉, 색상(color:blue), 글꼴(font-family:굴림), 크기(font-size:40px) 등과 같은 요소에 스타일을 추가할 때 사용하는 속성이다. h태그는 글자의 크기를 조절 할 수 있다. 여기에 style 속성으로 글씨 크기를 조절 한다면 어떻게 될까? 

<h1 style=”font-size:40px;”>heading</h1> 이와 같이 작성하면 글씨의 기본 크기가 증가하여 더 큰 h1태그를 볼 수 있다. *여기서 px는 픽셀을 의미한다.

 

4.서식 : 문자의 상태를 나타내는 태그

<!DOCTYPE html>
<html>
<body>
<b>굵은체 텍스트</b><br>
<strong>강조 텍스트</strong><br>
<i>이탤릭체 텍스트</i><br>
<em>중요한 텍스트</em><br>
<small> 작은 텍스트</small><br>
<mark> 강조 텍스트</mark><br>
이것은 <del>삭제될</del>텍스트<br>
이것은 <ins>추가될</ins>텍스트<br>
이것은 <sub>아래첨자</sub>텍스트<br>
이것은 <sup>위첨자</sup>텍스트<br>
</body>
</html>

 

 

5.인용

인용구를 표시 해 주는 태그로는 여러개가 있지만 <q>태그를 가장 많이 사용한다.

이와 같이 작성하면 인용구에 큰 따옴표 처리가 된다.

<p>이것은 <q>짧은 인용구 입니다.</q></p>

6.<img> : 웹에 이미지를 올리는 태그이다.

  • img 태그는 속성이 필수적이다.
  • src : 이미지의 경로(url)을 작성하는 속성이다.
  • alt : 이미지가 어떠한 이유던 보여지지 못했을 때 나오는 문구를 작성하는 속성이다.
  • style : 이미지의 크기를 설정하거나 이미지의 위치(글자 좌측, 우측)를 설정하는 속성이다.
  • usemap : 이미지를 클릭시에 작업을 수행할 수 있게 한다.
  • ex) <img src=”경로” alt=”원래 사진이 나와야 하나 불러오지 못했습니다.” style=”float:left; width:42px; height:42px;” usemap=”#map1">

7. <div>, <span> : 영역을 부여하는 태그이다.

어떠한 기능을 하진 않지만 영역을 설정하는 태그로 해당 태그 내에 작성 하게 되면 해당 부분을 하나의 영역으로 관리할 수 있다.

<div>와 <span>태그의 차이점

<!DOCTYPE html>
<html>
<body>
<div style="background-color:blue">영역1<br>여기도 영역1</div>
<div style="background-color:red">영역2</div>
<span style="background-color:purple">영역3</span>
<span style="background-color:yellow">영역4</span>
</body>
</html>

위 코드를 작성하게 되면 아래와 같은 결과를 얻을 수 있다.

<div>태그는 문자열이 작성된 줄 전체에 영역이 할당된다. 따라서 개행 태그가 없음에도 불구하고 저절로 개행이 된다,.

하지만 <span>태그는 해당 문자열이 있는 부분만 영역이 할당되어 연속적으로 쓰게 되면 바로 옆에 오는것을 알 수 있다.

*<div>는 블록 레벨 요소, <span>은 인라인 레벨 요소라고 한다.

 

8.<table> : 표를 그리는 태그

<table> : 해당 태그의 시작과 끝 사이에 있는 태그와 문자열은 표을 그리기 위함이다라는 선언의 태그

<tr> : 표의 행(가로)를 나타내는 태그

<th> : 표의 헤더(세로)를 나타내는 것으로 해당 열이 무슨 정보를 가지는지 나타내는 것이다.

<td> : 해당 칸에 들어가는 정보를 나타내는 태그

<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
	<tr>
    	<th>이름</th>
        <th>성별</th>
        <th>주소</th>
    </tr>
    <tr>
    	<td>홍길동</td>
        <td>남자</td>
        <td>서울</td>
    </tr>
</table>
</body>
</html>

이처럼 테이블이 만들어진다.

  • border : 테두리 설정
  • padding : 패딩 설정
  • colspan : 둘 이상의 열을 합친다.
  • rowspan : 둘 이상의 행을 합친다.
<!DOCTYPE html>
<html>
<body>
<table style="width:100%" padding="15px" border="1">
	<tr>
    	<th>이름</th>
        <th>성별</th>
        <th>주소</th>
    </tr>
    <tr>
    	<td>홍길동</td>
        <td>남자</td>
        <td>서울</td>
    </tr>
    <tr>
    	<td>손오공</td>
        <td rowspan="2">여자</td>
        <td rowspan="2">강원도</td>
    </tr>
    <tr>
    	<td>삼장법사</td>
    </tr>
    <tr>
    	<td colspan="2">남자인 사오정</td>
        <td>경기도</td>
    </tr>
</table>
</body>
</html>

9. 리스트

  • <ul> : unordered list로 순서가 없는 리스트
  • <ol> : ordered list로 순서가 있는 리스트이다.
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  	<ol>
    	<li>순서가 있는 리스트
    </ol>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

이처럼 순서가 있는 리스트 순서가 없는 리스트를 적용하면 되고 리스트 안에 리스트를 작성할 수도 있다.

  • <dl> : 설명을 지원하는 리스트
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:square;">
<dl>
	<dt>Tea</dt>
    <dd>우려마실 수 있는 것</dd></dl>
</body>
</html>

 

10. <iframe> : 웹 페이지 안에 웹 페이지를 선언할 때 사용한다.

  • name : 해당 iframe과 연겨된 <a>의 target속성과 일치하여 <a>의 href URL이 iframe 안에 나오게 된다.
  • width, height 속성으로 크기를 지정할 수 있다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <iframe src="웹페이지 안의 웹" name="ifr"></iframe>
  <p><a href="https://<www class="w3schools com" target="ifr">w3schools</www>"></a></p>
</body>
</html>

 

* 이곳 부터 태그는 보여주는 태그 모양을 잡는 물리적 태그의 의미라면 아래에 기재될 태그들은 의미를 갖는 태그들이다.

 

11.<script> : 자바스크립트와 id 값으로 연동하여 사용할 수 있다.

12.<head> : 해당 html의 선언, 설정에 대한 정보가 들어있는 곳이다.

  • <title> : 브라우저 탭에서 제목을 정의한다.
  • <style> : HTML페이지에 대한 스타일 정보를 정의한다.
  • <link> : 외부 스타일시트와 연결하는데 사용한다.
  • <meta> : 구성요소(문자세트, 페이지 설명, 키워드, 작성자 등) 에 대한 데이터를 지정하는데 사용한다. <meta>태그를 통해서 viewport를 제어 할 수 있다.

13. 여기서 viewport란 ? 사용자가 볼 수 있는 영역을 의미한다. 이는 반응형 웹에서 중요한 부분이다.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

width=device-width : 사용자의 화면의 크기, initial-scale: 초기 줌 상태

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>html</title>
</head>
<body>
<figure>
  <img src="java.jpg" alt="image">
  <figuration>이것은 ___사진입니다.</figuration>
</figure>
</body>
</html>

이와 같이 반응형 웹에 사용되는 경우 <img>태그 대신에 <picture> 태그를 사용하면 좀 더 유연하게 사용할 수 있다.

 

14. <code> : 컴퓨터 코드를 정의하기 위해사용된다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p>
  이곳은 앞으로 코드가 작성 될 공간입니다.
  <code>
    <br>
    x=5;<br>
    y=6;<br>
    z = x + y;<br>
  </code>
</p>
</body>
</html>

 

15. <var> : 변수를 정의한다.

 

16. <section> : 섹션은 주로 주제별 콘텐츠를 구분하는 그룹이다. 아래와 같이 <section>태그를 사용하여 작성을 하게 된다면 별다른 개행 문자가 없어도 다른 섹션 끼리는 자동으로 분할되어 구분지어진다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section>
 여기는 섹션 1 안이다.
</section>
<section>
  여기는 섹션 2 안이다.
</section>
</body>
</html>

 

17. <article> : 이 태그는 독립적이고 독자적인 컨텐츠를 지정한다. 이 태그를 사용할 수 있는 분야는 포럼 게시물, 블로그 포스트, 신문기사 등이 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
여기는 일반 영역
<article>
  여기서 부터는 article 영역
  <h2>오늘의 주제</h2>
  <p>
    article 태그는 왜 필요한가?
    이 전까지는 주로 보여주는 부분에 의미를
    둔 태그가 많지만 이처럼 해당 부분이 가지는
    의미를 나타내는 태그도 있다.
  </p>
</article>
</body>
</html>

 

18. <header> : 해당 문서의 헤더를 지정한다.

 

19.<footer> : 해당 문서, 영역의 바닥 글을 지정한다. 일반적으로 작정자, 저작권, 연락처 등이 해당 태그 내에 기재된다.

 

20. <figure> : 이미지와 캡션을 그룹화 한다.

이것은 예시로 보는것이 빠르다.