💡 WEB
인터넷을 통해 접근할 수 있는 공용 웹페이지의 상호 연결 시스템
HTML
HyperText Markup Language의 약어로, 웹을 이루는 가장 기초적인 구성요소
웹 콘텐츠의 의미와 구조를 정의
CSS
Cascading Style Sheets의 약어로, 웹페이지의 모양과 표현을 꾸미는데 사용
JS
JacaScript의 약어로, 웹페이지의 기능과 동작을 제어
💡 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>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
<script src="./script.js"></script>
</body>
</html>- <!DOCTYPE html>
'이 문서는 html Living Standard 문서'라는 의미
코드에서 이 부분을 제거하면 브라우저는 쿼크 모드로 html을 렌더링한다.
웹 브라우저의 두가지 렌더링 모드
· 표준모드(Standard mode) : 브라우저가 출력하고자 하는 문서가 최신이라고 판단시 렌더링
CSS의 스펙에 따라 CSS가 적용
· 쿼크모드(Quirks mode) : 브라우저가 예전 문서라고 판단시 렌더링
이전 세대의 브라우저에 맞는 비표준적 방법의 CSS가 적용
- html
lang 속성을 통해 해당 페이지의 주 언어를 설정
주 언어 설정은 검색 엔진, 스크린리더, 번역 기능 제공등에 영향을 미침
| 한국어 | 영어 | 중국어 | 일본어 | 독일어 |
|---|---|---|---|---|
| ko | en | zh | ja | de |
- head
기계가 식별할 수 있는 문서 정보 담음
검색 엔진을 위한 다양한 정보들이 담김
- body
사용자에게 보이는 영역
💡 CSS
작성방법
주석
/* 주석 */텍스트 모두 파란색으로 변경
<section>
<h1>Hello world!</h1>
<h2>My name is Yunbi</h2>
<p>Nice to meet you</p>
</section>- 개별 인라인 스타일 적용
<section>
<h1 style="color:blue;">Hello world!</h1>
<h2 style="color:blue;">My name is Yunbi</h2>
<p style="color:blue;">Nice to meet you</p>
</section>- 태그 선택자 적용
h1 {color:blue;}
h2 {color:blue;}
p {color:blue;}- 그룹 선택자로(,) 적용
h1,
h2,
p {color:blue;}- 상속 이용하기
section {
color:blue;
}CSS 적용
인라인 방식
태그 자체에 style 속성으로 스타일을 주는 방식
<h1 style="color:blue;">Hello world!</h1>내부 스타일
head 태그 안에 style 태그를 사용하여 스타일을 주는 방식
<!DOCTYPE html>
<html lang="ko-KR">
<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>
<style>
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>외부 스타일
link를 사용하여 현재 문서와 외부 리소스를 연결
<!DOCTYPE html>
<html lang="ko-KR">
<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>
<h1>Hello world!</h1>
</body>
</html>h1 {
color:blue;
}다중 스타일 시트
<!DOCTYPE html>
<html lang="ko-KR">
<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="font.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>CSS 파일 안에 CSS 포함하기
@import를 이용하여 추가
@import는 문서 최상단에 있어야함
CSS를 파싱하기 위한 시간이 더 증가하기 때문에 성능 측면에서는 좋지 않음
<!DOCTYPE html>
<html lang="ko-KR">
<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>
<h1>Hello world!</h1>
</body>
</html>/* style.css */
@import url("font.css");
@import url("layout.css");
@import url("color.css");
@import url("reset.css");CSS 기본 선택자
전체 선택자
head를 포함한 HTML 문서 내의 모든 요소를 선택
' * ' 사용
타입(유형) 선택자
특정 태그를 선택
' h1 ', ' p ' 등 사용
아이디 선택자
HTML 페이지 속 유일하게 사용
' # ' 사용
클래스 선택자
HTML 페이지 속 여러개 사용 가능
' . ' 사용
특성 선택자
주어진 특성을 가진 모든 요소를 선택
복합 선택자
| 그룹 선택자 | 자손 선택자 | 자식 선택자 | 일반 형제 선택자 | 인접 형제 선택자 |
|---|---|---|---|---|
| , | ' ' | > | ~ | + |
| 자식 & 자손 가능 | 형제 요소 모두 선택 | 형제 요소 한개 선택(가장 가까운) |
출처 : WENIV
