HTML

HTML(HyperText Markup Language)은 아래와 같은 구조를 가졌다.

<여는-태그>컨텐츠</닫는-태그>로 구성 되어있고 해당 구조는 전체를 요소라고 부른다.

Semantic Tag

시멘틱 태그는 다른 태그들과 달리 이름만 보고도 그 태그가 어떠한 목적을 가졌는지 알 수 있도록 설계된 의미가 있는 태그이다.
시멘틱 태그를 사용하면 SEO 최적화가 가능하고 HTML 구조를 한눈에 파악할 수 있어 문서의 구조와 내용을 더 쉽게 이해할 수 있다.

<header> : 문서나 섹션의 머리글
<nav>: 내비게이션 링크들
<article>: 독립적으로 구성이 가능한 글
<section>: 문서의 일반적인 구획
<aside>: 주요 콘텐츠와는 관련성이 적은, 부가적인 콘텐츠
<footer>: 문서나 섹션의 바닥글

기존에 개발을 진행할 때 시멘틱 태그의 중요성을 파악하지 못해 사용하지 않고 <div> 태그로만 구조를 작성했던 생각이 난다. 다만 앞으로는 시멘틱 태그를 이용하여 의미를 기준으로 구조를 나누며 개발을 진행하면 도움이 될 거 같다.

CSS

CSS(Cascading Style Sheet)는 아래와 같은 구조를 가졌다.

선택자를 명시하고 속성: 값을 브레이스로 감싸준다.

Attribute Selector

속성 선택자는 아래와 같은 구조를 가지고 있다.

[attribute] {
  color: red;
}	/* 해당 속성을 가지고 있는 모든 요소에 스타일 적용 */

[attribute=value] {
  color: red;
}	/* 해당 속성과 값이 일치하는 모든 요소에 스타일 적용 */

[attribute^=value] {
  color: red;
}	/* 해당 속성을 가지고 있고, 접두사로 값을 포함하고 있는 모든 요소에 스타일 적용 */

[attribute$=value] {
  color: red;
}	/* 해당 속성을 가지고 있고, 접미사로 값을 포함하고 있는 모든 요소에 스타일 적용 */

기존에 개발을 진행할 때는 속성 선택자를 사용하지 않았는데 실강을 통해 속성 선택자의 존재에 대해 리마인드할 수 있었고. 예전에 CSS를 학습할 때는 못 느꼈지만 속성 선택자를 다시 보니 추후에 활용할 수 있는 간단한 상황이라도 있을 거 같다.