[CSS] CSS란 무엇일까? ( + HTML )

성장을 즐기는 개발자, 최호경·2023년 3월 5일

CSS(Cascading Style Sheets)

CSS란?

CSS는 HTML 또는 XML 같은 마크업 언어로 작성된 문서의 모양 및 디자인을 표시하는 방법을 기술하기 위해서 사용하는 스타일 시트 언어입니다. CSS를 통해 요소가 어떻게 렌더링되어야 하는지 저정해줄 수 있습니다.

Cascading

캐스캐이딩은 '종속시킨다'는 의미를 갖고 있습니다. CSS는 작성한 선언을 여러 선택자와 속성을 이용하여 포함시키기 때문에, 중복 적용될 수 있습니다. 따라서 어떤 선언이 우선적으로 적용되야 하는지 정의해주고 있습니다. 이를 종속 알고리즘이라고 합니다.

CSS 선언

css는 아래와 같은 형식을 갖습니다. '속성'은 어떤 기능을 구현할지 결정하며, 사용자가 읽고 이해할 수 있는 키워드를 작성되었습니다. '값'은 지정한 속성을 어떤 방식으로 출력할지 결정하는 역할을 합니다. 각 속성에 전달할 수 있는 의미적 표현을 정해진 문법에 맞게 전달해야만, 브라우저 엔진이 구현할 수 있습니다.

속성: 값;

background-color: red;

css에서는 속성과 값 모두 대소문자를 구분하기 때문에 정확하게 문법에 따라 적어줘야 합니다. 콜론(:)과 세미콜론(;)도 반드시 들어가야 합니다. 부적합한 선언은 css 엔진이 완전히 무시하고 넘어갑니다.

CSS 선언 블록

여러가지 선언들은 {}로 둘러싸여 있습니다. 이를 선언 블록이라고 부르며, 선언끼리는 세미콜론으로 구분됩니다. 각 선언 블록 앞에는 CSS 선언을 적용시킬 특정 요소를 선택하는 선택자(selector)가 선행하여 작성됩니다.

header {
	color: red;
}
/* css의 주석 방식 */

오늘의 개발지식

HTML(HyperText Markup Language)

HMTL이란?

HTML은 웹 페이지를 구성하는 가장 기초적인 요소로, 웹 컨텐츠의 의미와 구조를 정의할 때 사용하는 언어입니다. 여기에 웹 페이지의 모양와 디자인은 CSS로, 기능과 동작은 JavaScript를 이용하여 구성됩니다.

HyperText

하이퍼텍스트는 한 웹 페이지에서 다른 웹 페이지로 연결해주는 링크입니다. 웹에서는 근본적으로 다른 사람이 만든 페이지로 링크되고 서로 자료를 공유할 수 있다는 점이 가장 큰 특징입니다.

MarkUp

웹 브라우저에 표시되는 글 또는 이미지 등 다양한 컨텐츠를 표시하기 위해, '마크업'을 사용합니다. 마크업은 <>로 둘러싸인 다양한 태그들을 가지고 있고, 주로 소문자로 작성합니다.

MarkDown은 뭐지?

마크다운은 일반 텍스트 기반의 경량 마크업 언어입니다. 서식이 있는 일반 텍스트 문서를 작성하는데 이용하며, 위에서 본 일반 마크업 언어에 비해 문법이 단순하고 사용하기 편합니다. HTML 등과 같은 서식 문서로 쉽게 변환되기 떄문에, 응용 소프트웨어와 함께 배포되는 설명 문서인 README 파일이나 블로그 같은 온라인 게시물을 작성하는데 주로 사용됩니다.