책 정보
읽은 책 : 모두의 HTML5 & CSS3
읽은 분량 : 책의 DAY 분류 기준으로 DAY 1
1. 웹 사이트의 구성
HTML은 웹사이트의 설계 역할. 사이트에서 눈에 보이는 정보를 입력함. CSS는 디자인, 애니메이션 효과나 팝업 같은 기능은 js.
2. 웹 사이트 레이아웃의 종류: 정적/동적, 적응형/반응형 레이아웃.
- 정적 레이아웃 : 공간의 크기가 변하지 않음, 고정. 브라우저 너비를 줄이면 가로 스크롤이 생김. PC에서는 화면이 모니터보다 크면 잘려서 보이고, 모바일 기기에서는 전체 화면을 디바이스에 한번에 나타내기 때문에 글씨가 너무 작게 나옴. 사용자가 쓰기 불편하다(당연히 만들기는 편하겠지).
- 동적 레이아웃 : 브라우저 너비와 상관 없이 콘텐츠가 화면을 꽉 채우게 나옴. 화면 크기가 변하기 때문에 가로 스크롤 없다. 대신 레이아웃이 틀어질 수 있음.
- 적응형 레이아웃 : 브라우저 너비에 따라 레이아웃이 달라짐. 공간의 크기는 고정되어 있다. 다양한 기기에서 지원 가능하고 반응형 레이아웃보다 빨리 만들 수 있다.
- 반응형 레이아웃 : 동적 + 적응형 레이아웃. 과거에는 모바일용 웹사이트를 따로 만들었지만(주소에
m.이 들어감) 반응형 레이아웃을 쓰면 그럴 필요가 없다. 개발 비용은 줄지만 개발자는 더 많은 고민을 해야 한다.
3. 크로스 브라우징
사용자가 사용하는 브라우저 종류와 관계 없이 같은 화면을 볼 수 있게 하는 것(정상 작동 포함). 익스플로러를 조심하라.
- Can I use(http://caniuse.com/) : 특정 언어의 지원 여부를 브라우저 버전별로 보여주는 웹 사이트. html, css, js의 특정 태그나 명령어를 입력하면 됨.
4. 웹 표준 : 협업을 위한 약속
W3C(World Wide Web Consortium)이 만든 가이드라인.
웹 표준에 맞춰 사이트를 제작하면 검색 사이트에 노출될 확률이 높아지고, 장애에 대한 접근성 좋아지고, 유지보수가 편해짐.
덤 - 독학 추천 사이트(내 의견 아님, 책이 추천함)
- 생활코딩: https://opentutorials.org/
- 코드카데미: http://www.codecademy.com
- W3Schools : http://www.w3schools.com/
내 의견 : “생활코딩”은 실상 들어가보면 사이트 이름이 “생활코딩”이 아니었다. 책에서 추천한 의도는 ‘이 사이트에서 “생활코딩”의 강의를 찾아라’인 것 같음. 코드카데미는 나도 잘 쓰고 있는데 책에서 한국어가 된다고 하는 것과는 달리 한국어 안 된다. 영어 할 줄 알면 유용하게 배울 수 있다. 영어를 못하면 크롬 자동 번역을 쓰면 된다. 번역이 그렇게 잘 되는 건 아닌데 그럭저럭 공부는 할 수 있다. W3Schools는 가끔 간단한 문법 검색하면 뜨는 사이트인데, while문을 for문 같이 써서 마음에 안 든다. while 종료 조건으로 인덱스를 따로 만들어서 쓰면 그게 for문이지 while이냐?