Front-end

[HTML5] 기초

나는나는용 2024. 7. 29. 16:54
728x90

HTML 기본 구조

태그<>가 기본이다.

 

기본 태그

<html>, <head>, <body> 태그이다.

<html> - html문서의 시작

<head> 
     문서의 제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의 (주로 정의하는 역할)
     헤드에 정의 된 내용은 웹브라우저에 표시되지 않는다.
</head>


<body>
     문서의 본문, 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>

</html> - html문서의 종료

HTML 태그의 특징

구성

< img src="heart.jpg" alt="사랑합니다.">
img src "heart.jpg" alt "사랑합니다."
태그이름 속성1 속성값 속성2 속성값

 

각 속성은 공백문자(띄어쓰기)로 구분해준다.

 

시작태그 & 종료태그

대부분의 태그는 시작태그와 종료태그로 구성되어 있다.
<html> </html>, <title> </title>

시작태그O, 종료태그 X

시작태그만 있고 종료태그가 없는 태그도 있다.
<br>, <hr>

대소문자 구분

태그와 속성은 대소문자 구분하지 않는다.

<HTML> , <html> 무방하다. 

<img SRC="heart.jpg">

 

속성값은 대소문자를 구분해야 된다.

heart.jpg != Heart.jpg

 

공백 문자

태그의 속성 값에 불필요한 공백문자는 사용하지 않는다.
<img src="heart.jpg"  width="    100(이처럼 공백을 주지 않는다.)">

 

기타 TIP - 문자, 기호, 심볼 입력

HTML5의 문자 : 유니코드 문자셋, UTF-8 코드체계

 

예약어(Keyword) : 프로그램 진행을 위한 필수로 필요한 단어 , 예를 들어 <tag>
키보드로 입력이 어려운 기호들, 심볼 입력하기 위한 코드, 엔터티 표현


프로그래밍에서의 사칙연산 기호 : + - * / 

 

기본 HTML 태그

<title></title>태그

문서에 제목을 넣는 태그
타이틀은 브라우저의 상단 타이틀 바에 보여진다.

 

<h1~6>태그

문단의 제목 넣을때 쓰는 태그

 

body태그에서 사용한다.


제목은 두껍게 표시 되고, 자동 줄 바꿈처리


h1 태그가 가장 크고, h6 태그가 가장 작다.

 

크기의 값은 특정한 픽셀(px)로 정해지지 않았고, html파일을 여는 브라우저에서 알아서 출력해준다.

 

<p></p>태그

단락 나눌때 사용.

ex)

<hr> 태그

수평선 긋기
한줄 긋고 마무리가 되므로 종료 태그가 없다.
브라우저의 크기에 따라 자동으로 크기가 조정된다.

<br> 태그

새로운 줄로 넘어가기


종료 태그가 없다.


html 코드에서는 엔터를 아무리쳐도 줄바꿈처리가 되지 않는다.

줄바꿈처리는 <br>태그를 입력해주면 된다.

 

<pre> 태그

개발자의 포맷 그대로 출력.

개발자가 입력한 대로 그대로 웹브라우저에서 보여진다.
자주 쓰이지는 않는다. 

인터넷을 사용하는 환경이 다양해서 pre 태그로 작성한 내용이 깨질 수도 있다.

텍스트 꾸미기

태그를 통하여서 텍스트를 여러 형태로 출력할 수 있다. 여러개 섞어서도 쓸 수 있다.

<b>진하게</b>
<strong>중요한</strong>
<em>강조</em>
<i>이탤릭</i>
보통문자 <small>한 단계 작은 문자</small>
<del>삭제</del>
<ins>추가</ins>
보통문자의 <sup>윗첨자</sup>
보통문자의 <sub>아래첨자</sub>
<mark>하이라이팅</mark>

 

블록 태그와 인라인 태그

블록 태그 

<p>, <h1>, <div>, <ul>...
* 항상 새 라인에서 시작하여 출력
* 양 옆에 다른 콘텐츠를 배치하지 않고, 한 라인을 독점적으로 사용
* 가장 사용 빈도가 높은 블록 태그는 <div>

인라인 태그 

<strong>, <a>, <img>, <span>...
* 블록 속에 삽입되어 블록의 일부로 출력
* 가장 많이 사용 빈도가 높은 인라인 태그는 <span>

메타 데이터 삽입

메타 데이터 : 데이터를 설명하는 데이터


사진 데이터의 메타 데이터 ex) 사진찍은 장소, 시간..
오디오 데이터의 메타 데이터 ex) 재생시간, 트랙의 채널 수...
이미지 데이터의 메타 데이터 ex) 이미지의 폭, 높이, 컬러, 해상도..

 

HTML 페이지에 대한 메타 데이터를 담기 위한 태그들

<base>, <link>, <script>, <style>, <title>, <meta>

 

메타 태그는 <head>태그안에 작성한다.

예외) <script> : 자바스크립트태그 , <body>태그에서도 사용가능

<head>
	<base href="http://www.mysite.com/score">
</head>

 

<link> 태그

외부 자원 연결에 사용된다.

 

ex) mystyle.css 불러와서 사용해야 될때

<head>
	<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>

 

<meta>태그

다양한 메타 데이터 표현

 

ex) 웹 페이지 저작자 누군지..
<meta name = "author" content="홍길동">
<meta name = "description" content="페이지 설명에 관한 내용">
<meta name = "keyword" content="컴퓨터, 소프트웨어, 스마트폰">

 

