W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
> HTML
1. HTML 은 Hyper Text Markup Language 의 약자
2. HTML 은 웹 페이지를 만드는 표준 마크업 언어 (각각의 브라우저마다 표준이 있음 / 우리는 크롬을 기준으로 배울 예정)
3. HTML 은 웹 페이지의 구조를 명시 (웹 페이지를 어떻게 구성할지 결정)
4. HTML 은 element(요소) 들로 이루어져 있음
5. HTML 의 element 는 content 를 어떻게 표시해야 하는지 브라우저에게 알려줌
> element
element 는 start tag, content, end tag 로 이루어져 있음
<tag> content </tag>
tag
< 태그이름 >
태그이름은 대소문자 구분이 없음 (ex. <h1> = <H1>, 하지만 소문자로 쓰는 것이 일반적)
start tag, end tag
시작태그, 종료태그는 이름 동일(종료태그는 이름 앞에 '/'), 항상 쌍으로 존재
시작태그와 종료태그 사이에 content 위치
각 element 는 서로 섞이면 안됨
안되는 예시1
<h1> 제목 <p> 입니다. </h1> 문단 입니다. </p>
안되는 예시2
<html>
<body>
<h1>My First Heading
</body> </h1>
</html>어떤 element 는 다른 element 에 포함될 수 있음
<html>
<body>
<h1>My First Heading</h1>
</body>
</html>
-> html 안에 body, h1
-> body 안에 h1
* 빈 요소 empty element
시작태그만으로 요소가 완성됨 (ex. <br>: 줄바꿈 역할)
'/'가 태그이름 끝에 작성되는 경우도 있음 (ex. <br /> = <br>, <tag /> = <tag></tag>)
<p>This is <br> paragraph with a line break.</p>주의. 빈 요소가 아니면 종료태그 생략 불가
> tag
1. doctype <!DOCTYPE html>
가장 상단에 위치
해당 문서가 html 문서임을 나타냄
브라우저에게 문서에서 사용한 태그, 속성의 버전을 전달
2. html <html>
html 문서 전체(head, body)를 포함하는 root element
3. head <head>
브라우저에게 전달하는 부가적인 웹페이지의 정보를 포함
예를 들어, 작성된 코드가 EUC-KR 인데 head 에 전달된 정보가 UTF-8 이라면 출력이 정상적으로 되지 않음
하나만 작성
(1) title <title>
웹페이지의 이름
(2) style <style>
작성된 코드가 페이지에 어떻게 표시될 지 설정
4. body <body>
웹페이지에 실제로 표시되는 부분을 포함
하나만 작성
제목(h1~h6), 문단(p), 표(table) 등의 element 를 포함
(body에 들어갈 element가 head에 들어가면 안된다)
(1) heading <h1> ~ <h6>
제목
<h1>부터 <h6>까지 있음
1이 가장 크고 6으로 갈수록 작아짐
(2) paragraph <p>
문단
하나의 element 는 한줄로 출력됨
엔터/여러번의 스페이스 → 한번의 스페이스로 출력됨
줄바꿈은 <br> 사용 / 여러번의 스페이스는 여러번 작성
각 element 사이에는 간격이 존재
(3) horizontal rule <hr>
수평자
섹션을 구분해주는 구분선이 그어짐
(4) preformatted text <pre>
엔터/스페이스 등 모두 작성된 대로 표시됨
기본 설정된 폰트가 다름
5. comment <!-- --!>
주석은 웹페이지에 표시되지 않음
→ HTML Tag Reference 참고 (w3schools 혹은 MDN)
> entity
특수문자 작성 시 사용
스페이스 →
< → <
> → >
예시)
<p><br>은 새로운 줄이다.</p>
→ 참고 https://www.w3schools.com/html/html_entities.asp
HTML Entities
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
> element 사이의 관계
<!DOCTYPE html>
<html>
<head>
<title>element</title>
</head>
<body>
<h1>Lorem, ipsum dolor.</h1>
<p><span>Lorem, ipsum dolor.</span></p>
</body>
</html>1. 부모요소 - 자식요소
부모요소는 해당 요소를 가장 가까이 감싸고 있는 요소
ex. span의 부모요소는 p, p의 부모요소는 body, h1의 부모요소는 body, body의 부모요소는 html
2. 조상요소 - 자손요소
어떤 요소의 부모요소의 부모요소는 조상요소
ex. h1의 조상요소는 html, html의 자손요소는 h1
3. 형제요소
같은 부모를 둔 요소는 형제요소
ex. h1과 p는 형제요소
> vscode
* 이용방법
파일명.html 로 파일 생성 - 코드 작성 - 저장 후 해당 탭을 브라우저 탭으로 이동하여 결과 확인 - 만약 코드 변경 시 저장 후 브라우저 새로고침
* lorem
쓸데없는 내용이 무작위로 쓰여짐
몇개의 단어로 이루어진 문장을 작성하고 싶으면 lorem(단어 수) 입력
여러개를 작성하고 싶으면 lorem*(개수) 입력
ex. lorem5*3 → 5개 단어로 이루어진 문장이 3개 작성됨
* 단축키
emmet - 빠른 코딩을 위해 사용하는 플러그인, vscode에 기본으로 설치되어있음
(더 많은 내용은 emmet cheat sheet 검색)
1. <html>, <head>, <title>, <body> 빠르게 작성하는 방법
1) File - Preferences - User Snippets 에서 html 검색 후 원하는 코드 작성 해당 코드가 자동완성 되도록 함
2) html>head>title^body 작성
2. 태그 작성
1) > : 태그명1>태그명2 - 태그1 안에 태그2가 속하게 됨 (태그1이 태그2의 부모요소)
2) ^ : 태그명1>태그명2^태그명3 - 태그3이 태그1과 형제요소로 작성됨 (두번 ^^ 작성하면 한단계 더 위로 올라감)
3) * : 태그명*개수 - 태그가 여러개 작성됨
4) + : 태그명1+태그명2+태그명3 - 태그1, 2, 3 이 형제요소로 작성됨
ex. p*3>lorem → lorem 을 content 로 갖는 p 태그 3개 생성
ex. h1>lorem3+sub>lorem2 → <h1>lorem3<sub>lorem2</sub></h1>
3. attribute 작성 : 태그명[attribute명] - attribute 를 갖는 태그 작성
여러개의 attribute 작성 : 태그명[attribute명1 attribute명2 atrribute명3 ...]
attribute 값까지 작성: 태그명[attribute명="값"]
ex. h1*2[style]>lorem3 → 3 단어로 이루어진 lorem 을 content 로 갖고 attribute 로 style 을 갖는 h1 태그 2개 생성
* class attribute 작성: 태그명.class값 (ex. h1.memo → <h1 class="memo">)
* id attribute 작성: 태그명#id값 (ex. h1#head1 → <h1 id="head1">)
* selector combinator 작성 ex. h1#head1.error.note → <h1 id="head1" class="error note">
* 태그명 생략해면 태그는 자동으로 div 로 작성됨
4. content 작성: 태그명{content}
5. alt 를 누른 채로 커서를 여러 개 잡아서 한번에 코드 작성 가능
6. 태그 수정 시 시작태그와 종료태그를 한번에 수정하려면 커서를 태그에 위치시키고 f2를 눌러 수정
7. 주석: ctrl + /
주석처리 해제는 한번 더 ctrl + /
페이지 소스 보기에서 보이므로 중요한 내용은 작성하지 말 것
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
| day06 - link, pseudo class, combinator (0) | 2021.10.23 |
|---|---|
| day05 - font (0) | 2021.10.22 |
| day04 - box model (0) | 2021.10.20 |
| day03 - CSS, selector, combinator (0) | 2021.10.16 |
| day02 - attribute, element (0) | 2021.10.12 |
