03

Front-end Advance

본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.

HTML CSS

+

강의자도 잘 못지키지만

지키면

매우 좋은

작업들

css

파일들은 폴더로 정리하자

보기도 좋고 의외로 사용할 때 위치를 쉽게 찾아낼 수 있다.

+ 앞으로 배울 Rails에서는 폴더 정리 안했다간 큰일남

my_Project

js

img

main.html

page_1.html

CSS는 CSS

JavaScript는 JavaScript

이미지 파일들은 이미지 파일들 끼리

덮어놓고 CSS쓰면 통수 맞는다.

아무 생각없이 CSS를 쓰다가는 나중에 통수를 맞는다.

다 쓰고 코드 정리하고, 주석 쓰는 것을 생활화하자.

/* 주석은 이렇게 씀 */

위치 관련 속성들 먼저 적어주고

정렬 관련 속성들 적어주고

padding과 margin은

항상 위아래로 붙어 다니고

글자 관련이랑

색깔 관련이랑

기타 등등을 아래에 적는다…

NAME {

position

display

padding

margin

font / text

color

etc(기타)…

}

묶을 수 있는거는 최대한 묶자

공통적인 속성이 들어가야 하는 경우가 항상 있는데,

코드 여러번 쓰지 말고 한번에 정리하자.

공통적인 것들은 쉼표(,)로 묶고

공통 속성들 적어주면 좋음

NAME1, NAME2 {

공통 속성들

}

집합처럼 포함관계 잘쓰면 좋음

같은건 > 로 써주고, 아니면 띄어쓰기로…

#id .class1 { … }

.class1 > .class2 {…}

모든 브라우저에서 똑같이 보이게 하라.

브라우저 다르고, 브라우저가 돌아가는 엔진이 다르다.

그래서 여백이나 속성들이 다르니까 초기화해주자.

normalize.css

HTML과 CSS를 전부 재설정해준다.

세세한 설정까지 모두다.

그냥 CSS 파일 하나고,

구글링해서 다운로드 or Ctrl+CV 하면됨.

최고망할놈

Web-font

Responsive Web

CSS Animation

Bootstrap

Web-font

모든 PC에 내가 쓰는 폰트가 깔려있다는 보장이 없으므로

서버에서 폰트를 불러와 사용하는 것

http://www.google.com/fonts/earlyaccess

원하는 폰트 찾아서 (Ctrl+F)

하라는대로 Ctrl+CV

/* * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess */@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot); src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');}@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot); src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');}@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 800; src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot); src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');}

@font-face {

font-family: ——;

font-weight: ——;

src: url(주소) format(ttf / woff /eof / embedded-opentype),

/* 두께가 많으면 그만큼 다 src 해줘야함 */

}

기본구조

웹폰트를 내 서버에서도 돌릴 수 있음

폰트 업로드하고, 다음과 같은 것들을 적어주면 됨.

Responsive Web

모바일 / PC 어디에서나, 화면 크기 상관없이 볼 수 있도록

웹을 디자인 & 개발하는 것.

화면의 크기에 반응해서 바뀜

@media all and (max-width: 640px) {

—————

}

보는 환경 (스크린 / TV / 전체) 너비, 높이, 화면 비율 등

기본 구문

자주 써야하는 단위

많이 쓰는 px 단위도 반응형 웹에는 쓰지만,

아래를 더 많이 쓸 수 있도록 해야함.

% (화면 차지 비율)

em (세로길이에 기반한 길이)

CSS Animation

CSS에서 애니메이션을 줄 수 있다.

말이 필요 없다.

백코딩이불여일견백번의 코딩이 한번 보는 것보다 훨 낫다.

Bootstrap

디자인과 개발 쉽게 할 수 있도록 도와줌

Ctrl+C, Ctrl+V 만 할줄 알면 됨

드디어 HTML/CSS 수업 끝!

그럼에도 숙제는 나갑니다^^

자기소개 사이트 코드 검토 반응형 작업

SNS, 밴드에 공유

파일 업로드는 서버에 업로드하고, 기간은 수업끝난 날부터 5일 뒤 오후 11시 59분 까지

GET READY FOR THE NEXT LECTURE

(feat. 장문석쌤)

01

Ruby 기초

본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.