HTML

보동이용용 2022. 12. 22. 20:14

: 웹 페이지를 기술하기 위한 마크 업(markup) 언어

: 마크 업 언어는 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술한 것

: 컨텐츠가 없는 태그는 종료 태그가 없음

·웹 페이지의 내용은 HTML5로 작성

·웹 페이지의 스타일은 CSS3로 지정

·웹 페이지의 상호작용은 자바스크립트로 작성

HTML 요소

<시작태그> 컨텐츠 </종료태그>

HTML 속성

name = "value"

<br> : 줄바꿈

<p></p> : 단락을 정의

<pre></pre> : 미리 서식이 지정된 텍스트를 정의 (쓴 대로 나온다.)

텍스트 서식
태그	설명
<b></b>	굵은 텍스트 (CSS의 {font-weight : bold;}으로 대체 가능)
<i></I>	기울어진 텍스트
<strong></strong>	굵은 텍스트 (CSS의 {font-weight : bold;}으로 대체 가능) 음성 읽기 도구에서 볼륨 톤 등을 변경해 강조해서 읽음
<em></em>	기울어진 텍스트 음성 읽기 도구에서 볼륨 톤 등을 변경해 강조해서 읽음
<mark></mark>	강조할 텍스트에 배경 색상을 표시
<sup></sup>	위 첨자. 줄보다 조금 위로 올라가게 보임
<sub></sub>	아래 첨자. 줄보다 조금 아래 내려가게 보임

그외
<a href="" target=""> </a>	하이퍼 링크 target(_self / _blank /_parent / _top)
<hr>	수평선 표현, 콘텐츠 주제 변경을 정의
<a id="area1"> <a href = "#area1">	#id를 만나 링크를 클릭하면 그 id가 있는 곳으로 이동
<img src="" alt="">	이미지 정의. src : 이미지 경로 alt : 이미지 표시 못할 경우 지정 텍스트
<table>	표 <caption></caption> 테이블 제목 <tr> </tr> 하나의 행 표현 <td> </td> 하나의 데이터 표현 <th> </th> 각 열의 헤더가 있을 경우 rowspan='2' : 2개의 행 병합 / colspan='3' : 3개의 열 병합
<div>	* 자체적으로 특별한 의미가 없으며 블록수준의 요소 * 모든 HTML 요소를 묶는데 사용한다. * 하나의 줄 전부 차지 * 주로 웹 페이지 레이아웃 작성하는데 사용
<span>	* 자체적으로 특별한 의미가 없으며 인라인수준의 요소 * 텍스트를 묶어 스타일을 적용할 때 사용한다. * 자신이 필요한 크기만 차지 * 크기를 지정할 수 없다.(width, height X)

Block - Inline 요소
Block-level 요소	* 사용 가능한 최대 가로 너비를 사용 * 크기 지정 가능(width, height) * margin, padding 속성의 상하좌우 여백을 온전하게 사용 * 레이아웃을 위한 용도로 사용 <div> <ul> <ol> <dl> <dt> <h1~6> <hr> <li> <p ><table>등
Inline-level 요소	* 필요한 만큼의 너비만 사용 * 크기 지정 불가(width, height) marjin, padding 속성으ㅏ 좌우 여백만 사용 가능 텍스트를 다루는 용도로 사용 <span> <a> <br> <b> <em> <strong> <img> 등