랄지 IT

브라우저 동작원리 - 브라우저의 핵심기능은 웹페이지를 서버에 요청(request)하고, 서버의 응답(response)받아 브라우저에 표시하는 것이다 - HTML, CSS 파일은 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고, 렌더 트리로 결합된다. 렌더트리를 기반으로 브라우저는 웹페이지를 표시한다. - HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고, 자바스크립트 엔진으로 제어 권한을 넘긴다. 자바스크립트 실행이 완료되면, 다시 HTML 파서로 제어 권한을 넘겨서 DOM 생성을 재개한다. - 브라우저는 동기적으로 HTML, CSS, JS를 처리한다. 이것은 script 태그 위치에 따라 블로킹이 발생하여 DOM생성이 지연될 수 있다는 것을 의미한다. 자바스크립트 기본..

var 키워드로 변수 선언시 몇가지 문제가 있고, 그 문제들로 인하여 ES6에서 let과 const를 도입하였음. - 문제의 대부분은 전역변수와 관련 *함수레벨 스코프, var 생략 가능, 변수 중복선언 허용, 변수 호이스팅 - 전역 변수는 사용억제 해야 함 - 변수 스코프는 좁을수록 좋음 *스코프 넓으면 언제 어디서 사용하는지 파악이 힘들고, 의도치 않게 변경되어 복잡함 * 블록레벨 스코프(대부분의 프로그래밍 언어) : 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효(지역변수), 코드 블록 외부에서는 참조 X * 함수레벨 스코프(JS) : 함수 내부에서 선언된 변수는 지역변수, 함수외부에서 선언한 변수는 모두 전역변수 let - 블록레벨스코프 - 변수 중복 선언 금지 - 호이스팅 되지만,..

CSS는 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. Sass는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. * Syntactically Awesome StyleSheets: 구문적으로 멋진 스타일시트 * 전처리기: 입력 데이터를 처리하여 다른 프로그램에 대한 입력으로서 사용되는 출력물을 만들어내는 프로그램 Sass의 기능 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance Sass는 2006년 Ruby로 처음 개발되었고 이후 다양한 포팅 버전이 등장..

CSS 란? CSS는 HTML 문서를 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. * 랜더링: 코드를 읽은 후, 화면에 시각적으로 표시하게 되는 과정 HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다. CSS 문법 h1 { color: red; } h1 셀렉터(선택자) {} 선언 블..

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. *마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다. * 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다. HTML: 마크업 랭귀지 CSS 스타일시트 랭귀지 JS: 프로그래밍 랭귀지 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능하다. HTML5는 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘..

프론트엔드 개발자란 화면개발 뿐만 아니라, 서버에서 데이터 받아와서 처리하는 부분까지 처리하는 웹 개발자이다. html, css, js 지식과 정확한 이해 뿐만 아니라 CSS 방법론, CSS 프레임워크, 크로스브라우징... ES5,6과 ajax, 나아가 nodejs 까지 학습 필요함 SPA 프레임워크 파악 필요 JS에 대한 탄탄한 이해 이후에 라이브러리(jquery) 등을 공부해야한다 회사에서 프론트엔드 개발자로 일을 할때, 원활한 커뮤니케이션을 위해서는 기본적 컴퓨터 지식, 용어에 대한 이해, 기본적인 상식이 필요함 + 기본적인 수학에 대한 상식(이진법이 뭔지도 모르는데 관련 코드를 짤 수는 없다) 자료구조/알고리즘에 대한 기본적인 부분은 알아야함 개발자로서 일을 한다는 것은 끊임없는 공부가 뒷받침되어..

HTML이 웹페이지의 '뼈'라면 CSS는 '살'이라고 할 수 있습니다. 즉 HTML이 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어입니다. LESS는 CSS의 부족한 기능성을 보강해서 javascript와 같이 동적인 프로그래밍 언어의 기능인 변수, 함수와 같은 기능을 제공합니다. 유지보수의 공수가 드라마틱하게 줄어듭니다. SASS는 LESS의 동일한 기능을 제공하는 다른 솔루션입니다 트위터에서 자신들의 웹서비스를 위해서 사용하던 UI 프래임웍을 오픈소스로 공개한 것이 Bootstrap입니다. 이것을 이용하면 HTML의 엘리먼트에 CSS 클래스 네임만 부여하면 그에 해당하는 디자인이나, 컴포넌트가 생성됩니다. 선택자 CSS 선택자는 주어와 서술어로 선언되어 있다..

html은 굉장히 중요하면서 쉬운 언어 시작태그 닫히는 태그 태그는 html문법의 70% h1 제목 즉 헤딩의 뜻 h2 는 소제목 꺽쇠 슬래쉬 / 프로그래밍 언어의 설명이란 약속임. 그 약속에 따라서 속성이라는 문법을 배우는 것. html은 하이퍼텍스트, 마크업, 랭귀지의 약자 하이퍼택스트 = 링크 태그는 해당 컨텐츠가 무엇이다 라는것을 브라우저에게 알려주는 것인데, 정보가 부족하면 안뜬다 예를 들면 a태그에 href가 없음 안뜸 속성 href라는 속성의 값은 링크로 연결되도록 주소제공해야한다는 약속이 되어있는것 속성의 이름에 따라서 속성의 기능이 정해져있다 a 태그는 앵커의 약자이다 해석하면 배의 닻인데, 정박 연결되어있다는 의미로 사용 html은 팀 버너스 리가 만듬 1960년 gml이라는 마크업언어..

CSS를 사용하는 이유 - 중복의 제거 - 효율적 CSS는 클래스 여러개면 가장 나중에 선언된 애의 말을 듣는다 width 발음 위스 height 발음 하이츠 div, span: 무색무취의 태그임 css 최신기술 사용해도 되나? 안되나?를 확인할때 caniuse.com 사이트에서 확인 Can I use... Support tables for HTML5, CSS3, etc caniuse.com 반응형 웹 or 반응형 디자인(responsive web) 이란? - 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 - 미디어 쿼리 @media(min-width:800px){} 사용해서 작업함 css 링크태그 - 캐시: 파일을 내 컴에 저장함, 효율적임 input 태그 id..

웹의 창시자는 팀 버너스 리. 그는 1990년 11월에 세계 최초의 웹브라우저를 만듭니다. 월드 와이드 웹(world wide web)이었습니다. 훗날 이 브라우저의 이름이 웹의 이름이 되죠. 그가 만든 최초의 웹페이지는 info.cern.ch 인터넷을 만든 사람들은 2대의 컴퓨터가 서로 정보를 주고받을 때 각각의 컴퓨터를 역할에 따라서 어떻게 부를까를 고민했겠죠? 그 컴퓨터들의 용어는 고객(갑)과 사업자(을)입니다. 고객을 영어로는 클라이언트(client)라고 합니다. 사업자를 영어로는 서버(server)라고 합니다. 요청하는 컴퓨터를 클라이언트 컴퓨터, 응답하는 컴퓨터를 서버 컴퓨터라고 부르기로 합니다. 직접 웹서버를 운영하는 일은 쉽지 않은 일입니다. 우선 컴퓨터가 있어야 하고요, 컴퓨터가 냉장고처..