-
190527 HTML/CSS 학습 노트 - 1스터디/프론트 엔드 2019. 5. 27. 22:10
1. UI레이아웃을 위한 HTML 태그들
1. HTML 5에 새롭게 추가된 header나 footer 등의 태그는 모바일 환경에서 주로 사용한다.
그 이유는 모바일 대부분 최신 브라우저를 사용하고 있기 때문에, 위 태그를 사용해도 문제없이 돌아간다.
2. PC는 사용자가 가장 오래된 버전부터 최신 버전까지 사용하는 경우가 있기 때문에, Web이라는 공공재 특성 상 그 사용자들을 배려해야 한다. 그래서 header나 footer를 사용하지 않고, div태그를 활용하고 그 대신 class 값을 header나 footer로 주어서 그 구분을 하고 있다.
html5 신규 태그들 3. HTML 구조화 설계
검색어 : html structure design 
아래 코드는 위 사진의 html 구조 css는 적용안된 상태 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <header> <h1>Company Name</h1> <img src="...." alt="logo"> </header> <section> <nav><ul> <li>Home</li> <li>Home</li> <li>About</li> <li>Map</li> </ul> </nav> <section> <button></button> <div><img src="dd" alt="dd"></div> <div><img src="dd" alt="dd"></div> <div><img src="dd" alt="dd"></div> <button></button> </section> <section> <ul> <li><h3>About us</h3> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corporis quidem nesciunt architecto et est, temporibus in incidunt sed blanditiis ab eaque illum aliquam repellendus minima reiciendis enim itaque similique?</div></li> <li> <h3>What we do</h3> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corporis quidem nesciunt architecto et est, temporibus in incidunt sed blanditiis ab eaque illum aliquam repellendus minima reiciendis enim itaque similique?</div> </li> <li><h3>Contact Us</h3> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corporis quidem nesciunt architecto et est, temporibus in incidunt sed blanditiis ab eaque illum aliquam repellendus minima reiciendis enim itaque similique?</div></li> </ul> </section> </section> <footer><span>Copyright @codesquad</span></footer> </body> </html>'스터디 > 프론트 엔드' 카테고리의 다른 글
190528 HTML/CSS 학습 노트 - 2 (0) 2019.05.28 [Naver D2] 빠르게 살펴보는 웹 개발 트렌드 (0) 2019.05.27 프로그레시브 웹앱(Progressive Web Apps)이란? (0) 2019.05.24