HTML/CSS/JS
Front-end Course Day 01
CH 1. HTML/CSS/JS
- 🫥 이미 잘 알고있는 내용이니, 중요한 것 + 새로 알게 된 내용 위주 정리.
1. 개요
크로스 브라우징
조금씩 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작.
렌더링
브라우저의 뷰포트에 웹사이트를 출력하는 행위.
비트맵 vs 벡터
비트맵
픽셀이 모여 만들어진 정보의 집합.
레스터(Raster) 이미지 라고도 부름.
정교한 이미지 자연스럽게 표현.
JPG(JPEG) - 손실 압축(용량🔻), 24비트
PNG - 비손실 압축, alpha 채널 (투명도) 지원, W3C 권장 포맷
GIF - 비손실 압축, 움직이는 사진, 8비트
WEBP - 구글이 개발한 이미지 포맷. (손실+비손실 지원 / 움직이는 사진 / 투명도 지원)
벡터
점, 선, 면, 색상 등 수학적 정보의 형태로 이루어진 이미지.
정교한 이미지 표현에는 적합하지 X.
계단현상(앨리어싱)이 발생하지 않음.
material image.
SVG - CSS,JS로 제어 가능. 파일 및 코드 삽입 가능.
특수 문자
- 백틱 = grave
- ~ = 틸드 (Tilde)
- @ = At Sign
= Number Sign, sharp
- ^ = 캐럿 (Caret)
- & = 앰퍼센드 (Ampersand)
- = 별표 (Asterisk) = 에스터리스크
- = 대시, 하이픈(hyphen)
- _ = 언더스코어(Underscore)
- " = quotation mark
- ' = Apstrophe (아포스트로피)
- / = 슬래시 & \ = 백슬래시, 역슬래시
- | = 버티컬 바 (Vertical bar)
- () = 퍼렌서시스 (Parenthesis)
- {} = 브레이스 (Brace)
- [] = 브래킷 (Bracket)
- <> = Angle Bracket
오픈소스 라이센스
-
아파치 라이센스
-
MIT 라이센스
-
BSD 라이센스
2. VS Code
.vscode 는 현재 프로젝트의 설정 정보가 들어있는 폴더임.
보통 이름이 .로 시작하는 파일은 숨김 전용 파일임. - 무시하면 됨.
HTML
link 태그
- 외부 문서(CSS 파일, favicon 등)을 가져와 연결할 때 사용함.
- 경로는 href 속성에 작성함.
<link rel="stylesheet" href="./main.css" />
<link rel="icon" href="favicon.png" />Favicon = Favorite Icon의 줄임말.
보통ico또는png파일이 사용됨.
meta 태그
- 그 외 정보들.
- name 프로퍼티와 content 프로퍼티 쌍으로 사용함.
<meta name="author" content="thisisyjin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 />- name/content 쌍이 아닌 것도 있다.
<meta charsset="UTF-8" />charset = character set = 문자 인코딩 방식.
절대경로와 상대경로
| 절대경로 | 상대경로 |
|---|---|
| http, / | ./, ../ |
../는 상위 폴더를 의미함.
./는 현재 폴더를 의미하고, 생략 가능함.
HTML 태그
input
disabled 속성 추가시 선택할 수 없음.
name 속성은 GET 방식으로 폼 제출시 key=value 에서 key에 해당함.
<input type="text" name="username" />즉, 위 input에 'yjin' 이라 입력하고 폼 제출시 username=yjin 과 같이 전달됨.
또한, checkbox나 radio 같은 경우에는 그룹을 줄 수 있음.
-> radio에서 같은 name을 가진 것중에선 하나만 선택 가능.
table
-
colspan
= column(열) 확장. -
가로로 길게 확장하는 것.
-
rowspan
= row(행) 확장. -
세로로 길게 확장하는 것.
전역 속성
전체 영역에서 사용할 수 있는 속성.
1. title
- 태그에 hover시 툴팁을 띄울 수 있음.
<div title="설명을 입력">hello</div>2. style
- 인라인 스타일 선언 가능.
<div style="width: 100px">hello</div>3. class, id
- class는 중복 가능한 이름 / id는 유일한 이름
<span class="red">thisis</span>
<span id="name">yjin</span>4. data
data-이름='데이터' 와 같은 형식으로 선언.
-> 요소에 데이터를 저장하고, 주로 js에서 그 값을 사용할 수 있음.
+) CSS에서도 활용할 수 있음.
<span class="person" data-phone-number="010-0000-0000">thisis</span>
<span class="person" data-phone-number="010-9999-9999">yjin</span>- js에서는
DOM.dataset.dataName으로 값을 불러올 수 있다.
const person = document.querySelectorAll('.person');
person.forEach(p => {
console.log(p.dataset.phoneNumber);
});- css에서는 주로 ::after, ::before의 content로 사용하며,
attr()함수를 통해 값을 불러온다.
#yjin::after {
content: attr(data-phone-number);
}script태그의 defer 속성
script 태그의 defer 속성
= HTML 구조가 준비된 후애 JS를 해석하겠다는 뜻.
보통은 script 태그를 body태그의 최하단에 작성을 하는데,
만약 불가피하게 head 태그 내에 작성해야 하는 경우에는 defer 속성을 작성해줌.<script defer src="./app.js"></script>
CSS
import
@import './red.css';
@import url("./box.css");다른 css 파일을 임포트 할 수 있다. = 직렬 연결
❗️ 반드시 url() 함수를 이용해야 한다? No!
- css 파일을 불러오는 경우에는 url()을 쓰거나 import '파일명'을 하거나 같은 동작.
cf.
link:css는 병렬 연결 방식으로,
외부 css 문서를 가져와 연결하는데 순서대로 불러오는 것이 아니고 한번에 가져옴.
import보다는 link:css 방식을 권장함.
