2022-02-15 16:28 작성

CSS 시작하기

Table of contents

CSS 시작하기

Elements의 기본 행위 바꾸기

Markup이 잘 된 HTML document를 볼 때, browser가 기본 styling을 더해 어떻게 HTML을 읽을 수 있게 하는지 볼 수 있다. Heading는 크고 굵고 list는 총알 표시를 가지고 있다. 이것은 browers가 모든 pages에 적용하는 기본 styles를 내부 stylesheets에 가지고 있기 때문에 발생한다. 만약 이러한 기능이 없다면 text 무더기에 하나 하나 손수 styling을 해야 하는 불상사가 벌어질 것이다. 그리고 모든 최신 browsers는 HTML content를 기본적으로 같은 방식으로 보여준다.

그러나 당신은 종종 browser가 선택하는 기본 style이 아닌 다른 것을 원할 수도 있을 것이다. 이것은 HTML element를 선택하고, CSS 규칙에 따라 보여주고자 하는 식으로 조정하는 방법으로 성취할 수 있다. 이를 보여주는 좋은 예시는 <ul>, unordered list(비정렬 list)다. 이것은 list bullets를 가지고 있고, 이러한 bullets 형태를 원하지 않아 없애고자 한다면 다음과 같이 명령을 정할 수 있다:

li {
    list-style-type: none;
}

list-style-type property는 MDN에서 어떤 values가 지원되는지 볼 수 있는 좋은 property 예시다. list-style-type에서 서로 다른 values를 적용해 상호작용하는 예시를 찾을 수 있다.

Document의 위치에 기반해 styling 하기

<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
    <li>Item <span>one</span></li>
    <li>Item two</li>
    <li>Item <em>three</em></li>
</ul>

Document에서 어디에 있느냐에 따라 다르게 보여주고 싶을 수 있다. 몇 가지 selectors(선택자)를 통해 구현할 수 있으나 여기에서는 몇 가지만 살펴볼 것이다. 예시 document에는 두 개의 <em> elements가 있다 - 하나는 paragraph 안에 있고 다른 하나는 list item 안에 있다. <li> element 안에만 있는 <em>을 선택하기 위해서 descendant combinator라고 불리는 selector을 사용할 수 있다.

li em {
    color: rebeccapurple;
}

이 selector는 <li>의 자손인(안에 있는) 어떤 <em> element를 선택할 것이다.

시도해볼 법한 또 다른 예시는 HTML에서 같은 계층 level을 가지는 heading의 바로 다음에 오는 paragraph에 styling을 더하는 것이다. 그렇게 하기 위해서 +(adjacent sibling combinator)를 selectors 사이에 위치시킨다.

h1 + p {
    font-size: 200%;
}

상태에 기반해 styling 하기

이번 tutorial에서 살펴볼 마지막 styling type은 상태에 기반한 styling이다. 간단한 예시는 links를 styling 하는 것이다. link를 styling 할 때, <a> element를 목표로 해야 한다. 이것은 방문하지 않음, 방문함, 맴돌고 있음, 키보드로 집중됨, 또는 click 되고 있는 상태임(활성화됨)과 같은 다양한 상태 변화를 가진다. CSS를 통해 이런 상태들을 목표로하여 styling을 할 수 있다 - 아래의 CSS는 방문하지 않는 links를 pink로, 그리고 방문한 links를 green으로 styling 한다.

a:link {
    color: pink;
}

a:visited {
    color: green;
}

사용자가 link 위를 맴돌 때, link를 다르게 보이게 할 수도 있는데 다음의 예시를 이용해 밑줄을 없앨 수 있다:

a:hover {
    text-decoration: none;
}

link 위를 맴돌 때, 밑줄이 사라지도록 했다. 물론, 모든 상태에서 밑줄이 사라지도록 할 수도 있다. 그러나 실제에서는 방문자들이 link를 link로 인식하기를 바랄 것이다. 밑줄을 남기는 것은 사람들로 하여금 해당 paragraph의 어떤 text가 link라는 강력한 증거를 보여주는 것이다. CSS로 작업할 때 변화를 준다는 것은, document의 접근성이 약화될 수 있다는 잠재성을 가질 수 있다.

Note: MDN에서 제공하는 lessons에서 종종 접근성에 관한 언급을 보았을 것이다. 접근성에 대해 이야기 한다는 것은 webpages가 누구에게나 이해 가능해야 하고 사용 가능해야 한다는 것에 대한 필요성을 언급하는 것이다.

방문자는 mouse가 있는 컴퓨터를 사용할 수도, trackpad가 있는 컴퓨터를 사용할 수도, 또는 touchscreen이 있는 핸드폰을 사용할 수도 있다. 혹은 그들 중 누군가는 screenreader를 사용할 수도 있고, 누군가는 조금 더 큰 text를 원할 수도 있고, 또 어떤 누군가는 오직 키보드만을 사용해서 다른 site로 움직여야 할 수도 있다.

보통의 HTML document는 일반적으로 모두에게 접근 가능하다 - document에 style을 추가할 때는 오히려 접근성이 저하되는 형태가 되지 않도록 주의해야 한다.

Selctors와 combinators 결합하기

복수의 selectors와 combinators를 함께 결합할 수 있다는 것을 메모해두도록 하자. 예를 들면:

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }

아래와 같이 복수의 types를 함께 결합하는 것도 가능하다.

body h1 + p.special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

body 안에 있는 h1, h1 바로 직후에 오는 p의 class 이름이 special일 경우(직후가 아닌 그 이후 조건이 맞을 경우 적용되지 않음) style을 적용한다.

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.