html 기본 구성 및 자주 사용하는 태그

반응형

html

- 웹 프로그래밍 언어

- 페이지의 레이아웃을 담당

* html5 : 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격


html 파일 기본 구성

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>


</body>

</html>


* <> : 태그

- ex) <태그의 이름>

- 여는태그와 닫는태그가 존재

- 닫는 태그에는 태그의 이름 왼쪽에 /를 붙임

- 모든 태그가 전부 여는 태그와 닫는 태그가 존재하진 않음

* 단일 태그 : 닫는 태그 없이 여는 태그만 존재하는 태그

- 닫는태그가 필요 없는 이유 : 어디까지가 그 태그의 내용이라고 지정할 필요가 없기 때문입니다.

- 단일 태그 끝에는 /쳐줌. 임의의 약속. 없어도 상관 없습니다.

* meta charset : 이 문서의 인코딩 방식을 지정하는 것

* 인코딩 : 컴퓨터가 아는 2진수를 사람이 사용하는 문자와 매핑하여 사용하는 약속

* UTF-8 : 전세계에 존재하는 모든 문자를 전부 다 표현할 수 있는 인코딩 방식

* <html> : html 문서의 시작과 끝을 알려줌

* <head> : html 문서의 속성을 지정하게 됨

* <body> : 페이지에 출력시킬 부분을 지정하는 태그

* <br/> : 줄바꿈 (단일태그)

* <html lang="ko"> : 이 문서의 언어를 한국어로 지정한다는 설정.

ex) de(독일어), en(영어), fr(프랑스어), ja(일본어), zh(중국어), ...

- 설정하면 '한국어 웹' 분류로 들어감

* <h1> : 글씨가 굵고 크게 출력할 때 (제목)

* <h1~h6> : 숫자가 작을수록 글씨 크기가 커짐

* <p> : 하나의 단락(문단)으로 묶어줌 (밑에 한줄 개행 시켜준다는 뜻)

- overflow:scroll; ( 내용이 사이즈를 넘어가면 스크롤을 만들어라 )

- overflow:hidden; ( 내용이 사이즈를 넘어가면 내용을 잘라라 )

* <b> : 글씨를 굵게(Bold) 해줌

* <i> : 글씨를 이탤릭체(기울기)로 출력해줌

* <img src=""/> : 이미지 삽입

* <a href=""> : 링크 삽입

* <a href="" target="_blank"> : 새창으로 링크열기

* <!-- --> : 주석 삽입

* <iframe> : 태그 사이에 적는 문자열을 iframe태그를 지원하지 않는 브라우저에 보여주게 됨


* <ul>, <li> : 목록을 만들 수 있음

<ul> : 순서가 없는 목록을 만들어라

<li> : 항목으로 묶을 때 사용

* <ol> : 순서가 있는 목록을 만들어라 ex) 1, 2, 3, ...

* <dl> : 정의 목록을 만듬

<dt> : 중분류

<dd> : 소분류

* <div> : 영역을 지정할 때 사용

- 여는 태그부터 닫는 태그까지 하나의 영역이라고 묶어줄 때 사용하게 됨

* <class=""> : 여러 태그를 하나로 묶을때 사용

* HTML 태그는 블럭 레벨 요소와 인라인 요소로 나누어 짐.

- 블럭레벨 요소 : 가로 전체를 차지하는 태그

- 인라인 요소 : 딱 내용 만큼만 차지하는 태그

* 블럭레벨 요소 → 인라인 요소

<css 수정> display:inline;

* 인라인 요소 → 블럭레벨 요소

<css 수정> display:block;


* 경로를 지정할 때는 절대경로/상대경로 사용

* 윈도우즈는 최상위 경로가 드라이브



반응형

'Programing > other language' 카테고리의 다른 글

mysql 설치 및 인증방법  (0) 2016.12.16
javascript 함수 모음  (0) 2016.12.15
javascript 변수/연산자/함수/배열  (0) 2016.12.15
html <form>태그/<input>태그  (0) 2016.12.13
CSS 기본 설정  (0) 2016.12.13
TAGS.

Comments