강의자료
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서",
"그려주는" 것입니다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이죠. 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것이랍니다.
HTML은 뼈대, CSS는 꾸미기!
HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다.
CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
HTML은 크게 head와 body로 구성된답니다.
- head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
- head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
- body 안에 들어가는 대표적인 요소들!
h1 : 제목
span 특정구역꾸며주기
a 하이퍼링크 href
img 이미지태그 srcctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능
CSS는 ~ 안에 로 공간을 만들어 작성합니다.
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
- margin은 바깥 여백을, padding은 내 안쪽 여백
- width를 주고, margin: auto를 사용하자! 그래도 안되면? display:block을 추가!
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것
CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.
모바일에서는 "가로 사이즈"가 가장 문제
어디서나 500px 로 맞춰라 (width: 500px)
화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?
width: 95%;
max-width: 500px;
자바스크립트란 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.
클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다..
모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.
윈도우: F12
"마우스 오른쪽 클릭 → 검사 → console"도 가능!
console.log(변수)
메모
토글 열고닫기 : ctrl alt t
개발일지 작성(티스토리, 미디엄, 벨로그)
서버 네이버컴퓨터
브라우저 네이버컴퓨터에 요청 후 가져와서 보여줌
새로고침 새로 가져옴
서버는 frontend를 준다
head body h1 : 제목 span 특정구역꾸며주기 a 하이퍼링크 href img 이미지태그 src<단축키>
Tab 들여쓰기 Shift Tab 반대들여쓰기
ctrl alt L 왼쪽정렬
margin 바깥쪽여백
padding 안쪽여백
- : 모든 태그에 적용
주석달기(태그해제) ctrl+/
css길어지면 파일분리가능
<부트스트랩>
예쁜css꾸러미
hover (버튼 위에 커서올려졌을때를 가정)
*화면 모바일 버전
max-width: 500px;
width: 95%;
