시맨틱 html과 CSS Flex

시맨틱 html을 지키는 이유

• 접근성 향상: 의미론적 태그는 시각 장애인을 위한 스크린 리더와 같은 보조 기술에 의미 있는 정보를 제공하고, 이는 웹사이트의 접근성을 향상시킨다.
• 검색 엔진 최적화(SEO): 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있도록 돕는 의미론적 태그를 사용하여 페이지를 더 효과적으로 인덱싱하여 검색 엔진 결과 순위를 높인다.
• 유지보수 용이성: 의미론적 태그는 코드의 가독성을 높여, 개발자들이 웹사이트를 더 쉽게 이해하고 유지보수할 수 있게 한다.

---

CSS Flex

display: flex; 또는 display: inline-flex;를 사용하여 설정

flex의 주요 속성

1. flex-direction: 아이템들이 흐르는 방향을 결정. row, column 등의 값이 사용됨.

2. justify-content: 주축을 따라 아이템들을 정렬. flex-start, center, space-between 등의 값이 사용됨.

3. align-items: 교차축을 따라 아이템들을 정렬. flex-start, center, baseline 등이 사용된다.

4. flex-wrap: 아이템들이 컨테이너를 벗어날 때 줄바꿈 여부를 결정. nowrap, wrap, wrap-reverse가 사용된다.