본문으로 건너뛰기

2장

HTML과 CSS​

HTML​

HTML(Hyper Text Markup Language)에서 HyperText는 하이퍼링크(클릭하면 다른 문서나 웹 페이지로 이동하는 링크)와 관련된 텍스트를 의미하고, Markup은 웹 페이지의 외형을 의미한다.

즉 HTML은, 하이퍼텍스트와 관련된 문서의 외형을 구성하기 위한 언어라고 할 수 있다.

HTML이라는 이름 자체에서 전통적인 웹 페이지는 주로 문서, 즉 정보 전달의 수단으로 주로 활용되었음을 유추할 수 있다.

HTML은 여러 요소(Element)로 이루어져있으며, 요소는 태그와 내용으로 이루어져있다.

태그의 종류에 따라 내용이 있을 수도, 없을 수도 있으며 태그에서 활용할 수 있는 속성의 종류가 달라지기도 한다.

태그의 종류는 당연한 얘기지만 일일이 알고있을 필요는 없고, 자주 사용되는 태그를 마크업 개발에 직접 적용해보면서 체화하는게 중요하다.

내용을 포함할 수 있는 태그는 주로 문서의 골격(구조)을 나타내는 용도로 활용되며, 내용의 종류에 걸맞는 태그를 활용해서 마크업을 작성하는 것을 시멘틱 마크업이라고 한다.

시멘틱 마크업은 SEO(Search Engine Optimization)와 밀접한 관련이 있다.

검색엔진은 전세계의 웹페이지의 정보를 수집하고, 사용자가 입력하는 키워드와 관련된 페이지를 보여주는 것이 주 기능이다.

검색엔진은 내장된 웹 크롤러가 수집한 웹 페이지에 대한 정보를 바탕으로 해당 웹 페이지가 어떤 키워드와 연관된 페이지인지를 이해하게 된다.

이 때 웹 크롤러는 페이지가 제공하는 메타 정보, 해당 페이지의 마크업 구조를 바탕으로 페이지를 분석하는데, 마크업 구조를 분석할 때 시멘틱 마크업이 적용된 페이지에 대해 더 높은 분석력을 보인다.

키워드와 연관된 페이지 목록에서 상위에 노출되려면 검색엔진의 입장에서 해당 웹 페이지에 대한 정보가 풍부해야하고, 그런 정보가 키워드와 많이 연관되었다고 판단되어야한다.

이런 판단의 척도에 따른 우선순위를 정량적인 지표로 나타낸 것이 흔히 말하는 'SEO 점수'가 된다.

따라서 시멘틱 마크업을 준수하는 것은 SEO 점수 향상에 도움이 되기 때문에 중요하다고 할 수 있다.

이외에 SEO를 위해 프런트엔드 개발자가 작업해야할 목록은 아래와 같은 것들이 있다.

  • 라우트별 <title> 적절하게 작성

  • <meta name='description' content='설명'> 을 활용한 라우트별 description 정보 제공

  • <meta charset='utf-8'>을 활용한 라우트별 인코딩 방식 지정

  • OpenGraph 태그, Twitter 태그 등을 활용한 메타 정보 제공

CSS​

CSS는 어떨까? CSS는 Cascading Style Sheets의 약자인데, Cascading의 사전적 의미는 '계속되는, 연속되는'이다.

DB를 공부할 때 CASCADE 옵션에 대해 공부했을텐데, delete 명령에서 이를 활용하면 참조 관계에 있는 테이블의 데이터도 연속해서 지워내며 데이터의 일관성을 지킬 수 있었다.

CREATE TABLE 주문 (
    주문_ID INT PRIMARY KEY,
    주문_날짜 DATE
);

CREATE TABLE 주문_상세 (
    주문_상세_ID INT PRIMARY KEY,
    주문_ID INT,
    상품_ID INT,
    수량 INT,
    FOREIGN KEY (주문_ID) REFERENCES 주문(주문_ID) ON DELETE CASCADE
);
// 주문 테이블의 데이터가 삭제되면 주문 상세 테이블의 데이터도 같이 제거

이처럼 CSS의 Cascading은 연속해서 스타일시트(스타일)를 HTML 요소에 적용할 때 '일정한 규칙에 따라 최종적으로 적용되는 스타일을 결정하는' 성격이다.

여기서 일정한 규칙은 아래와 같다.

  • 상속: 기본적으로 자식 요소는 부모 요소의 스타일을 상속받는다.
  • 명시도: 스타일의 우선순위는 선택자의 명시도(Specificity)가 높은 스타일이 높다.
  • 덮어씌워짐: 동일한 스타일이라면 나중에 작성된 스타일이 먼저 작성된 스타일을 덮어쓴다.