2022-02-15 13:58 작성
CSS란 무엇인가?
Table of contents
도입
CSS(Cascading Style Sheets)는 web pages를 보기 좋게 해준다. 그렇다면 이 CSS는 내부에서 어떻게 작동하고 있는 것일까? 이 글에서는 CSS가 무엇인지에 대해 설명하고, 간단한 문법 예시를 통해 이해를 도울 것이다. 그리고 CSS라는 언어의 주요 용어에 대해 다룰 것이다.
HTML 도입 module 부분에서 HTML이란 무엇인지, 그리고 markup documents에서 어떻게 사용되는지에 대해 알아보았다. Web browser는 이러한 documents를 읽어, Headings는 일반 text보다 더욱 더 크게 보이게 하고 paragraphs를 새로운 줄로 쪼갠 뒤, 그 사이에 space(공간)를 배치할 것이다. Links는 여타 text와 구분되어 색이 칠해지고 밑줄이 그어진다. 당신이 바라보고 있는 것은 browser의 기본 styles로 HTML에 적용되는 아주 기초적인 styles다. 이것은 기본적으로 page의 저자에 의해 명시된 styling이 존재하지 않더라도 HTML에 적용 돼 documents를 읽을 수 있게 한다.
그러나 만약 websites가 모두 이런 식이라면 web 생태계는 매우 지루한 곳일 것이다. CSS를 사용해 browser에서 HTML elements가 어떤 식으로 보여질지 통제할 수 있고, 원하는 디자인 형태에 따라 markup을 표현할 수 있다.
Browser/default styles에 관해 더 알고 싶다면 다음의 동영상을 참고하자:
CSS는 무엇을 위한 것인가?
이전에 언급했듯이, CSS는 documents가 어떻게 사용자들에게 표현되었는지 구체화하는 언어다(어떤 식으로 style이 지정되었고, layout이 지정되었는지 등).
Document는 대개 markup 언어를 사용해 구조화된 text file을 말한다 - HTML이 가장 흔한 markup 언어지만 SVG 혹은 XML과 같은 markup 언어들을 떠올릴 수도 있다.
사용자에게 document를 presenting(보여줌) 하는 것은 document가 당신의 독자에 의해 형태(form)가 변환될 수 있다는 것을 의미한다. 예를 들어, Firefox, Chrome, 혹은 Edge와 같은 browsers는 컴퓨터 화면, 프로젝터, 혹은 프린터에 documents를 보여주도록 디자인 되었다.
Note: 하나의 browser는 때때로 user agent라고 불리기도 하는데, 이는 기본적으로 컴퓨터 시스템 상에서 한 명으 ㅣ사람을 대표하는 컴퓨터 프로그램이라는 것을 의미한다. CSS에 관해 얘기할 때, browsers가 주요 user agent type이라고 생각하지만, 단지 browser만이 해당되는 것은 아니다. Browser 외에도 user agents가 될 수 있는 것들이 있는데, HTML과 CSS documents를 PDFs로 전환해 프린팅 되게 하는 것도 그 중 하나다.
CSS는 가장 기초적인 document의 test styling에 사용될 수 있다 - 예를 들어, headings와 links의 색깔이나 크기를 바꾸는 것이 예시가 될 수 있다. 또한, CSS는 layout을 생성하기도 한다 - 예를 들어, 하나의 열로 구성된 text를 layout으로 바꾸기는 main content area와 관련된 정보를 배치할 수 있는 sidebar area layout에 대한 힌트를 제시한다. 그리고 CSS는 animation과 같은 효과를 주는데에도 사용될 수 있다.
CSS syntax(문법)
CSS는 규칙에 기반한 언어다 - Web page에서 특정 elements 혹은 elements groups에 적용될 styles groups 규칙을 정의하고 구체화한다.
예를 들어, “나는 page의 main heading이 큰 적색 text처럼 보였으면 해.”라고 한다면, 다음의 코드를 통해 규칙을 구체화할 수 있다:
h1 {
color: red;
font-size: 5em;
}
CSS Modules
CSS 기술명세
CSS는 W3C 안에 있는 CSS Working Group라는 곳에 소속된 group이 개발하고 있다. 이 group은 browser vendors와 CSS에 관심있는 다른 회사들로 구성되어 있다. 그리고 여기에는 초청 전문가로 알려져 있는 독립된 발언권을 가진 사람들이 있으며, 이들은 회원 기관으로 연결되어 있지는 않다.
새로운 CSS 기능들은 CSS Working Group에 의해 개발되고 구체화 된다. 이것은 때로 특정 browser는 어떤 역량을 가지는 것에 관심을 가지고 있기에, 또 다른 때에는 web designers와 developers가 새로운 기능을 요청하기에, 그리고 또 Working Group이 필요함을 느꼈기에 새로운 기능들이 개발되고 구체화 된다. CSS는 끊임없이 개발되고 있고 이에 따라 사용자들은 새로운 기능들을 사용할 수 있게 된다. CSS에서 중요한 것은 오래된 websites의 style을 망가뜨리지 않는 방식으로 작업하는 것이기에 관계자들은 많은 노력을 하고 있다.
CSS를 처음 접하는 사용자들은 CSS의 기술명세에 압도될 수도 있다 - 그러나 이러한 기술명세는 engineers에 의해 user agents에서 기능들을 지원하기 위한 용도로 사용된다. 즉, CSS를 이해하기 위해 읽는 web developers를 위한 용도가 아니라고 할 수 있다. 그래서 경험이 있는 많은 developers는 MDN documentation 혹은 다른 tutorials를 참고한다. 그럼에도 불구하고 기술명세가 존재한다는 사실을 아는 것, 그리고 CSS와 당신이 사용하는 browser의 지원여부, 그리고 기술명세 간의 관계를 이해하는 것은 가치있는 것이다.
Browser 지원 정보
한 번 CSS가 구체화 되면 그 다음 web pages를 개발하는데 있어 유용한 것은 하나 혹은 그 이상의 browsers에서 그 CSS를 실행하는지 여부다. 이것은 쓰여진 code가 CSS file의 지시를 화면 상에 띄울 수 있는 어떤 결과물로 바꾼다는 것을 의미한다. 이 부분은 CSS가 작동하는 방식에서 더 자세하게 다룰 것이다. 모든 browsers가 하나의 기능을 동시에 실행하는 것은 일반적이지 않고, 그래서 대개 어떤 browsers에서(어떤 browsers는 그렇지 않음) 사용할 수 있는 일부 CSS에서 차이가 발생한다. 이러한 이유로 CSS 실행 상태를 확인하는 것은 유용하다.
Browser 지원 상태(support status)는 MDN property page의 “Browser compatibility(Browser 호환성)”(특정 property가 website에서 사용될 수 있는지 확인하는데 사용)라는 이름으로 서비스 되고 있다. 예를 들어, CSS font-family의 호환성은 해당 link에서 확인 가능하다.
저작권
Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.