본문 바로가기

boostcourse18

[부스트코스] 1. 웹 프로그래밍 기초 | 3. CSS -FE | 5) Element가 배치되는 방법(CSS layout) Element는 HTML로 작성한 태그들을 의미합니다. 웹페이지의 가독성을 높이기 위해서는 이러한 태그들을 적절하게 화면에 배치해주어야 하는데요, CSS의 display, position, float 속성을 활용하면 기초적인 레이아웃을 구성할 수 있습니다. 대표적으로 위 세개의 속성들은 다음과 같이 정의할 수 있습니다. 1. display 속성 || display:block; display:inline; display:inline-block; 2. position 속성 || position:static; position:absolute; position:relative, position:fixed; 3. float 속성 || float:left; float:right 1. display 아래와 같이 HT.. 2020. 2. 14.

[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 7) WAS 1. 클라이언트 / 서버 구조 이전 포스팅에서 언급했던 바와 같이, Client / Server 구조는 위의 다이어그램으로 설명할 수 있습니다. 클라이언트는 컴퓨터뿐만 아니라, 스마트폰, 노트북, 혹은 키오스크와 같은 여러 기기가 될 수 있습니다. 이런 기기들이 인터넷을 통해 서버와 연결되고 많은 작업을 수행할 수 있게 되는 것이죠. 2. DBMS (DataBase Management System) 그 다음으로 중요한 개념이 바로 'DBMS' 입니다. DBMS가 없던 때에는 데이터베이스 즉 DB를 사용자와 어플리케이션(APP)이 직접 조작했었습니다. 하지만, 그렇게 된다면, 데이터베이스의 안정성을 장담할 수 없을 뿐더러, 어플리케이션을 제작하는데 필요한 로직 또한 증가하게 됩니다. 그리고 데이터의 무결성.. 2020. 2. 7.

[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 6) 웹서버 1. 웹 서버? Web Server에 대한 MDN의 정의는 아래와 같습니다. 하드웨어 측면에서, web server는 website의 컴포넌트 파일들을 저장하는 컴퓨터입니다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript files가 있습니다.) 그리고 이 파일들을 최종 소비자의 디바이스에 전달합니다. web server는 인터넷에 연결되어 있고, mozilla.org와 같은 domain name을 통해 접속될 수 있습니다. 소프트웨어 측면에서, web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리합니다. 이 문서에서 web server는 HTTP서버로 국한합니다. HTTP 서버는 URL(Web addresses.. 2020. 2. 6.

[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 5) browser에서의 웹 개발 우리가 자주 사용하는 브라우저에는 거의 대부분 '개발자 도구'를 사용할 수 있게 되어 있습니다. 크롬 브라우저에서 Ctrl+Shift+i 혹은 F12를 누르면 아래와 같은 개발자 도구를 실행시킬 수 있습니다. 상단에 여러 탭이 있는데 그중에서 Element탭에서는 현재 웹페이지의 HTML과 CSS 설정을 볼 수 있습니다. Console 탭을 이용하면 스크립트 관련 설정을 보거나 수정할 수 있는데, 이외에도 현재 HTML파일을 직접 수정하거나, 이벤트리스너를 추가하여 웹페이지의 이벤트들을 분리해서 볼 수 있는 등 여러가지 기능을 할 수도 있습니다. 아래의 링크에서 자세하게 볼 수 있습니다. https://www.vobour.com/%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EB%AA%A8%EB%A.. 2020. 2. 6.

[부스트코스] 1. 웹 프로그래밍 기초 | 1-4) browser의 동작 1. Browsers HTML + CSS + Javascript로 웹페이지를 만들었다 하더라도, 이들을 해석해서 렌더링 해주는 과정이 빠진다면, 이들도 모두 무용지물일 수 밖에 없습니다. 그렇기에 웹의 컴파일러라고 할 수 있는 '브라우저'가 이러한 역할을 하게 됩니다. 대표적인 브라우저는 아래와 같은 것들이 있습니다. 순서대로 Chrome, Firefox, Safari, Microsoft Edge, Internet Explorer 입니다. 이 브라우저들은 모두 웹페이지를 렌더링한다는 점에서는 공통점을 가지고 있지만, 이들은 서로 다른 렌더링 엔진 (Rendering Engine)을 사용한다는 점에서 차이점을 보입니다. Chrome은 Blink, Firefox는 Gecko, Safari는 Webkit, I.. 2020. 2. 5.

[부스트코스] 1. 웹 프로그래밍 기초 | 1-3) 웹 Front-End와 Back-End 1. 웹 프론트엔드(Front-End) 웹 프론트엔드는, 쉽게 말하자면 '사용자에게 보여지는 부분' 이라고 할 수 있습니다. 예를 들어, 구글의 검색결과 화면 혹은 네이버 포털의 첫화면, 네이버 뉴스의 기사 화면 등등이 있죠. 아래와 같은 화면을 웹 프론트엔드라고 할 수 있습니다. 부스트 코스 강의에서는 웹 프론트엔드를 이렇게 설명하고 있습니다. 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다. 또한, 사용자의 요청(요구사항)에 반응해서 동작합니다. 웹 프론트엔드의 역할을 적절히 수행하기 위해서는 HTML, CSS, Javascript 와 같은 언어를 필요로 합니다. 먼저 HTML은 웹페이지의 구조를 구축하기 위하여 작성됩니다. 크롬 개발자도구 F12를 눌러서 확인해보면 Ele.. 2020. 2. 5.

[부스트코스] 1. 웹 프로그래밍 기초 | 1-2) 웹의 동작 (HTTP 프로토콜 이해) 부스트코스 서포터즈를 신청하면서 이 포스팅을 하게 되었습니다. 관심있으시다면 https://m.post.naver.com/viewer/postView.nhn?volumeNo=27274312&memberNo=34635212 이 링크를 따라 신청하시면 됩니다.! http://www.edwith.org/boostcourse-web/lecture/16661/ [LECTURE] 2) 웹의 동작 (HTTP 프로토콜 이해) : edwith 들어가기 전에 사람과 사람이 전화 통화를 하기 위해서도 몇 가지 규약이 필요합니다. 서로 알아들을 수 있는 말을 사용해야 하며, 한쪽이 말할 때 다른 쪽에서는 들어야 합니다. 또한... - 부스트코스 www.edwith.org 이번 포스팅은 부스트코스의 위 강의를 기초로하여 작성되.. 2020. 2. 5.

[부스트코스] 1. 웹 프로그래밍 기초 | 1-1) 웹 프로그래밍을 위한 프로그램 언어들 1. 저급 언어 vs 고급 언어 컴퓨터는 전기 신호의 유/무에 따른 값으로 동작합니다. 그렇기 때문에, 기계에 신호를 전달하고, 프로그래밍을 하는 일의 궁극적인 목적은 0과 1의 값으로 변환하여 컴퓨터에 신호를 주는 것이라고 정의할 수 있습니다. 이와 같이 0과 1로 컴퓨터에 명령을 내리는 언어를 '기계어(Machine Language)'라고 합니다. 하지만, 사람이 이를 직접 사용하기에는 많은 어려움이 따릅니다. 이를 해결하기 위한 도구가 바로 '컴파일러(Compiler)' 입니다. 컴파일러는 사람이 훨씬 이해하기 쉬운 기호를 '기계어'로 변환해줍니다. 그렇기에, 컴파일러를 사용한다면, 더욱 편리하게 프로그래밍을 할 수 있게 되었습니다. 이러한 기호로 처음 등장했던 언어가 바로 '어셈블리어(Assemb.. 2020. 2. 5.

이전 1 2 다음

티스토리툴바