웹 지식 기초 내용 정리 #1

tjdud0123·2020년 10월 10일
0

📃   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) 띄어쓰기 : &nbsp;, < : &lt;, > : gt;

참고 reference


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 포함)의 정렬되지 않은 집합
  • 클라이언트와 통신 시 주로 사용
profile
Junior Web FE Developer

0개의 댓글