[HTML,CSS] section과 article의 차이, CSS word-break

<section> 과 <article>의 차이

• section: 영역들(큰 주제)를 논리적으로 그룹화해서 분리하는 역할.
  article의 집합소가 될 수 있음

  제목이 필수값이기에 어떤 문장에 <h>를 사용해야할지 생각해 봐야겠다

• article: 문서내에서 그룹화해서 분리하는 역할, 내용이 독립적임

  독립적이라는 것은 특정 맥락에 국한되지 않고 다른 곳에서 참조되거나 링크될 수 있음을 의미
  ex) 블로그 포스트 ,뉴스 기사

• div: 논리적인 관계 없이 그룹화하거나 디자인을 위해 사용

<section class="section1">
        <div class="section1_block">
          <div class="section1_title_layer">
            <div class="section1_title">
              일상의 모든 물건을
              거래해 보세요
            </div>
            <div class="show-btn">
              <a href="/items.html" class="btn-font">구경하러 가기</a>
            </div>
          </div>
          <div> 
            <img src="img/panda.png" alt="panda img" class="section1_image">
          </div>
        </div>  
      </section>

이건 마켓 랜딩 페이지를 만들고 있는 내 코드의 일부분이다
여기서 section1_title_layer를 포함하는 태그를
div가 아닌 article로 쓰는게 더 좋을 것 같다

목적에 맞는 네이밍

추가적으로 이 파일에서 section에 사용될 클래스 이름들을
단순히 section1,2 이런식으로 뒤에 숫자만 붙혀서 표기하였다.
앞으로 이런 점들을 조심히 하고, 클래스의 목적에 맞게
이름을 설정할 수 있도록 해야겠다
클래스이름 뿐만 아니라 파일 이름들도.

CSS 속성: word-break

https://developer.mozilla.org/ko/docs/Web/CSS/word-break
mdn 공식문서에 있는 word-break에 대한 설명이다.

html말고 CSS에서도 줄바꿈을 제어할 수 있다
단순히 html로 요소를 제어하는 것 뿐만 아니라
css로도 원하는 대로 표현하는 것이 중요할 것 같다
위 코드에서도 나는 기존에 <br>태그로 나눴었지만,
문서를 보고 class에 속성을 추가하여 적용해보았다

.section1_title {
  width: 70%;
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  word-break:break-all;
}

원래 width가 없었지만 내가 원하는 대로 줄바꿈이 안 되어
width도 곁들여 주었다

CSS는 좀 까다롭다. 롤 끊고 그 시간에 공부해야지