*네이버 부스트코스의 웹 ui개발 공부한 것 정리*
1) HTML이란?
- Hyper Text Markup Language의 준말로 웹페이지를 만들 때 사용 됨
- Hyper Text (=링크, 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트를 의미)
- Markup Language (=정보를 구조적, 계층적으로 표현가능한 언어를 의미)
- 확장자가 html
- (90년대 초반에 만들어 짐)
2) HTML 문법 - 태그(TAG)
- '자음'과 '모음'이 모여서 하나의 단어를 만들고 문장을 만들어 내는 한글처럼, 태그도 각각의 태그들이 모여서 하나의 요소를 만들고 HTML 문서를 만들어 냄
- HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙임
- '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됨. 즉, 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현
- 태그는 <,> 기호로 표현하며 <,> 기호 사이에 태그 이름이 들어감
- 대부분의 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙음
- 예시) <h1>Hello, HTML</h1>
- 위 코드에서 h1은 태그 이름이며, Hello, HTML은 내용임 => 시작태그+내용+종료태그를 합쳐서 요소라고 부름
- 즉 요소란? 내용을 포함한 태그 전체를 의미 (**태그와 요소를 혼동하지 않도록 주의)
3) HTML 문법 - 속성(ATTRIBUTE)
- 속성은 태그의 동작을 좀 더 구체적으로 제어하기 위해 사용됨 (태그에 고유한 이름을 부여하거나 이동할 경로를 명시하는 등 태그에 구체적인 기능을 제공)
- 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미
- 이름 = "(속성) 값" 으로 표현
- 예시) <h1 id="title">Hello, HTML</h1>
- 위 코드는 <h1> 태그에 id 속성을 추가해 title 값을 선언한 코드임
- 의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 사용할 수도 있음, 공백으로 구분
- 예시) <h1 id="title" class="main">Hello, HTML</h1>
- 위 코드는 <h1> 태그에 id와 class 2개의 속성을 선언한 코드임
- 여러 속성을 동시에 사용할 때, 속성의 선언 순서는 태그에 영향을 미치지 않음
- 속성의 종류: 모든 태그에 사용가능한 글로벌 속성, 특정 태그에서만 사용가능한 속성, 선택적으로 사용가능한 속성, 특정 태그에서는 반드시 사용해야하는 필수 속성 등 (id, class는 글로벌 속성)
4) HTML 문법 - 태그 중첩(NESTING TAGS)
- 태그 안에 또 다른 태그를 사용하는 것을 의미
- 태그 중첩을 통해 부모 태그와 자식 태그의 관계가 형성됨 (태그를 중첩해서 사용 시 중첩되는 자식 태그는 부모 태그를 벗어나선 안됨)
- 올바른 예시) <h1>Hello, <i>HTML</i></h1>
- 잘못된 예시) <h1>Hello, <i>HTML</h1></i>
- 태그 안에서 중첩이 얼마나 되는지 어떤 태그를 쓰는지는 문제가 되지 않음, 하지만 때에 따라 정해진 태그만 중첩 할 수 있기도 함.. (나중에 배움)
5) HTML 문법 - 빈 태그(EMPTY TAG)
- 태그의 중첩이 불가능한 태그를 가리킴
- 일반적으로 태그는 시작 태그와 종료 태그 2개가 1쌍을 이루고 그 사이에 내용이 들어감
- 하지만 태그 중에는 그렇지 않은 태그도 존재함 (시작 태그만 존재하는 경우, 내용 역시 비어있음)
- 예시) <br>, <img src="">, <input type="">
- 빈 태그는 내용 부분만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그들 임
- 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우임 (이미지나 비디오처럼 외부 리소스를 삽입하는 경우, 이런 태그를 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 함)
6) HTML 문법 - 공백(SPACE)
- HTML 공백은 일반 텍스트 공백과 차이가 있음
- 기본적으로 HTML에서는 두 칸 이상의 공백을 모두 무시함
- 예시)
<h1>Hello, HTML</h1>
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>
- HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 텍스트가 모두 같게 화면에 나타나게 됨
- 이러한 공백처리는 CSS로 제어해야 함
7) HTML 문법 - 주석(COMMENT TAGS)
- 주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미 (다른 언어의 주석과 동일)
- <!-- 내용 --> 으로 표현
- 예시)
<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
<!-- 주석은 여러 줄로 작성할 수도 있습니다.
<h1>Hello, HTML</h1>
위 <h1>태그는 브라우저가 해석하지 않습니다.
-->
- vscode에서는 python과 동일하게 Ctrl+/ 사용하면 주석처리 가능
8) HTML 문법 - HTML 문서 구조(HTML DOCUMENTS)
- HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 가장 기본적인 내용임
- 문서 타입 정의(DOCTYPE): 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 함, doctype을 선언하지 않거나 잘못 선언하면 브라우저는 해당 문서를 비표준 방식으로 해석하기 때문에 반드시 규칙에 맞게 선언해주어야 함
- 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> 요소: 문서 타입 선언 후에는 <html>태그가 와야 하고, 자식으로는 <head> 태그와 <body>태그가 있음, <html>태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 나타내 줌
- <head> 요소: <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음, 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 함, <meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정함 (UTF-8은 가장 많이 사용되는 가변 길이 유니코드 인코딩 방식..), <title>태그에는 해당 페이지를 짧게 요약하여 내용으로 지정하면 됨 (해당 내용은 탭 바에 노출됨, 문서의 제목이라고 생각하면 됨)
- <body> 요소: <body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 작성될 것임
'HTML&CSS' 카테고리의 다른 글
| 6. 폰트, 텍스트 (0) | 2022.09.30 |
|---|---|
| 5. 단위, 배경, 박스모델 (0) | 2022.09.30 |
| 4. CSS 이해하기 (0) | 2022.09.15 |
| 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 (0) | 2022.09.13 |
| 2. HTML 태그 (0) | 2022.09.13 |