charset 속성으로 웹페이지에 사용하는 문자 코드 지정
<meta charset="UTF-8">

<img> 태그

이미지 삽입 

src 속성 무조건 있어야 한다. (주소지정)

 

src로 지정할 수 있는 이미지 종류 : BMP, GIF, PNG, JPG(JPEG), GIF(animated)

 

<img src="이미지 파일의 url(필수 속성)" alt="문자열(이미지가 없을때 어떤 이미지인지 설명하는 텍스트)" width="이미지의 폭(가로 길이, 크기는 픽셀 수)" height="이미지의 높이(세로 길이)">

width와 height를 지정하지 않으면, 원래 이미지의 크기대로 출력된다.

리스트 만들기

리스트 종류 

  • 순서가 있는 리스트 (ordered list) - <ol> </ol>
  • 순서가 없는 리스트 (unordered list) - <ul> </ul>
  • 정의 리스트(definition list) - <dl> </dl> , 사용빈도가 높지 않다.

리스트 아이템 (1번, 2번, 3번, *, * ,*)
       <li> </li> , </li> 생략 가능하지만 생략안하는 걸 추천

 

순서가 있는 리스트 (ordered list) : <ol> </ol>

<ol type = "1"|"A"|"a"|"I"|"i" start = "value(마커의 시작 값)">
         <li>아이템1</li> 1
         <li>아이템2</li> 2 
         <li>아이템3</li> 3
</ol>

type : 마커 종류

  • type="1" 디폴트 1,2,3,4,.....
  • type="A" A, B ,C,....
  • type="a" a,b,c,......
  • type="I" I, II, III ,IV, V , VI, 
  • type="i" i, ii, iii ,iv, v , vi

예시

<html>
<head>
<title>라면을 끓이는 순서</title>
</head>

<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="a" start="3">
    <li> 물을 끓인다. </li>
    <li> 라면과 스프를 넣는다.</li>
    <li> 파를 썰어 넣는다. </li>
    <li> 5분 후에 먹는다. </li>
</ol>
</body>
</html>

 

순서가 없는 리스트 (unordered list) : <ul> </ul>

<ul>
         <li>아이템1</li> ·
         <li>아이템2</li> ·
</ul>

예시

<html>
<head>
<title>내가 좋아하는 음식</title>
</head>

<body>
<h3>내가 좋아하는 음식</h3>
<hr>
<ul>    
    <li> 감자탕 
    <li> 스파게티
    <li> 스테이크
</ul>
</body>
</html>


정의 리스트(definition list) : <dl> </dl>

<html>
<head>
<title>정의 리스트 만들기</title>
</head>

<body>
<h3>웹 브라우저 종류</h3>
<hr>

<dl>
<dt><strong>Internet Explorer</strong> - 용어
<dd>마이크로소프트에서 만든 브라우저로 한때  - 설명
        많은 유저를 보유하고 있었다.
<dt><strong>Chrome</strong>
<dd>구글에서 만든 것으로 현재 가장 많은 유저를
        보유하고 있다.
</dl>
</body>

</html>

 

<table> 태그

표를 만드는데 사용되는 태그들

<table> </table> : 표 전체를 담는 컨테이너 
<caption> : 표 제목 </caption> 생략 가능
<thead> : 헤딩 셀 그룹, 제목이 작성된다. 각 열의 제목을 작성한다.</thead> 생략가능
<tbody> : 데이터 셀 그룹, 실제적인 데이터가 작성 되는 부분</tbody>
<tfoot> : 바닥 셀 그룹, 합계, 평균.... 작성되는 부분</tfoot> 생략 가능
<tr>: thead, tbody에서 하나의 행 <td>, <th> 태그를 가진다.</tr>
<th> : 열 제목(헤딩) 셀, 바껴서는 안된다.</th>
<td> : 데이터 셀, 데이터를 담음으로 바뀌게 된다.</td>

행과 열 만들기

표는 여러 행으로 구성
행 <tr>.... </tr>

한행은 여러 셀로 구성
제목 셀, <th>
데이터 셀, <td>

예시

<table>
   <thead> - 제목
        <tr><th>이름</th><th>HTML</th><th>CSS</th><th>JS</th></tr>
   </thead>
   <tbody>
        <tr><td>홍길동</td><td>50</td><td>80</td><td>65</td></tr>
        <tr><td>강감찬</td><td>90</td><td>70</td><td>75</td></tr>
        <tr><td>이순신</td><td>80</td><td>60</td><td>55</td></tr>
   </tbody>
</table>

<html>
<head>
<title>테이블 만들기</title>
</head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<table border="1"> 
<caption>1학기 성적</caption>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tbody>
<tr><td>홍길동</td><td>50</td><td>60</td></tr>
<tr><td>강감찬</td><td>80</td><td>90</td></tr>
<tr><td>이순신</td><td>75</td><td>80</td></tr>
</tbody>
<tfoot>
<tr><th>합계</th><th>205</th><th>230</th></tr>
</tfoot>
</table>
</body>
</html>

 

이미지를 가지는 표 만들기 

<img>태그를 이용하여 이미지를 <td>태그에 넣을 수 있다.

<table>
<caption>좋아하는 과일</caption>
<tbody>
<tr>
   <td><img src="img/apple.jpg"></td>
   <td><img src="img/kiwi.jpg"></td>
   <td><img src="img/strawberry.jpg"></td>
</tr>
</tbody>
</table>

 

728x90