[HTML & CSS] 클론코딩 연습3

---

#1. 클론코딩 3

1. 레이아웃 구조 분석

https://www.w3schools.com

<!-- container -->
<div id="container">

  <!-- header -->
  <div id="header"></div>

  <!-- contents -->
  <div id="contents">

    <!-- food -->
    <div class="food"></div>

    <!-- number -->
    <div class="number"></div>

    <!-- about -->
    <div class="about"></div>

    <!-- footer -->
    <div class="footer"></div>
  </div>

</div>

 

2. 구현 및 상세 내용

• 공통적으로 사용되는 CSS

 

1) header

• 페이지 상단 영역에 위치해있다.
• 스크롤을 내릴 때 고정 되어있다.

HTML

CSS

 

2-1) contents - food

• 8개의 이미지와 텍스트가 나열되어 있다.
• 한 페이지를 25% 씩 나누어 4개씩 배치 

HTML

CSS

 

2-2) contents - number

• 1번에는 배경색이 지정되어 있다.
• 1번을 포함한 다른 번호 및 화살표는 마우스를 올리면 배경색이 변한다.

HTML

CSS

 

2-3) contents - about

• 이미지와 텍스트가 가운데 위치하고 있다.

HTML

CSS

 

2-4) contents - footer

• 컨텐츠 영역 하단에 위치
• 크게 3개의 영역으로 나누어져있다.

HTML

CSS

 

3.  최종 결과물

 

4. 소요시간 및 소감

- 소요시간 : 4시간

- 소감

1. 속성과 속성값을 지정 했는데도 구현되지 않는 부분이 많았다.
   • 속성값을 어디에 주느냐에 따라 구현되고 안되고의 차이를 분명히 숙지해야 한다.
   • 부모 태그와의 상관 관계를 확인 해야 한다.
   • 부모 태그의 속성에 따라 자식 태그에서 정의할 수 있는 속성이 있다.