오늘은 공부 중/강의 공부 7

[생활코딩] WEB2. CSS 반응형 디자인, 미디어 쿼리

반응형 웹, 반응형 디자인(Responsive Web) : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌어 동작하게 되는 것. 미디어 쿼리 : 화면의 여러가지 특성들에 따라서 어떠한 조건을 만족할 때만 CSS 내용이 동작하게 하는 것 min-width : 최소 800px -> 800픽셀 이상부터 효과가 적용된다. max-width : 최대 800px -> 800픽셀 이하부터 효과가 적용된다. * 적용 @media(max-width:800px){ #grid{ display:block; } #grid ul{ border-right:none; } h1 { border-bottom:none; } } block-level element는 화면 전체를 사용. 반응형 웹사이트를 위해서는..

[생활코딩] WEB2 CSS. 선택자와 속성

1. HTML 문법에 태그를 추가하는 것 2. CSS 해석할 수 있는 정보를 가지고 있는 기존 태그와 달리 (ex. - 링크 정보, - 제목이라는 정보) 디자인 태그(ex. font)는 어떤 정보도 가지고 있지 않다. 정보가 아닌 디자인 코드가 섞이면 웹페이지가 정보로서의 가치가 현격히 떨어진다. 유지보수적으로도 CSS 코드가 분리되는 것이 훨씬 용이하다. CSS와 HTML은 완전히 다른 문법의 언어. 1번째 방법. style 태그 활용 태그를 head 안에 넣어준다. CSS 문법에 맞게 해석해주라고 요청하는 것. CSS를 통해 중복된 코드를 단 하나의 코드를 통해 제거할 수 있게 된다. 또한 가독성도 좋다. a { } 누구에게 적용할지 선택한다는 의미에서 선택자 = selector color:black..

[생활코딩] WEB1 마무리 + 코드의 힘 + 웹사이트 파비콘 추가하기

프론트엔드 엔지니어 [HTML / CSS / JavaScript] 웹페이지를 꾸미는 CSS는 HTML이 만들어지고 4년 후 등장. 사용자와 상호작용하는 JavaScript는 HTML이 만들어지고 5년 후 등장. 백엔드 엔지니어 PHP JSP Nodejs Express Python Django Ruby on Rails ASP.net 이 기술들은 서로 경쟁관계에 있고, 이 중에 하나를 공부하면 된다. 코드의 힘 : 동영상 첨부 DISQUS 서비스 / LiveRe 서비스 : 웹페이지 하단에 댓글 추가 - GET STARTED > I want to install Disqus on my site > 무료 Basic 버전 클릭 > > 나오는 코드 복사해서 웹사이트 코드 내부 원하는 위치에에 붙여넣기. disqus가..

[생활코딩] web. 웹서버 운영하기

웹브라우저가 제품명이 아니라 제품군인 것처럼, 웹서버 제품군에도 여러 제품들이 있다. Apache IIS Nginx 이 중에서 우리가 사용할 소프트웨어는 아파치. 무료이고, 가장 꾸준히 많이 쓰이는 웹서버이다. 생활코딩에서는 혹시 미래에 해당 운영체제가 사라질 수도 있으니 늘 스스로 검색해서 찾아보는 습관을 권해주신다. 추천 검색어 : how to install apache http server (운영체제 이름 - Window / Mac ) 2021 how to easy install apache http server birtnami를 통해 apache 서버를 활용해보기로 한다. 검색 : bitnami wamp stack https://bitnami.com/stack/wamp/installer Insta..

[생활코딩] 서버와 클라이언트, 웹호스팅

링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹 = 웹사이트(web site) 인터넷이 도시라면 웹은 도시 위에 있는 건물 하나 인터넷이 도로라면 웹은 도로 위를 달리는 자동차 한 대. 인터넷이 운영체제라면 웹은 운영체제 위에서 동작하는 하나의 앱. 1960년은 인터넷이 탄생. 1990년에는 웹 시작. Internet 1960년, 핵전쟁이 끝난 지 얼마되지 않은 시기. 미국에서는 핵공격이 일어났을 때 통신시스템에 심각한 취약점이 있다는 것을 발견. 당시에는 통신 시스템이 중앙집중적이었기 때문에 핵공격을 당하면 통신이 마비되는 위험이 있었던 것. 이런 문제를 극복하기 위해서 분산된 형태의 통신시스템을 구상하게 되는데 그것이 인터넷의 시작. 정보 기업들을 묵묵히 지탱하는 거대한 인프라 = 인터넷. WEB..

[생활코딩] 웹. 태그와 속성

웹페이지 (결과) / html 언어 코드, 소스 (원인) 내가 만들고 싶은 페이지 생각하면서 수업 따라가기 ! utf-8로 구성된 문서이니 utf-8로 문서를 읽으라는 문자규칙. https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency: www.advancedwebranking.com 가장 많이 쓰이는 태그들. p vs br h => ..

[생활코딩] 웹. 코딩과 HTML - Atom 에디터 환경설정까지

생활코딩을 통해 처음부터 차근차근 개념을 되짚어나가려고 한다. 막상 시작하니까 그 흐름이 너무 체계적이고 탄탄해서 홀린듯 쭉 영상을 보며 정리를 해나가고 있다. 사람이 하는 일 = 원인 부호 또는 신호라는 의미의 코드 (code), 원천이라는 뜻의 소스 (Source), 약속이라는 의미에서 언어 그 중에서 컴퓨터 언어. 기계가 하는 일 = 결과 애플리케이션 (줄여서) 앱, (한국어로) 응용 프로그램, 프로그램 웹에서는 결과를 웹 페이지, 웹페이지가 모여있으면 웹사이트. 기능이 좀 많으면 웹애플리케이션 (=웹앱) 즉, 원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심. 웹페이지를 만드는 코드 = HTML. 웹 : 퍼블릭 도메인(Public Domain) 팀 버너스 리는 웹을 어떠한 저작권도 ..