한국디지털미디어고등학교 프로그래밍 교육 동아리 teamair에서 교육한 내용을 공유합니다.

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

2. HTML CSS
+

3. 강의자도 잘 못지키지만
지키면
매우 좋은
작업들

4. css
파일들은 폴더로 정리하자
보기도 좋고 의외로 사용할 때 위치를 쉽게 찾아낼 수 있다.
+ 앞으로 배울 Rails에서는 폴더 정리 안했다간 큰일남
my_Project
js
img
main.html
page_1.html
CSS는 CSS
JavaScript는 JavaScript
이미지 파일들은 이미지 파일들 끼리

5. 덮어놓고 CSS쓰면 통수 맞는다.
아무 생각없이 CSS를 쓰다가는 나중에 통수를 맞는다.
다 쓰고 코드 정리하고, 주석 쓰는 것을 생활화하자.
/* 주석은 이렇게 씀 */
위치 관련 속성들 먼저 적어주고
정렬 관련 속성들 적어주고
padding과 margin은
항상 위아래로 붙어 다니고
글자 관련이랑
색깔 관련이랑
기타 등등을 아래에 적는다…
NAME {
position
display
padding
margin
font / text
color
etc(기타)…
}

6. 묶을 수 있는거는 최대한 묶자
공통적인 속성이 들어가야 하는 경우가 항상 있는데,
코드 여러번 쓰지 말고 한번에 정리하자.
공통적인 것들은 쉼표(,)로 묶고
공통 속성들 적어주면 좋음
NAME1, NAME2 {
공통 속성들
}
집합처럼 포함관계 잘쓰면 좋음
같은건 > 로 써주고, 아니면 띄어쓰기로…
#id .class1 { … }
.class1 > .class2 {…}

7. 모든 브라우저에서 똑같이 보이게 하라.
브라우저 다르고, 브라우저가 돌아가는 엔진이 다르다.
그래서 여백이나 속성들이 다르니까 초기화해주자.
normalize.css
HTML과 CSS를 전부 재설정해준다.
세세한 설정까지 모두다.
그냥 CSS 파일 하나고,
구글링해서 다운로드 or Ctrl+CV 하면됨.
최고망할놈

8. Web-font
Responsive Web
CSS Animation
Bootstrap

9. Web-font
모든 PC에 내가 쓰는 폰트가 깔려있다는 보장이 없으므로
서버에서 폰트를 불러와 사용하는 것

10. http://www.google.com/fonts/earlyaccess
원하는 폰트 찾아서 (Ctrl+F)
하라는대로 Ctrl+CV

11. /*
* 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');
}

12. @font-face {
font-family: ——;
font-weight: ——;
src: url(주소) format(ttf / woff /eof / embedded-opentype),
/* 두께가 많으면 그만큼 다 src 해줘야함 */
}
기본구조
웹폰트를 내 서버에서도 돌릴 수 있음
폰트 업로드하고, 다음과 같은 것들을 적어주면 됨.

13. Responsive Web
모바일 / PC 어디에서나, 화면 크기 상관없이 볼 수 있도록
웹을 디자인 & 개발하는 것.

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

17. @media all and (max-width: 640px) {
—————
}
보는 환경
(스크린 / TV / 전체) 너비, 높이, 화면 비율 등
기본 구문

18. 자주 써야하는 단위
많이 쓰는 px 단위도 반응형 웹에는 쓰지만,
아래를 더 많이 쓸 수 있도록 해야함.
%
(화면 차지 비율)
em
(세로길이에 기반한 길이)

19. CSS Animation
CSS에서 애니메이션을 줄 수 있다.
말이 필요 없다.

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

21. Bootstrap
디자인과 개발 쉽게 할 수 있도록 도와줌
Ctrl+C, Ctrl+V 만 할줄 알면 됨

29. 드디어
HTML/CSS
수업 끝!

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

31. 자기소개 사이트
코드 검토
반응형 작업
SNS, 밴드에 공유
파일 업로드는 서버에 업로드하고,
기간은 수업끝난 날부터 5일 뒤 오후 11시 59분 까지

32. GET READY
FOR THE
NEXT
LECTURE
(feat. 장문석쌤)

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