내가 보려고 정리하는 HTML 요약

kim unknown·2022년 4월 5일

TIL html

JavaScript

목록 보기

1/24

HTML

Hyper Text Markup Language

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>

0. 웹사이트 제작시 고려 사항

웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

1. html 기본 구조

<!DOCTYPE html> <!--문서 유형을 지정하는 선언문-->
	<html> <!--웹 문서의 시작을 알림 -->
		<head> <!--문서의 내용(body)에 대한 정보(메타 데이터)-->
        	   <!--웹 사이트 상에서눈에 보이지 않음.-->
			<meta charset="UTF-8"> <!--인코딩 선언, 한글 깨짐 현상을 방지-->
			<title></title> <!--웹 사이트의 제목-->
		</head>
		<body> <!--실제 브라우저에 표시 될 내용-->
		</body>
	</html>

2. html의 기본 태그들

-<strong></strong> 글자를 진하게
-<u></u> 글자에 밑줄 표시
-<br> 줄바꿈
-<h1>~<h6> 제목, 숫자가 1에 가까울 수록 크기가 커짐(정보의 중요도를 의미)
-<p></p> 글

-<a></a> 링크를 걸어서 다른 페이지로 이동

a 태그 속성
href(페이지 주소)
target(어떤 방식으로 이동할지 - (새 탭 "_blank" | 현재 탭 "_self")

-<img> 이미지 삽입, 닫는 태그가 없음

이미지 태그 속성
src(이미지 주소) | width(이미지 너비) | height(이미지 높이)

리스트 태그
-<ul></ul> 순서가 없는 리스트 태그
-<ol></ol> 순서가 있는 리스트 태그
-<li></li> 리스트의 각 항목들

아이디와 클래스 속성
－ id는 고유해야 함. #id명로 불러옴.
－ class는 중복 사용 가능. .class명으로 불러옴.

3. html 구조와 관련된 태그

-<header></header> 머리글
-<nav></nav> 메뉴
-<main></main> 주요 내용 (*Internet Explorer는 지원하지 않기 때문에 role=“main” 속성을 필수로 입력해야 함)
-<article></article> 메뉴
-<footer></footer> 바닥글
-<div></div> 공간 생성

4. html의 block/inline 요소

block
박스 형태로 한 줄을 차지하며(width와 height를 지정 가능), 줄바꿈이 발생한다. 때문에 상하배치가 가능하며 상하에 margin, padding을 적용할 수 없다.
ex) <h1-6>, <p>, <ul>, <ol>, <div>, <header>, <article> ...
inline
자기가 가지고 있는 컨텐츠 만큼만 공간을 차지하며(width와 height를 지정 불가능), 줄바꿈이 발생하지 않는다. 때문에 상하배치가 불가능하며 상하에 margin, padding을 적용할 수 없다.
ex) <a>, <span>, <abbr>, <img>, <strong>, <b>, <br>, <label>...
inline-block
inline과 block의 성격을 모두 가진다. 따라서, width와 height를 지정할 수 있으며 줄바꿈이 발생하지 않아 나란히 정렬이 가능하다. 또한, inline에선 불가능 했던 margin, padding 적용이 가능하다.

kim unknown

과거의 나에게 묻기 위한 기록

다음 포스트