📃 SOPT 웹 1차세미나 내용 정리
브라우저 작동원리
브라우저가 URI를 이용하여 HTTP 요청 -> HTML파일로 응답
URI vs URL
URI: 인터넷에 있는 자원을 나타내는 식별자
protocol + domainName + path + query
👀 protocol : 원거리 통신 장비 사이에서 메시지를 주고받는 규칙
👀 domainName : 네트워크 상에서 컴퓨터를 식별하는 호스트명
👀 path : 요청한 자원에 대한 웹 서버 내 경로
👀 query : 추가 파라미터
URL: 인터넷 상의 자원의 위치
HTTP
HTML문서를 주고받을 수 있는 규칙
- Header와 Body로 구성
👀 요청 - Request
Header의 Lequest Line = Method + Path + Protocol Version
🔎 GET : 조회, POST : 생성, PUT : 수정, DELETE : 삭제
👀 응답 - Response
Header의 Status Line = Protocol Version + Status Code + Status Msg
🔎 100번대: 정보 응답, 200번대: 성공 응답, 300번대: 리다이렉션 400번대: 요청 에러, 500번대: 서버 내부 에러
HTML
웹 페이지를 기술하기 위한 마크업 언어
-> 웹 페이지의 내용과 구조를 담당, 태그를 통해 정보를 구조화
👀 HTML5 추가기능
- 시멘틱 태그 도입
- CSS3 지원
- 멀티미디어, 그래픽, 디바이스 접근 등
👀 메타데이터
- head 태그 안에 정의
- HTML 문서에 대한 정보로 웹 브라우저에 직접 표현되지 않는 정보들
Block 요소 vs Inline 요소
👀 Block
- 줄 바꿈이 일어나는 형태로 상위 영역의 전체 너비만큼 늘어남
- 박스모델의 성질을 가짐 ; width와 height 값을 가짐
- 인라인요소를 포함할 수 있음
- ex) h1~h6, p...
👀 Inline
- 줄바꿈이 일어나지 않는 형태
- 박스모델의 성질을 가지지 않음 ; width와 height 값이 없어 설정할 수 없음
- 블록 요소를 포함할 수 없음
- ex) a, img...
❗️ Semantic Web
컴퓨터가 이해하기 쉬운 의미를 가진 차세대 지능형 웹
- ex)
<header>, <nav>, <aside>, <section>, <article>등
HTML Entity
HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋
- ex) 띄어쓰기 :
, < :<, > :gt;등
CSS
css 적용 우선순위
👀 중요도
<head> 의 <style> > <head> 의 <style>내의 @import
> <link> 의 css 파일 > <link> 의 css파일 내의 @import
> 브라우저 기본 css
👀 대상의 명시도 (Selector)
!important > inline > id > class > sudo > tag > inherited
👀 코드 순서
늦게 선언된 스타일 우선 적용
Box Model
👀 구성
- content : 내용이 차지하는 공간
- padding : 내용과 border사이의 공간
- margin : 다른 요소와의 거리
- border : 테두리
+ outline : 요소 주위의 선, border바깥에 그려짐
👀 box-sizing
- content-box (기본값): 영역 크기 = content
- border-box (권장) : 영역 크기 = content + padding + border
SASS
css 전처리기 (컴파일 후 css파일로 변환)
css 단점 보완 (가독성 및 코드 재사용 유리)
SCSS
CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 상위집합(Superset)
SASS 보다 css 친화적,
변수 / 조건문 / 반복문 /
mixin & include ( 함수와 유사 ) /
extend( 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 - 상속과 유사 )
등을 사용하여 깔끔한 코드 작성 가능
JavaScript
원시자료형 vs 객체 자료형
undefined를 제외한 모든 것이 객체로 취급되어 객체의 특징을 갖는다.
👀 원시자료형 Primitive Type
- Boolean, Number(64bit 실수형), String, Symbol, Null(값이 정해지지 않음), Undifined(타입과 값 모두 정해지지 않음)
👀 객체 자료형 Object Type
- Object, Array, function
👀 for문
// 기본 for 문
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}// for ... of iterable 요소 접근
for (let item of arr) {
console.log(item)
}// for ... in 배열 인덱스, 객체 key값 접근
for (let item in arr) {
console.log(item)
}// forEach
arr.forEach((item, index) => {
console.log(item, index)
})var / let & const
👀 var
- function scope
- 재선언 가능
- 호이스팅 후 선언과 초기화가 한번에 실행
👀 let & const
- bolck scope
- 재선언 불가능
- 호이스팅 후 초기화는 선언문에서 실행 따라서 선언문에서 초기화 되기전에는 TDZ에 빠져 참조 불가
호이스팅
변수의 정의나 함수의 선언이 선언과 할당으로 분리되는 것
// 작성 코드
function hoisting(){
var variable = 1;
}// 자바스크립트 엔진이 해석한 코드
function hoisting(){
var variable;
variable= 1;
}함수
객체자료형으로 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적 블록
👀 일급 객체
- 변수나 데이터 구조에 할당 가능
- 다른 함수의 파라미터로 전달 가능
- 반환값으로 사용 가능
👀 함수 선언식 vs 함수 표현식
func();
function func(){
// 선언식 - 호이스팅에 영향을 받음
}func(); //에러
const func function (){
// 선언식 - 호이스팅에 영향을 받지 않음, 변수에 할당가능(일급객체)
}👀 JSON
- 자바스크립트 객체 표현식
- key, value로 구성된 property(method 포함)의 정렬되지 않은 집합
- 클라이언트와 통신 시 주로 사용
