홈페이지를 만들어보자!(3) - 제품소개란..

이부분은 우선 결과와 코드를 캡쳐해서 올리고 코드를 왜 이렇게 썼는지 쓰는게 나을 것 같다..

뭐라 설명하기가 어렵다..

<!-- main.html -->
<div class="section_productIntroduce">
  <h1 style="text-align: center">제품 소개</h1>
  <div class="section_product_wrap">
    <div class="section_product">
      <img src ="./data/slow.png">
      <p>완속</p>
    </div>
    <div class="section_product">
      <img src ="./data/fast.png">
      <p>급속</p>
    </div>
    <div class="section_product">
      휴대용
    </div>
  </div>
</div>


<!--main.css-->
.section_product_wrap{
  border: 1px solid black;
  position : absolute;
  width : 60%;
  display : grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.section_product{
  border: 1px solid black;
  width : 100%;
  text-align : center;
  position : relative;
}

코드를 짜면서 든 생각은 div 태그의 사용을 조금은 줄여야 하지 않나 라는 생각이 들었다.

왜냐면 HTML에서는 단락을 나누는 태그, 이미지를 띄우기 위해 사용하는 태그 등등

의미를 가지는 태그들이 있는데 무분별한 div태그의 사용은 별로 좋지 않은 것 같다

section 과 article을 넣어보고 싶었는데 넣기가 생각보다 어려웠다.

아직 초심자라 그런가..

 

이번에는 CSS에서 grid를 사용해서 가로로 정렬을 하고 싶었다.

그래서 정렬할 것을 div를 사용해서 부모 태그로 한번 묶었다. 그리고 영역이 눈에 좀 잘 보이도록

border로 테투리를 만들었다. 중복해서 그어지는 부분이 있기 때문에 나중에 이부분은 수정을 해줘야겠다.

그리고 웹페이지의 너비에 맞게 width를 조절했다..

이미지의 높이와 너비는 아직 맞추지 않았는데 이 부분을 맞추면 또 글을 작성을 해봐야겠다.