HTML, CSS | Notion

HTML과 CSS 선택자 및 속성에 대해 알아보자!

HTML: 집의 구조 CSS: 인테리어 JS: 집의 기능

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>문서제목</title>
    <link rel="stylesheet" href="">
    <style></style>
</head>
<body>
    <h1>Hello World</h1>    
</body>
</html>

<head>태그 안에는 <body>태그의 정보를 읽어들이기 위한 정보가 존재한다.

<body>태그 안에는 웹 브라우저에 출력되는 모든 요소가 위치한다.

웹페이지의 구조는 중첩관계(부모-자식 관계)로 표현한다. => 들여쓰기 매우 중요!

대표적인 태그(Tag) 종류

제목: <h1~6></h1~6>
본문: <p></p>
목록: <ul></ul> -> 순서가 없는 목록 / <ol></ol> -> 순서가 있는 목록 => 자식태그로 <li>를 갖는다.
줄바꿈 / 수평 줄: <br /> / <hr />
이미지: <img src=" " alt=" ">
하이퍼링크: <a href=" " target="_blank(새 탭) or _self(현재 탭;default)></a>
입력값: <form></form>
- <input>: type(text, password, email, radio, date, checkbox 등)
- <label>: input태그의 id와 label의 for값이 일치할 경우 세트로 묶여 label을 클릭해도 해당 input에 포커싱
- <select>: 드롭다운 형식의 셀렉트 폼(option으로 보기 생성)
표: <table></table>
- <th>: 표 제목 칸
- <tr>: 표의 행
- <td>: <tr>안의 일반 칸
  - colspan: 열의 수 지정
  - rowspan: 행의 수 지정
문자꾸미기 태그:
- <b>: 두껍게
- <strong>: 두껍게(semantic함)
- <i>: 이탤릭
- <em>: 강조. 기울임(semantic함)
- <del>: 중간줄
- <u>: 밑줄

HTML은 Semantic하게 작성되어야 유지보수 및 코드의 가독성이 좋아진다! + SEO(검색최적화)