면도날 수장고

보호되어 있는 글입니다.

Sass CSS 전처리 언어 조건문, 반복문, 변수, 함수 등 프로그래밍스러운 문법 존재 반복적인 부분을 쉽게 처리할 수 있다 사용환경 만들기 VScode 에디터 사용 플러그인 : Live Sass Compiler 5.0 버전 이상 사용 폴더에 .scss 파일 생성 작성이 끝난 후 하단의 Watch Sass를 클릭하면 .scss 파일을 기본 .css 파일로 변환한다. 변환된 기본 CSS 파일 경로를 HTML에 명시해주면 된다 사용방법! 변수문법 사용 가능 사칙연산 가능 Sass 작성 $main-color : rgb(184, 88, 88); $main-size : 16px; .box{ background-color: $main-color; font-size: ($main-size + 2px); } 컴파일된..

HTTP 프로토콜 Hypertext Transfer Protocol 브라우저(client)와 서버 간 데이터를 주고받기 위해 사용되는 통신 프로토콜(규약) HTTP 방식으로 브라우저는 서버에 요청(Request)하고, 서버는 브라우저의 요청에 응답(Response)한다. 각 요청/응답 메시지는 메소드나 전송 위치, 버전 등의 내용을 포함한 구조로 되어있다. 서버에 데이터를 요청하기 위해서는 : URL HTTP 요청 메소드 URL을 이용해 데이터를 요청할 때, 특정 동작을 수행할 수 있다. 조회 : GET 메소드, 이미 존재하는 자원을 요청. HTTP 메시지에 body가 없다. 이미 있는 리소스를 조회할 뿐이어서 여러 번 요청해도 응답은 항상 같다. 생성 : POST 메소드, 새로운 자원을 생성. HTTP..

Position 속성 HTML 요소를 배치하는 속성 top, bottom, left, right 와 함께 쓰인다. Position : static (기본) 가장 기본적인 형태 그냥 HTML이 작성된 순서대로 배치된다. top, bottom, left, right 속성은 무시된다. Position : relative 자신의 기본(static) 위치를 기준으로 배치된다. Position : absolute 자신의 상위, 부모요소 위치를 기준으로 배치된다. 이때 부모요소에 static 외의 Position이 지정되어야 적용된다. 주로 부모요소에는 Position : relative가 지정되는 편 만약 상위의 요소들에 position이 지정되어 있지 않는다면 요소가 기준이 된다. Position : fixed ..

Javascript에서 정렬함수인 sort() 일단 써보면 오름차순이 잘 되는 것 같지만… let array = [2,1,4,3,5]; let arr = array.sort(); console.log(arr); // [1,2,3,4,5] 다른 배열로 다시 오름차순을 시도해보면 let array = [12,1,4,3,5]; let arr = array.sort(); console.log(arr); // [1,12,3,4,5] 1 다음으로 오는 숫자를 12로 정렬했다. 기본값은 문자열로 인식해서 UTF-16 유니코드 값을 기준으로 정렬한 것이다. 이 때문에 sort() 함수 안에 콜백 함수를 작성해야 한다. sort()의 가장 중요한 핵심은 비교하는 숫자들이 양수/음수인지 확인하는 작업에 있다. 이 원리를 ..

hoisting [명사] 끌어 올리기, 들어올려 나르기 💛 함수 실행 전, 함수 내부 변수들이 범위의 최상단으로 끌어올려지는 것 예시 var a = 1; console.log(a); // 1 console.log(a); // undefined var a = 1; console.log(a); // 1 호이스팅 시 변수의 선언과 초기화(undefined)가 같이 일어난다. 실질적인 값 할당은 나중에 해당 코드 줄에서 할당된다. var의 문제점 선언을 할당 뒤에 하더라도 작동한다 console.log(a); // undefined a = 1; var a; console.log(a); // 1 전역변수와 지역변수의 개념이 불분명함 : 함수만 지역변수로 호이스팅되며 나머지는 전부 전역변수로 올라온다. for(va..

웹 브라우저란 사람이 웹 페이지, 이미지 등 콘텐츠를 이용하는 것을 돕는 응용프로그램이다. 크롬, 엣지, 오페라, 파이어폭스 등 웹 브라우저가 하는 일 HTML/CSS/Javascript 코드들을 가지고 웹페이지를 그리는 역할을 한다. 웹 브라우저의 구조 User Interface : 웹페이지(뷰포트 내부)를 제외한 사용자 인터페이스. 주소표시줄, 새로고침 버튼, 탭 등 Rendering Engine : HTML/CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 💡 파싱(parsing) : 구문 분석 💡 파서(parser) : compiler의 일부로 구문 분석을 행하는 프로그램 Browser Engine : User Interface과 Rendering Engine을 연결 Networking ..