<!doctype html>
: html5 웹 표준을 표준 명령으로 해석하겠다는 말. 시작할 때에 씀. 쓰지 않은 경우 명령 해석이 안 될 수 있음.
<html lang="언어"> </html>
: html 태그 (doctype을 제외한 모든 코드는 <html>과 </html> 사이에 들어간다)
lang: 이 페이지의 언어 속성. 한글=ko, 영어=en 등 각 나라 이름의 앞 2글자.
<head> </head>
: 헤드. 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보 입력. 즉, 지시사항 입력.
헤드 내부 주요 요소
<meta charset="utf-8"> : 문자 인코딩 설정. 코드는 주로 utf-8을 사용한다.
<title> 내용 적기 </title> : 탭 이름
<link href="이미지 파일 주소" ref="shortcut icon"> : 탭 이름 왼쪽에 붙는 파비콘(작은 정사각형 이미지).
<link href="css 파일 주소" ref="stylesheet"> : css 외부 파일 적용.
<style> css 내용 적기 </style> : css 내부에서 적용.
<script src="java script 파일 주소"> </script> : java script 외부 파일 적용.
<body> </body>
: 몸통글(바디). 문서의 내용이 들어감.
바디 내부 주요 요소
<div> 내용 적기</div> : 구역을 나눔. 즉, 뜻없는 태그이다. 대표적인 block요소 중 하나이다.
이하로는 각각 의미를 가진 태그이며 의미적 태그(Semantic Tag)라고 부른다.
<h1> 내용 적기(머리글) </h1> : head. 머리글 내용. h1, h2 이런 식으로 크기를 조절할 수 있다. 숫자는 1~6까지
<p> 내용적기(문단) </p> : paragraph. 문단 내용. 문단마다 <p>를 써서 열고 </p>를 써서 닫아줘야 한다.
<strong> 내용적기 </strong> : <strong> 이나 <b>는 bold. 글자를 굵게 표현해줌. 시작부분과 끝 부분에 위치.
<b> 내용적기 </b>
<em> 내용적기 </em> : <em> 이나 <i>는 Italic. 글자를 기울여줌. 마찬가지로 원하는 글자 부위 시작과 끝 부분에 위치.
<i> 내용적기 </i>
<mark> 내용적기 </mark> : 형광펜. 마찬가지로 원하는 글자 부위 시작과 끝 부분에 위치.
<br> : <br>의 경우 ENTER 쳐서 글을 내려주는 효과를 준다. 내용 사이에 들어가도 되고 별도로 사용해도 된다.
<hr> : horizontal. 구분선
<blockquote> 내용적기(문단) </blockquote> : 문단 앞에 공백. tab키를 누른 효과를 낼 수 있다. 여러개 쓰면 여러번 tab한 효과를 낼 수 있지만 결국엔 다 닫아줘야 한다.
<img src="사진 경로"> : image source. 이미지 삽입. 확장자 이름까지 적어주어야 합니다.(jpg, png 등)
<img src="사진경로" alt="사진 내용"> : alternative. 이미지가 깨져서 안 보이는 경우에 나타나는 글귀. 시각장애인에게 전달하기 위한 내용.
기본 명령 = 코드 (Ex. <img> <h1> <p> 등)
명령 속 속성 = 속성 (Ex. <img src=""> <input type=""> <label id=""> 굵은 글씨 부분)
메모 : <!-- 내용 -->
style
1) 선택자 우선 순위
*(전체) < 태그 < class < id : 선택지가 좁을 수록 우위를 갖는다
2) 여러 태그를 ,(컴마)를 통해 묶어서 스타일을 줄 수 있다.
3) [](대괄호) : 속성 선택자
4) 코드>코드 : 직속 자손 지칭.
| HEADER | |
| ASIDE(메뉴창) | CONTENT |
글자 형식 태그
| <b> | <i> | <small> | <sub> | <sup> | <ins> | <del> |
| 글자 굵게 | 글자 기울게 | 글자 작게 | 아래 첨자 | 위 첨자 | 밑줄 글자 | 취소선 |
태그 분리
| 블록 | <div> | <h1~h6> | <p> | <ul><ol><dl><li> | <table> | |
| 뜻 없는 태그 | 머리글 | 문장 | 목록 | 도표 | ||
|
인라인 코드 |
<span> | <a> | <input> | <strong><b> 등 | ||
| 뜻 없는 태그 | 링크(anchor) | 체크박스, 검색창 등 |
문자 효과 | |||
display 속성 : 속성을 다른 것으로 바꿀 수 있음. (Ex. 블록 속성코드를 인라인으로)
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [CSS/기초] 기본 설명 + 글상자 만들기 (0) | 2019.06.24 |
|---|---|
| [html/기초] html 내부에 메모(/* */ , <!-- -->) (0) | 2019.06.24 |
| [html/기초] 기입창 종류 (input, text, checkbox, select 등) (0) | 2019.06.20 |
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
| [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) (1) | 2019.06.18 |
