Website Layout
Static Page Layout
Liquid Page Layout
Adaptive Page Layout : 요소의 크기는 고정되어 있다가 지정 화면 크기에 따라서 크기가 달라짐.
Responsive Page Layout : 비율적으로 요소의 크기를 제어하다가 지정 화면 크기에 따라서 달라짐.
프런트엔드 개발에서 고려해야 할 요소
- 크로스브라우징(cross browsing)
: html, css, 그리고 javascript 작성시 W3C 의 web standard에 맞는 코딩을 함으로써 어느 브라우져에서나 기기에서 사이트가 제대로 보여지고 작동되도록 하는 기법을 말한다. - 웹 표준(Web standard) : 하나의 소스로 모든 브라우저나 플랫폼에서 같은 컨텐츠를 볼 수 있도록 하는 것을 말한다.
- 웹 접근성(Web accessibility) : 개인의 능력에 상관없이 모든 사람에게 웹을 사용할 수 있게 하는 것을 말한다.
Web accessibility benefits
1. Easier to develop with
2. Better on mobile : semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive
3. Good for SEO(search engine optimization) : search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic<div>s, etc., so your documents will be more findable by customers.
- Examples
BAD -> <a href="whales.html">Find out more about whales</a>. GOOD -> To find more out about whales, <a href="whales.html">click here</a>.BAD -> Fill in your name: <input type="text" id="name" name="name"> GOOD -> <div> <label for="name">Fill in your name:</label> <input type="text" id="name" name="name"> </div>
- 관련 용어
FTP
라이브러리
semantic HTML Tags
header, h, nav, main(role="main"), section, article, aside, footer
학습후기
오늘부터 본격적으로 frontend 학습이 시작되었는데, 무엇보다도 블로깅이 제일 어렵다. 동영상 강의를 다 들은 뒤에 정리를 하자니 더 어려운 것 같아서 내일부터는 블로깅을 하면서 강의를 들어야겠다.
