CSS 공부 추천

반응형 웹 스크린 대응

반응형 웹 스크린을 대응하는 것만 보면 책을 사는것보단 구글에 '반응형 웹' 또는 'responsible width in css'로 검색해서 나오는 블로그나 bootstrap guide를 통해서 익히는게 더 좋을 수 있어요. (책은 너무 세세하고 방대하게 나와있어서 쓰지도 않는 지식까지 봐야하는 부담감이 있다고 생각해요.) 몇가지 추려서 권해보면 다음과 같아요.

첫째

직접 세팅하려면 다음의 블로그를 읽어보세요. 하나하나 반응형 웹을 이해하려면 사실 기술적인 부분보다는 디바이스 넓이와 해상도를 이해하는 부분도 필요하기때문에 조금 복잡할 수는 있습니다. / 출처:CSS3 @media query를 이용하여 반응형 웹 스크린 크기 대응하기

둘째

CSS-Tricks 라는 외국 블로그에 있는 내용들이 정말 잘 정리되있어요. (영어라 좀 부담스럽긴한데, 천천히 읽어보면 느리지만 볼수는 있을겁니다.) 그중 디바이스별 미디어쿼리를 정리해논 블로그를 참고하시면 직접 세팅하는데 훨씬더 도움이 될 겁니다. / 출처:Media Queries for Standard Devices

셋째

직접 세팅하는게 부담스럽다면 bootstrap을 사용하길 추천합니다. 사실 bootstrap을 강하게 추천해요. 반응형 웹을 세팅하는게 훨씬 수월해집니다. 자동으로 세팅이 되어있으니까요. 부트스트랩을 적용하고, 반응형 웹이 어떤 기준으로 세팅되어있는지 확인할 수 있습니다. / 출처:Responsive breakpoints

프론트엔드 스터디

html / css를 책으로 공부하고자 한다면 HTML5+CSS3 웹 표준의 정석(Do it)을 추천합니다. 다른 좋은 책들도 많아서 딱 한권 뭐를 권하기는 좀 뭐하고, 위에 추천한 책은 정리가 잘 되어있는 책중 하나인것같아요. 만약 책이 아닌 동영상이나, 프로젝트 단위로 익히고자한다면 (저는 책보다는 이쪽을 더 추천함..) 아래의 방법으로 공부해보는것도 좋을 듯해요.

1. 생활코딩 클라이언트 코스에서 기본적인 개념을 익힙니다.
2. codecademy HTML/CSS의 기초코스(한글)에서 실습하면서 기초를 익힙니다.
3. tryhelloworld.co.kr에서 자바스크립트입문 코스를 보거나, codecademy Javascript코스(한글)에서 프론트단에 필요한 자바스크립트를 배울 수 있습니다.
4. bootstrap를 설치하고, bootstrap-theme.css파일을 까서 안에쓰이는 css옵션들이 어떤지 한번 훑어봅니다. 반응형웹에대한 정보는 사실 여기 다 있다고 봐도 됩니다.
5. 이후에는 원하는 웹사이트를 바로 만들어가면서 프론트스킬을 배워가는것이 좋을 것같아요. (책보고 어느정도 익히고 시작하려면 실제로 프로젝트 진행하기전에 다 잊어버리기도하고, 다시 배워야하기도 해서 추천하지는 않아요.) 모르는것이 생기면 google을 통해서 물어보면 css-tricks / stackoverflow / hashcode 등에 거의 있을 거구요.