HTML : structure . 구조 . 웹페이지 구조를 담당하는 markup 언어
CSS : Presentation . 스타일 . 디자인요소를 시각화하는 stylesheet 언어
JS : Interaction . 상호작용 . 단순한 언어를 프로그램으로 만들어 유저와 상호작용하게 해주는 프로그래밍 언어
<!-- 안녕하세요 -->
F12 소스 참조를 했을 때, 주석을 확인할 수 있다.<% -- 잘가세요 --%>
F12 소스 참조를 하더라도 주석이 안보임./* ~~~ */
- tag : <>(부등호)로 묶인 HTML의 기본 구성 요소
<html> <!--html 태그 -->
<body> <!--body 태그 -->
- HTML 문서 시작 : 선언
- html
- head
- title
- body
- h1 : Hello world
- div : Contents her
- span : Here too!
html의 자식 head, body
body의 자식 h1,div , div의 자식 span , title의 부모 head
시맨틱(Semantic) 태그 : 의미있는 태그
- 개발자로 하여금 문서의 의미론적인 구조를 쉽게 파악할 수 있게 해준다.
- 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색을 하도록 만든다. 쉽게 검색되어지게 만들어준다.
<div> 태그 // non-semantic 태그 . 들어간 내용의 의미를 알 수가 없음. <table>, <article> 등의 태그 // semantic 태그 . 대략이라도 태그 안에 들어갈 내용의 의미를 유추 가능
시맨틱 태그 | 설명 |
---|---|
<header> | 화면 상단에 위치하는 사이트나 문서의 정보를 정의 |
<nav> | 문서의 네비게이션 항목을 정의 |
<main> | 문서의 주가 되는 컨텐츠를 정의 |
<aside> | 페이지의 주요 내용 외의 내용을 정의. 페이지의 주요 내용 주변(사이드바)에 위치하여 관련된 내용을 배치할 수 있다. (예)광고 |
<footer> | 화면 하단에 위치하는 사이트나 문서의 정보를 정의 |
<section> | 문서의 section은 하나의 주제를 그룹할 때 사용 (자동차, 건축 등..) |
<article> | section내에서 하나의 기사를 article 태그로 감쌀 수 있음. 그런데 article 내에서도 section 태그가 있을 수 있음. |
<details> | 사용자가 보거나 숨길 수 있는 추가적인 세부 정보를 정의한다. |
<summary> | details에 대한 보이는 요소를 정의 |
<figure> | 사진이나 다이어그램과 같은 부가적인 요소를 정의 |
<figcaption> | figure에 대한 자막 정의 |
<mark> | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
<time> | 날짜 / 시간 정의 |
<></>
<!DOCTYPE html> <!--이 문서가 html문서임을 명시. 선언-->
<html> <!--html 시작 태그로, 문서 전체의 틀을 구성-->
<head> <!--head 태그는 문서의 메타데이터를 선언-->
<title>Page title</title> <!--문서의 제목, 브라우저의 탭에 보여짐-->
</head> <!--</태그이름>은 해당 태그가 끝났음을 의미-->
<body> <!--body 태그는 문서의 내용을 담는 곳-->
<h1>Hello world</h1> <!--heading을 의미하며, 크기에 따라 h1~h6까지 있음-->
<div>Contents here <!--content division을 의미, 줄바꿈됨-->
<span>Here too!</span> <!--줄바꿈이 없는 content 컨테이너-->
</div> <!--div 태그가 끝났음을 의미-->
</body> <!--body 태그가 끝났음을 의미-->
</html> <!--html 태그가 끝났음을 의미-->
<tag/>
와 같이 표현 가능<img src = "codestates-logo.png"></img>
<img src = "codestates-logo.png" />
태그 | 뜻 | 설명 |
---|---|---|
<h1> | 제목태그 | 한줄을 차지. <h1>로 시작해서, <h2>, 순차적으로 기입 |
<div> | Division | div 태그는 한줄을 차지 |
<span> | span | span 태그는 컨텐츠 크기만큼 공간 차지 |
<p> | paragraph | 하나의 문단을 표현 . 한줄을 차지 |
<img> | Image | 이미지 삽입. self-closing tag |
<a> | Link | 링크 삽입 |
<ul>&<li> | Unordered List & List Item | ul순서없는리스트. li순서있는 넘버링리스트 |
<input> | Input(text, checkbox, radio) | 입력창. self-closing tag |
<input type="text"> | Input(text) | ID 입력창 |
<input type="password"> | Input(password) | password 입력창 |
<input type="checkbox"> | Input(checkbox) | 중복체크 가능 |
<input type="radio" name="choice"> | Input(radio) | 여러개 중 하나 선택. name으로 묶어야 함 |
<textarea> | Multi-line Text Input | 줄바꿈이 되는 입력폼 |
<button> | Button | 버튼기능 |
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>제목</title>
</head>
<body>
<div>div 태그는 한줄을 차지 합니다.</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>
<img src="codestates-logo.png" />
<a href="http://codestates.com" target="_blank">코드스테이츠</a>
<!--순서없는 리스트-->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has nested list</li>
<ul>
<li>Item 3-1</li>
</ul>
</ul>
<!--순서있는 넘버링 리스트-->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has nested list</li>
<ol>
<li>Item 3-1</li>
</ol>
</ol>
<!--Input - Id, Password 창-->
<div>
ID <input type="text" placeholder="type here">
</div>
<div>
Password <input type="password">
</div>
<!--Input - radio, checkbox 창 -->
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="a"> a
</div>
<div>
<input type="checkbox" checked> checked
<input type="checkbox" > unchecked
</div>
<!--textarea -->
<textarea></textarea>
<!--button -->
<div>
<button>로그인</button>
</div>
</body>
</html>
- input - radio 속성 설명
<input type="radio" name="choice" value="a">
- name : name의 값이 같은 것 중에서 하나를 선택합니다.
- value : 선택했을 때 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.