HTML 수업 1일차(Head, Body, a, br등)

Html 1일차(23.12.29, 금)

 

html은 head, body의 구조로 나누어진다.

head태그 내에는 제목, 저장방식, 인코딩등의 요소가 들어가 있으며

대부분의 내용은 body에 작성하면 된다.

 

Head 태그

메타데이터를 포함하기 위한 태그이다.

웹페이지에 유일하게 존재한다.

 

Html문서의 title, style, link, meta, script에 대한 데이터로 화면에 나타나지는 않는다

• title : HTML 문서의 제목
• style : HTML 문서의 Style 정보 정의
• link : 외부 리소스와의 연결 정보를 정의(CSS 파일 연계에 사용) 

• script : Javascript 를 정의
• meta:페이지설명,키워드,저자,화면크기등의정보. 

 

body태그

 

html문서의 내용을 담는 태그

웹페이지를 구성하는 대부분의 요소가 기술된다.

html기본문법은 요소(element)다.

 

시작태그와 닫는태그를 포함한 전체를 의미하며,

태그 사이는 내용(content)이다.

주석

주석은 코드 내에서 화면에 나타나지는 않지만, 개발자들끼리 서로 코드에 대해 설명하기 위해 사용된다.

Ctrl + / 혹은 Cmd + / 로 지정하거나 지정해제 할 수 있으며

각 언어마다 주석의 표시는 다르다.

 

html의 경우 <!— 주석 —> 으로 표시된다.

<!-- 주석 -->

제목태그

 

제목태그는 마크다운 언어랑 같다.

H1~h6까지 있으며

<h1>제목</h1>와 같이 표기할 수 있다.

<h2>h2태그</h2>
<h3>h3태그</h3>
<h4>h4태그</h4>
<h5>h5태그</h5>
<h6>h6태그</h6>

본문태그 p

본문태그도 마크다운언어와 같다.

 

<p>를 사용하며

paragraph의 약자이다.

 

<p>내용</p>로 표기한다.

<p>내용</p>

줄바꿈 태그 br

줄을 바꿀때는 엔터를 쳐도 줄바꿈이 되지 않고 줄바꿈 태그를 사용해야한다.

줄바꿈 태그는 <br>로 표기한다.

줄
<br>
바꿈

문자 꾸미기 태그들 

• <b> : 두껍게!
• <strong> : 두껍게! + Semantic 한 의미를 지님 

• <i> : 이탤릭(기울임)
• <em> : Emphasized, 강조! 기울여서 표시됨
• <del> : 중간 줄!
• <u> : 밑 줄! 

 

 

이미지 태그 img

이미지 태그는 다음과 같이 사용하면 된다

    <img src=“이미지 “주소 alt=“사진설명” />

하이퍼링크 태그 a

하이퍼 링크 태그는 다음처럼 작성하면 된다.

<a href=“url주소“> 링크 이름</a>

 

위와 같이 코드를 작성하면, [링크 이름] 을 클릭하면 설정한 url주소로 이동한다.