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

인프런메인페이지 구조짜기

 

• 1단계 - 메인페이지 구조 분석
• 2단계 - 분석토대로 시멘틱태그와 클래스명 정하기
• 3단계 - 불꽃코딩

 

 

1단계 - 메인페이지 구조 분석

 

현재 인프런의 메인페이지 캡쳐화면▲

 

 

 

큰 구조로 나눔 ▲

 

 

큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲

 

 

큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲

 

 

큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲

 

 

 

2단계 - 분석토대로 시멘틱태그와 클래스명 정하기

 

 

 

3단계 - 불꽃코딩

 

 

 

결과화면

 

 

인프런 로고와 함께 있는 이미지는 css 에서 background 로 삽입된 이미지라 html에서는 포함하지 않았습니다.

실제 인프런 페이지는 FONTAWSOME 이란 라이브러리를 통해 아이콘을 사용하였고

전체 레이아웃은 부트스트랩을 사용한것으로 보여집니다.

 

 

 

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