INTRO
1. 언어
- HTML : 구조화
- JS : 생동감
- CSS : 꾸미기
2. 웹 브라우저
1) W3C
https://www.w3.org/
: 웹 브라우저, 페이지의 권고안
-> W3C validator로 웹 표준에 부합하는지 검사 가능
2) 웹 접근성 연구소
https://www.wah.or.kr:444/Participation/guide.asp
: 개발자들의 웹 콘텐츠 접근성 지침
3. VS CODE
생활코딩 강의를 통해 써본 적은 있는데 한국어 패치 다운 받는 법은 처음 알았다ㅋㅋㅋㅋㅋ 미리 알아볼 걸...
1) 확장프로그램
ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음)
2) 단축키
파일>기본설정>바로가기 키
4. 이미지
>> 비트맵 vs 벡터
1) 비트맵
: 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력
ex) jpg, png, gif
2) 벡터
: 점, 선, 면의 위치에 따라 화면에 렌더링 되므로 이미지가 깨지지 않지만 많은 연산이 필요
ex) svg
HTML
1. 문법
1) 태그: tag
: HTML의 핵심 문법으로, 화살괄호 '<>' 안에 시행하고자 하는 내용을 담아 표현하는 것
https://www.advancedwebranking.com/html/
<TAG> 내용 </TAG>
: 열리고 닫히는 구조2) 속성: attribute
: 태그의 정보만으로는 정보가 부족할 때, 부족한 정보를 보충해주는 용도
<TAG 속성="값"> 내용 </TAG>3) 부모자식 구조
: 다른 태그를 부모 태그가 품는 구조 (상위-하위)
<PARENT>
<CHILD></CHILD>
</PARENT>4) 문서 형식 지정
: DOCTYPE이 문서 형식을 지정하는 역할을 함
2. 주요 태그 - HEAD
1) TITLE
: 웹 페이지의 제목을 나타내는 태그 (탭의 이름)
<head>
<title> 벨로그 </title>
</head>2) META
: 기타 정보를 나타내는 태그
>> 주요 속성
: charset, name, content
<head>
<meta charset="UTF-8">
</head>3) LINK
:외부 문서 연결 (CSS 문서)
>> 주요 속성
: rel, href
<head>
<link rel="stylesheet" href="./css/main.css">
</head>4) STYLE
: CSS로 꾸미지 않고 HTML로 직접 꾸밀 때
5) SCRIPT
: CSS를 HTML로 작성할 때, SCRIPT 태그 내에 작성하면 됨
3. 주요 태그 - BODY
1) DIV
: 별 의미 없는 태그로, 뭐든 감싸거나 묶는 데 사용되는 태그
2) IMAGE
: 이미지 삽입하는 태그
>> 주요 속성
: src, alt
CSS
1. style 태그
용어 정리
- Selector: 본문에서 선언이 적용될 곳을 특정하는 부분으로, selector로 선택된 것의 종류에 따라 tag 선택자, class 선택자, id 선택자라 부르기도 함.
- Declaration: 표현하고 싶은 것을 나타내는 부분
- Property: 속성
- Value: 값
2. 속성 type
1) 크기
>> 가로 세로
- width: 가로 너비
- height: 세로 너비
-> 단위: px
>> 폰트
- font-size: 폰트 크기
div{
width: 300px; height: 600px;
// 요소의 가로너비: 너비값;
font-size: 16px;
}2) 여백
div{
margin-top: 20px;
margin-right: 10px;
margin-botton: 15px;
margin-left: 20px;
padding: 7px;
}3) 색상
- color: 글자 색상
- background-color: 요소 색상
div {
color: blue;
background-color: red;
}