HTML/CSS (1)
내용 전부를 정리하진 않습니다! 나에게 필요한 내용만 ㅎ...
Web은 무엇인가요?
World Wide Web의 재귀적 용어 (feat. WWW, W3)
웹은 인터넷을 통해 접근할 수 있는 공용 웹페이지의 상호 연결 시스템이다.
Web과 Internet은 다른 의미이며 웹은 인터넷을 기반으로 한 서비스 중 하나이다.
World Wide Web은 세가지의 기능으로 구분해볼 수 있다. (wikipedia)
1. 통일된 웹 자원의 위치 지정 방법 : URL
2. 웹의 자원 이름에 접근하는 프로토콜 : HTTP
3. 자원들 사이를 쉽게 이동할 수 있는 언어 : HTML
HTML과 CSS는 무엇인가요?
HTML
HyperText Markup Language 의 약자로
HyperText는 정해진 순서 없이, 참조를 통해 문서 간 접근이 가능한 텍스트를 말하고Markup Language는 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어를 말한다.
▪️ HTML은 웹을 구성하는 가장 기초 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의한다.
▪️ HTML은 요소(elements)로 구성되어 있다.
✔️ HTML 기본 구조
<!DOCTYPE html>
<html lang="ko-KR">
<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>
<!-- CSS -->
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<!-- JavaScript -->
<script src=""></script>
</body>
</html><!DOCTYPE html> : html Living Standard 문서라는 의미로 해당 코드를 통해 어떤 모드로 페이지 렌더링을 할지 결정한다. → 완전 표준 모드로 렌더링
❓ 표준 모드와 호환 모드
과거 웹 페이지는 넷스케이프 내비게이터용과 마이크로소프트 인터넷 익스플로러용의 두 가지 버전으로 만들어져, W3C 웹 표준 제정 당시 기존 브라우저들이 표준을 기반으로 표현할 수 없었다. 따라서, 브라우저들은 새로운 표준 제작 사이트와 예전 방식으로 제작한 사이트를 렌더링하기 위해 두 가지 모드를 제공하였다.
호환 모드는 기존 방식으로 제작된 웹사이트들을 표현하기 위해 비표준 동작들을 지원한다.
완전 표준 모드에선 HTML과 CSS에 의해 웹 페이지가 표시된다.
→ !DOCTYPE html 을 선언하는 이유는 웹 브라우저가 렌더링을 결정할 때 문서 첫 부분에 DOCTYPE을 참조하여 완전 표준 모드로 렌더링하기 때문이다.
❓ 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. (파싱은 밑에서 설명)
<html> : HTML 문서의 루트, 최상단 요소이다.
▪️ lang 속성을 통해 해당 페이지의 주 언어를 설정한다.
▪️ 주 언어는 검색엔진, 스크린리더, 번역 기능 제공에 영향을 미친다.
| 언어코드 | 언어 | 국가코드(국가) |
|---|---|---|
| ko | 한국어 | KR(대한민국), KP(북한) |
| en | 영어 | US(미국), GB(영국), PH(필리핀) |
| zh | 중국어 | CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체) |
| ja | 일본어 | |
| de | 독일 |
▪️ head : 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
- 검색엔진을 위한 다양한 정보가 담긴다.
- meta data는 어떤 목적을 위해 만들어진 데이터를 말하며, 검색엔진은 메타정보를 보고 페이지의 다양한 정보를 가져간다.
▪️ <meta charset="UTF-8"> : 문자 코드의 종류를 설정해주는 역할, utf-8 이 전 세계적인 언어들을 지원해준다.
▪️ <meta http-equiv="X-UA-Compatible" content="IE=edge"> : 브라우저 호환성과 IE의 최신 표준 모드를 보여주기 위해 작성된다.
▪️ <meta name="viewport" content="width=device-width, initial-scale=1.0">
- name은 전체 페이지에 적용되는 문서 레벨 메타데이터를 제공하며, 어떤 형태의 정보를 가졌는지 의미한다. content는 실제 메타데이터의 요소로 name과 함께 사용하여 문서의 메타데이터를 이름-값 쌍으로 제공한다.
- width는 뷰포트의 너비를 제어, height는 높이를 제어한다.
- initial-scale : 페이지가 처음 로드 될 때 확대/축소 수준을 제어한다.
- minimum-scale: 축소 정도를 제어한다.
- maximum-scale: 페이지에 허용되는 확대 정도를 제어한다. (3보다 작은 값은 접근성 ❌)
- user-scalable=no 속성을 주어 사용자가 화면크기를 제어 못하게 하는 경우도 있지만 다양한 디바이스 크기, 노안, 저시력 등의 상황을 고려해야 하므로 사용하지 않는 것이 좋다.
▪️ title : 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. (특수 문자, 60자 넘는 길이 ❌)
- 하위 페이지로 들어갈 시 하위 페이지의 이름이 앞에 오고 대제목은 뒤에 넣는 것이 웹 접근성 측면에서 좋다.
▪️ link : 현재 문서와 외부 리소스를 연결한다.
- 외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용한다.
- 빈 태그, 속성만 포함한다.
- head 태그 내부에만 위치할 수 있다.
- rel : relations, 대상 파일의 속성을 나타낸다.
- href : hyper-references, 연결 시 참조할 파일의 위치를 나타낸다.
▪️ body : 사용자에게 보이는 영역이다.
CSS
Cascading Style Sheets 의 약자로 위에서 아래로 흐르는 스타일 시트를 뜻하며 웹페이지의 모양과 표현을 담당한다.
▪️ CSS에서 스타일이 적용될 땐 우선순위를 가지고 적용된다.
▪️ HTML의 스타일, 레이아웃 등을 꾸미는 역할을 한다.
▪️ 개별 인라인 스타일 적용, 태그 선택자, 그룹 선택자, 상속을 이용하는 방법들이 있다.
✏️ 내가 몰랐던 CSS 적용방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>/* style.css */
/* @import 는 문서 최상단에 있어야 한다. */
@import url("reset.css");
@import url("~~~~.css");
@import url("~~~~~.css");
@import url("~~~~~~.css");CSS 파일 안에 여러 CSS 파일을 import 하여 HTML 문서 내에선 CSS가 한 개만 나오도록 하는 방법이다.
⚠️ 이 방법의 주의 사항
▪️ 성능 측면에서 CSS 파싱 시간을 증가시킨다.
▪️ import로 가져온 CSS 파일을 병렬로 다운로드 할 수 없어 렌더링 프로세스의 지연시간이 증가한다.
▪️ CSS 파일을 합치거나 분리하여 필요한 상황에만 사용되도록 최적화가 필요하다. (→ 번들러 사용)
❓ 파싱 parsing
파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.
❓ @at-rule
@가 붙는 문법을 at-rule이라고 부른다.
@charset : 스타일시트에서 사용하는 문자 인코딩 지정
@import : 다른 스타일시트에서 스타일 규칙을 가져옴
@font-face : 디바이스에 없는 폰트를 다운받아 적용
@keyframes : 애니메이션 제작 시 사용
@media : 사용자 디바이스에 따른 스타일 분기 처리
@supports : 특정 CSS 속성을 브라우저가 지원하는 지 확인 후 선언
✔️ CSS 선택자
| CSS 선택자 | 설명 |
|---|---|
| * | 전체 선택자 |
| h1 (특정 태그) | 타입(유형) 선택자 |
| # | 아이디 선택자 (HTML 페이지 내에 유일해야 함) |
| . | 클래스 선택자 |
| [ ] | 특성 선택자 |
| , | 그룹 선택자 |
| 자손 선택자 (자식, 자손 모두 선택 가능) | |
| > | 자식 선택자 |
| ~ | 일반 형제 선택자 |
| + | 인접 형제 선택자 |
▪️ CSS는 형제 요소를 선택할 때 선택한 뒷 요소(들)에만 적용 (이전 요소 선택 ❌)
▪️ ~는 뒤 형제 요소 전체, +는 바로 뒤 형제 요소 하나
✔️ CSS 상속
부모 요소에서 설정된 일부 CSS 속성 값이 자식 요소에게 상속되지만, 상속되지 않는 속성도 있다.
⚠️ width, height, margin, padding, border와 같은 것은 상속되지 않는다.
| 속성 | 의미 |
|---|---|
| inherit | 선택한 요소에 적용된 속성값을 부모와 동일하게 상속받는다. |
| initial | 브라우저 기본 스타일 속성을 따르게 한다. |
| unset | 속성을 자연 값으로 한다. 자연적으로 상속되면 inherit, 아니면 initial 처럼 작동한다. |
⚠️ button, input 요소와 같이 form 관련 태그들은 브라우저별로 적용된 스타일이 있어 상속받지 않기도 한다.
✔️ 단위
▪️ px (pixel)
디바이스 화면에서 이미지를 표현하는 가장 작은 단위
고정된 값 (절대 길이 단위)
반응형 웹, 접근성, UX 측면을 고려하여 적절한 곳에서만 사용하는 것을 추천한다.
▪️ %
부모 요소를 기준으로 하는 백분율 단위
▪️ vw, vh
뷰포트 넓이, 높이를 기준으로 하는 백분율 단위
1vw = 화면의 1%
⚠️ %는 자기 부모 요소의 비율이고, vw는 뷰포트가 기준이라 같은 수치여도 다르게 보인다.
▪️ vmin, vmax
화면의 넓이와 높이 중 작은 값, 큰 값을 기준으로 하는 백분율
▪️ em
부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위
폰트 사이즈에 따라 조절되야 하는 값 설정 시 추천
▪️ rem (root em)
최상위 요소(<html>)의 글자 크기를 기준으로 하는 배수 단위
<html>의 기본 폰트 사이즈는 16px
폰트 사이즈 설정 시 추천
참고자료
요소 간의 관계
구역별 HTML 태그 이용
참고자료 사진출처 : 위니브
