Front-end
-
[부스트코스] 1. 웹 프로그래밍 기초 - CSSFront-end/부스트코스 : 웹 프로그래밍 2020. 2. 16. 15:25
html 강의를 마치고 css 강의를 듣고 정리해보려고 한다. css 강의가 6개이기는 하지만 한 번에 듣고 하나의 포스팅으로 작성한다. 참고 강의 :https://www.edwith.org/boostcourse-web/lecture/16673/ [LECTURE] 1) CSS 선언방법 : edwith 들어가기 전에 CSS를 HTML안에 선언하는 방식은 크게 3가지가 있습니다. 이를 잘 이해하고 활용하는 것이 좋습니다. 학습 목표 CSS선언 방식을 이해하고 활용할 수 있다. ... - 부스트코스 www.edwith.org * CSS 선언과 적용 CSS는 3가지로 이루어져 있다. -> selector, property, value 아래 코드와 같이 선언한다. (span 태그의 글씨 색상을 red로 한다는 뜻..
-
[부스트코스] 1. 웹 프로그래밍 기초 : HTML 구조설계, class&idFront-end/부스트코스 : 웹 프로그래밍 2020. 2. 2. 22:54
참고 강의 : https://www.edwith.org/boostcourse-web/lecture/16668/ [LECTURE] 3) HTML 구조설계 : edwith 들어가기 전에 웹페이지를 만드는 것은 문서의 구조를 잡는 것과 같습니다. 제목, 단락 등이 있는 것과 같습니다. 그런 관점으로 웹사이트의 문서구조를 만드는 것이 가장 먼저 할 일 ... - 윤지수 www.edwith.org * HTML 구조설계 (HTML structual design) - body : 바탕이 되는 큰 레이아웃 - 계층적인 구조를 통해 html을 구성함 위 그림을 html 구조설계를 통해 대략적인 배치만 해보는 실습을 했다. Company Name Home Home About Map About Us about What We..
-
[부스트코스] 1. 웹 프로그래밍 기초 : HTML tags, layoutFront-end/부스트코스 : 웹 프로그래밍 2020. 1. 29. 11:13
이제 웹 개발에 대한 이론적인 강의는 WAS로 끝(아마)이다. 본격적인 개발에 앞서 HTML, CSS에 관련된 강의를 리뷰하려고 한다. 참고 강의 : https://www.edwith.org/boostcourse-web/lecture/16669/ [LECTURE] 1) HTML Tags : edwith 들어가기 전에 HTML 태그는 많은 종류를 가지고 있고 각각의 쓰임새에 대한 정확한 의미가 있지요. '각각의 의미를 지닌다'는 것을 'Semantic한 태그' 혹은 'Semanti... - 부스트코스 www.edwith.org https://www.edwith.org/boostcourse-web/lecture/19355/ [LECTURE] 2) HTML Layout 태그 : edwith 들어가기 전에 이번..
-
[부스트코스] 1. 웹 프로그래밍 기초 : WAS (웹 어플리케이션 서버)Front-end/부스트코스 : 웹 프로그래밍 2020. 1. 29. 10:33
오늘부터 1차 미션 시작입니다! 사실 WAS 파트는 전에 썼었는데 갑자기 날라가는 바람에.. 다시 쓰게 되었읍니다 ... .. 복습하는 마음으로 다시 씁니다 .. 참고 강의 : https://www.edwith.org/boostcourse-web/lecture/16666/ * 클라이언트 - 서버 구조 클라이언트(client) : 서버에게 서비스를 요청(request)하고 응답 결과를 사용하는 쪽 서버(server) : 클라이언트가 요청한 서비스를 제공하는 쪽 웹 서버와 웹 브라우저가 대표적인 클라이언트-서버 구조라고 할 수 있음! 이 부분은 사실 다른 포스팅에도 작성했지만, 클라이언트-서버 구조는 상대적인 개념이라는 것이 정말 중요한 것 같다. 이 부분을 놓치면 계속 헷갈린다. 컴퓨터네트워크 전공 수업 ..
-
[웹 개발] 반응형 웹이란?Front-end/Web development : 웹 개발 2020. 1. 17. 14:41
최근 웹 공부를 시작하면서 간단하게 사이트를 만들고 있는데 모바일 기기로 보니 사진은 찌부되고 보기에 좋지 않았다. 그래서 다들 반응형 웹을 강조하는구나 싶었다. 이번 기회에 반응형 웹에 대해 공부해보고 만들고 있는 사이트에 적용해보려고 한다. 태블릿의 열풍, 스마트폰의 각기 다른 해상도, 다양한 모바일 기기의 등장으로 웹의 콘텐츠들이 각기 다르게 배치되어야 할 필요성이 증가되었다. 가끔 스마트폰으로 웹 서핑을 하다보면 보기 불편하게 배치되어 있는 경우를 볼 수 있다. (내 웹사이트 처럼) 이러한 문제점 때문에 여러 버전으로 웹을 제작해야 하는 불편함이 생겼다. 그러나 반응형 웹은 여러 버전 제작의 불편함을 해소한다. 반응형 웹은 UI를 의도대로 보여주면서 동시에 디스플레이되는 기기의 요구사항에 유연하게..
-
[부스트코스] 1. 웹 프로그래밍 기초 : 웹 서버 (web server)Front-end/부스트코스 : 웹 프로그래밍 2020. 1. 15. 17:16
강의 : https://www.edwith.org/boostcourse-web/lecture/16665/ * 웹 서버 (Web Server) 보통 소프트웨어를 말하지만, 웹 서버가 동작하는 컴퓨터를 의미하는 단어 웹 서버의 가장 중요한 기능 : 클라이언트가 요청하는 HTML 문서나 각종 리소스를 전달하는 것 (보통 클라이언트는 웹 브라우저) 웹 크롤러도 웹 서버에게 request를 보낼 수 있음 브라우저나 크롤러 모두 웹 서버에게 HTTP에 맞도록 리소스를 요청하고 웹 서버는 응답함 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 static한 데이터이거나 동적인 결과가 될 수 있음 static data : 이미지, HTML 파일, CSS 파일, JavaScript 파일과 같이 컴퓨터..
-
[부스트코스] 1. 웹 프로그래밍 기초 : browser의 동작Front-end/부스트코스 : 웹 프로그래밍 2020. 1. 15. 16:49
저번 HTTP 프로토콜에 이어 웹 프로그래밍 기초에 대한 강의를 듣고 정리한 글입니다. 강의 : https://www.edwith.org/boostcourse-web/lecture/16663/ * Browser (브라우저) 브라우저란? World Wide Web(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어 * Browser Main Components 브라우저를 이루고 있는 컴포넌트들에 대해 알아보자. The user interface (사용자 인터페이스) : 주소 입력하는 부분, 뒤로 가기나 앞으로 가기 버튼, 북마크 버튼 등 페이지의 윈도우를 제외하고 브라우저가 보여주는 모든 부분 The browser engine (브라우저 엔진) : 브라우저 소프트웨어를 동작 시켜주는 핵심적인 엔진 ..
-
부스트코스 서포터즈 BOOSTER 선발Front-end/부스트코스 : 웹 프로그래밍 2020. 1. 15. 14:22
지금 휴식회원으로 머물고 있는 동아리에서 부스트코스 서포터즈 제안을 받아 신청하게 되었다. 블로그를 만든지 몇 달 되긴 했는데 글을 자꾸 안올리게 되어서 겸사겸사 신청했다. 부스트코스 강의를 듣고 주 1회 기술블로그에 글을 올리는 활동을 하면 된다고 한다. 요즘 웹 개발에 관심이 생겨 웹 강의를 선택했다. 며칠 전에 올린 http 관련 글 2020/01/11 - [Front-end/부스트코스 : 웹 프로그래밍] - 1. 웹 프로그래밍 기초 : HTTP 도 서포터즈를 신청하면서 작성했다. 완강을 해봅시다 ~~ !