20230325 [HTML / CSS] 요소.. 그냥 대충 하나 골라서 쓰면 안되나요?

6주차에는 HTML과 CSS에 대해 학습한다. HTML과 CSS가 뭘까?

• HTML(Hypertext Markup Language) : 콘텐츠의 구조를 정의하는 마크업 언어 (하이퍼텍스트 문서를 만드는 데 사용되는 언어)
• 하이퍼텍스트 : 웹 페이지를 다른 페이지로 연결하는 링크
• 마크업 : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 것
  HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용한다.

• CSS (Cascading Style Sheets) : HTML로 작성된 문서가 실제 표시되는 방법을 기술하는 스타일 시트 언어
  CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정한다.

한 줄로 HTML과 CSS의 관계를 정리하자면,
웹 페이지를 만들 때 HTML은 구조와 내용을 제공하고 CSS는 스타일과 레이아웃을 제공한다.
정도로 정리할 수 있겠다.

태그와 요소라는 개념도 등장했는데 잘 구분해서 정리해두면 좋을 것 같아 정리해두었다.

HTML에서 태그와 요소는 웹 페이지의 콘텐츠를 구조화하고 정의하는 데 사용되는 두 가지 기본 개념이다. 요소와 태그는 같지 않다. 태그는 소스 코드에서 요소의 시작과 끝을 표시하고, 요소는 브라우저가 페이지를 표시할 때 사용하는 문서 모델인 DOM의 일부이다.

• 태그 : 요소의 시작 또는 끝을 나타내는 코드 조각
  • 요소를 만들 때 사용한다.
  • 요소 이름을 부등호 사이에 넣어서 태그를 구성할 수 있다.
  • 닫는 태그는 이름 앞에 슬래시 문자를 포함한다.
• 요소 : 태그, 속성 및 콘텐츠의 조합
  - 요소는 웹 페이지를 구성한다.
  - HTML에서 요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있다.
  - 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성된다.
  

여기까지 정리한 후 HTML 요소에 대해 공부하기 시작했는데 어마무시하게 많더라. 양이 많기도 많지만, 목적에 적합한 HTML 요소를 선택하는 것이 어려울 것 같았다. 같은 효과이더라도 목적에 맞는 HTML 요소를 적절하게 골라 사용해야 하는데 예를 들면 다음과 같은 상황이 있겠다.

• div 요소 : 콘텐츠 영역의 주제를 명확하게 드러낼 수 있는 제목이 자연스럽게 떠오르지 않는다면 section으로 구획을 정하는 것보다 div가 나은 선택일 수 있다.
• section 요소 : 테마별로 연관된 콘텐츠를 묶는 데 사용한다.
• article 요소 : 블로그 포스트나 기사 글은 문맥과 상관없이 그 부분만 떼어내서 이메일로 보냈을 때 여전히 문서로서 의미 전달에 문제가 없다. 이렇게 콘텐츠 영역을 독립적으로 배포할 수 있는 경우에 article 요소가 더 나은 선택이다.

section은 다른 어떤 것의 일부를 구성하고, article은 스스로 온전히 자신을 구성한다. 두 요소를 구분할 수 있는 차이점은 오직 독립적으로 사용할 수 있는지의 여부 뿐이다. 더 엄격한 규칙이 있다면 어떤 요소를 쓸 것인지 좀 더 쉽게 판단할 수 있겠지만 결국 어떤 요소를 사용할지에 대한 결정은 해석에 달린 문제이다. 이쯤되니 명확한 정답도 없고, 어차피 구획을 나누는 건 같은데 대충 하나 골라서 하면 되는거 아닌가 싶었다. 하지만 의도된 목적에 적합한 요소를 사용하는 것은 여러가지 이유로 중요했다. 의미적 가치(semantic value)를 얻기 위해서는 의미론적인 마크업을 사용해야만 했다. 의미론적인 마크업 사용의 장점은 다음과 같다.

• 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영한다.

사용할 마크업에 접근할 때 스스로에게 물어봐야 한다. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 예를 들어, 그 데이터는 정렬된 목록인가? 정렬되지 않은 목록인가?, 관련된 정보가 제외된 섹션이 있는 아티클(article)인가?, 정의의 나열인가?, 캡션이 필요한 그림 또는 이미지인가?, 사이트 전체 머리글(header) 및 바닥글(footer) 외에 또 다른 머리글과 바닥글이 있어야 하는가? 등등

이렇게 오늘 공부한 내용의 흐름을 TIL로 정리해 보았는데, 작성하고 나니 오늘 공부한 내용이 한 줄기로 합쳐지는 것 같다. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 에 대한 판단을 내리기 위해서는 최소한 어떤 요소들이 존재하는지 파악해두어야 할 것 같다. 정확하진 않더라도 이런게 있었나..? 정도는 되어야 검색해보고 가져다 쓸 수 있을 것 같은데.. 문제는 너무 많다.. 일단 주말동안 최대한 학습해보자!