-
[부스트코스] 1. 웹 프로그래밍 기초 : HTML 구조설계, class&idFront-end/부스트코스 : 웹 프로그래밍 2020. 2. 2. 22:54
참고 강의 : https://www.edwith.org/boostcourse-web/lecture/16668/
[LECTURE] 3) HTML 구조설계 : edwith
들어가기 전에 웹페이지를 만드는 것은 문서의 구조를 잡는 것과 같습니다. 제목, 단락 등이 있는 것과 같습니다. 그런 관점으로 웹사이트의 문서구조를 만드는 것이 가장 먼저 할 일 ... - 윤지수
www.edwith.org
* HTML 구조설계 (HTML structual design)
- body : 바탕이 되는 큰 레이아웃
- 계층적인 구조를 통해 html을 구성함
위 그림을 html 구조설계를 통해 대략적인 배치만 해보는 실습을 했다.
<!DOCTYPE html> <html> <head> <title>Page Title</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="" alt="img1"></div> <div><img src="" alt="img2"></div> <div><img src="" alt="img2"></div> <button>></button> </section> <section> <ul> <li> <h3>About Us</h3> <div>about</div> </li> <li> <h3>What We Do</h3> <div>what</div> </li> <li> <h3>Contact Us</h3> <div>contact</div> </li> </ul> </section> </section> <footer> <span>copyright</span> </footer> </body> </html>위 코드를 실행시키면 다음과 같다.
이미지도 없고 CSS도 적용을 안하니 뭔가 구리다...
* HTML class와 id
웹 페이지를 만들면 절대 빠질 수 없는 속성이 class와 id이다.
class (클래스) id (아이디) 중복해서 여러 군데에 쓸 수 있음 고유한 속성 동일한 CSS 스타일 부여 하나하나 특별한 제어를 할 수 있음 즉 비슷한 스타일을 갖는 영역들은 같은 클래스 이름을 부여하고
고유하게 존재하는 영역에는 id값을 지정해주는 것이다.
이미지 출처
[코드스쿼드] HTML, CSS 개발을 위한 핵심가이드
HTML, CSS 개발을 위한 핵심가이드
antaehyeon.github.io
'Front-end > 부스트코스 : 웹 프로그래밍' 카테고리의 다른 글
[부스트코스] 1. 웹 프로그래밍 기초 : JDK 설치하기, 환경설정 (0) 2020.02.19 [부스트코스] 1. 웹 프로그래밍 기초 - CSS (0) 2020.02.16 [부스트코스] 1. 웹 프로그래밍 기초 : HTML tags, layout (0) 2020.01.29 [부스트코스] 1. 웹 프로그래밍 기초 : WAS (웹 어플리케이션 서버) (0) 2020.01.29 [부스트코스] 1. 웹 프로그래밍 기초 : 웹 서버 (web server) (0) 2020.01.15