강의제목 : 비전공자를 위한 HTML/CSS
제공 : 네이버부스트코스
공부일자 : 2021.11.26
🌏1.HTML이해하기
💫1-1 HTML & CSS 기초소개
Hyper Text Markup Language
-웹 페이지를 만드는 언어
-텍스트를 초월 ( hyper text ) = 링크
-마크업 언어는 정보를 구조적으로 표현
-확장자가 html
-90년대 개발된 언어 : 연구원들의 신속한 정보 공유를 위해 만들어짐
관련 참고 자료
https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
💫1-2 HTML 문법- 태그
태그 사용 방법
태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어감
대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙임
시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치
요소 참고 자료
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
💫1-3 HTML 문법- 속성
속성
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값
속성의 선언 순서는 태그에 영향을 미치지 않으며, 결과값도 같음
여러 속성을 선언할 때는 공백으로 구분해서 사용
<h1 id='title' class='test'>Hello, HTML</h1>
HTML 특성 참고서
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN
HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.
developer.mozilla.org
https://www.w3schools.com/tags/ref_standardattributes.asp
HTML Global attributes
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
💫1-4 HTML 문법- 태그 중첩
태그는 중첩이 가능
안에 선언되는 태그는 반드시 부모 태그를 벗어나서는 안됨
<h1> Hello, <i>HTML</i></h1>
마크업 검증 서비스 (맞춤법 검사기와 비슷)
The W3C Markup Validation Service
파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사
validator.kldp.org
💫1-5 HTML 문법- 빈 태그
빈태그는 내용이 없어서 종료 태그가 필요 없음
내용만 비어있을 뿐 속성을 통해 화면에 나타나거나, 나타나지 않아도 다른 용도로 사용됨
대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우
<br>
<image src="">
빈 태그 추가 자료
https://developer.mozilla.org/ko/docs/Glossary/Empty_element
빈 요소 - 용어 사전 | MDN
빈 요소는 HTML, SVG, MathML의 요소 중 자식 노드를 가질 수 없는 요소입니다.
developer.mozilla.org
💫1-6 HTML 문법- 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시
💫1-7 문서의 기본 구조
<html>요소
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있음
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미
<head>태그에 위치하는 태그들은 브라우저 화면에 표시 안 됨
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됨
https://www.w3schools.com/tags/tag_meta.asp
HTML meta tag
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
https://www.w3schools.com/tags/tag_body.asp
HTML body tag
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
https://www.w3schools.com/tags/tag_head.asp
HTML head tag
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
https://www.w3schools.com/tags/tag_html.asp
HTML html tag
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
https://www.w3schools.com/tags/tag_doctype.asp
HTML doctype declaration
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, CSS' 카테고리의 다른 글
| [강의] 비전공자를 위한 HTML/CSS : PART5 단위, 배경, 박스모델 (0) | 2021.11.29 |
|---|---|
| [강의] 비전공자를 위한 HTML/CSS : PART4 CSS 이해하기 (0) | 2021.11.29 |
| [강의] 비전공자를 위한 HTML/CSS : PART2 HTML 태그 (0) | 2021.11.28 |