[웹] 인프런메인페이지 구조짜기 - HTML(2)

지난 페이지에서는 header 부분만 html 을 짰는데 이번엔 contents 영역을 코딩하려고 한다.

 

 

 

비교적 단순한 구조이고 내용의 구조가 반복되는 형태가 많아 class 명도 많이 사용하지않고 구조 짜는것이 가능하다.

 

 

 

HTML 코드구조

 

 

 

이미지는 캡쳐화면의 사이즈를 고려하여 넣지않고 img 태그의 속성중 alt 속성을 사용하여 설명글로 대체하였다.

 

결과화면

 

- section 이라는 큰 틀에서 contents 를 담았다.

- section 내부에 article 이라는 태그를 넣어서 새로운강좌와 추천강좌를 구분지었다.

- 의미를 명확히 하기 힘든 구조는 div 태그로 묶고 class 명을 지정해 주었다.

- class 명은 최대한 다른사람이 보더라도 어느 부분에 해당하는지 알기쉽게 하려고 노력하였다.

- 나열 형태의 레이아웃이다보니 list 태그인 ul>li 를 많이 활용하였다.

- 제목이나 타이틀에 해당되는 부분은 h1~h4 까지의 제목태그를 활용하여 작성하였다.

- 이미지부분은 결과화면을 보여줄때 너무 길어지는 부분때문에 img 태그 속성중에 alt 를 활용하여 텍스트로 표현하였다.

 

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.