오늘은 only 온라인 강의로만 진행했습니다! 온라인 강의를 열심히 수강하고 내용들을 간추려보았습니다. 이제부터 본격적으로 CSS를 다루게 될 것 같네요.
CSS 개요
기본 문법 및 주석
CSS를 작성할 때에는 가장 먼저 선택자를 정해주어야 합니다. 이 선택자는 우리가 작성할 CSS 코드가 어떤 요소를 가리키는지, 쉽게 말해 무엇을 스타일링할 지 정하는 역할을 합니다.
선택자 뒤에 중괄호를 작성하고 그 안 쪽에 비로소 실제 CSS 코드를 작성하는 식입니다.
중괄호 안에는 '속성: 속성값'의 형식으로 어떤 속성을 어떻게 꾸밀 것인지 명시합니다. 또, 속성값을 입력하고 세미콜론을 선언 구분자로 사용하여 속성 항목끼리 구분해주어야 합니다.
CSS에도 HTML과 같이 주석을 입력할 수 있습니다.
/*이것은 한 줄짜리 주석입니다.*/
/*
이것은 두 줄짜리 주석입니다.
몇 줄이라도 가능합니다.
*/선언 방식
CSS 선언 방식은 내가 작성한 CSS 파일을 어떤 식으로 HTML에 적용할 지를 결정하는 것입니다.
일반적으로 세 가지 종류의 선언 방식이 있습니다.
인라인 방식
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>단, 인라인 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 됩니다.
따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야 합니다.
내부 스타일 시트
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 head 태그에 style 태그를 사용하여 CSS 스타일을 적용합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>외부 스타일 시트
외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다.
스타일을 적용할 웹 페이지의 head 태그에 link 태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>@import 방식
@import 방식은 HTML 자체에 css 파일을 적용하기 보다는, 서로 다른 css 파일들을 연결하고자 많이 사용합니다.
예를 들어, 가장 중심이 되는 css 파일(ex. main.css)에 다른 종속적인 css 파일을 포함하는 식입니다.
구글 폰트와 같은 css 관련 라이브러리를 실제로 꺼내 쓸 때에도 @import 방식을 많이 사용합니다.
@import 키워드 뒤에는 url, 혹은 파일명을 추가해줄 수 있습니다.
/* main.css */
@import url("./box.css")
div {
color: red;
margin: 20px;
}
/* box.css */
.box {
background-color: blue;
}CSS 선택자
선택자 유형
전체 선택자
CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다.
<style>
* { color: red; }
</style>HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. 즉, 실제 태그 종류를 선택자로 활용하는 것입니다.
<style>
h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>이 부분에 스타일을 적용합니다.</h2>아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 클래스명 앞에 #을 붙여 선택자를 구성합니다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
당연히 선택할 요소에는 사전에 정해 둔 아이디 속성을 부여해주어야 합니다.
<style>
#heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 클래스명 앞에 .을 붙여 선택자를 구성합니다.
같은 클래스 이름을 부여받은 요소들을 모두 선택해 줍니다.
<style>
.headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>그룹 선택자
그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용합니다.
그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결합니다.
이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만드는 효과를 가지고 있습니다.
<style>
h2, h3, p { background-color: lightgray; }
</style>복합 선택자
위에서 설명한 기본 선택자 옵션들을 다양하게 조합하면, 더욱 정교한 선택자를 구성하는 것이 가능합니다.
강의에서 학습한 것과 같이, 앞의 선택자를 ABC, 뒤의 선택자를 XYZ라고 간주하고 설명해보겠습니다.
ABCXYZ
서로 다른 선택자 ABC와 XYZ를 모두 만족하는 요소들을 선택합니다.
<style>
div.orange {
color: orange;
}
</style>
...
<div class="orange">orange<div>
<div class="orange">orange<div>
<div class="red">red<div>div 요소 중에서 orange라는 클래스명을 가지는 요소들을 선택하므로, 실제로 첫번째와 두번째 div가 글자색이 orange가 될 것입니다.
ABC>XYZ
선택자 ABC의 자식 요소 중에서 XYZ 선택자를 만족하는 요소를 찾습니다.
<style>
div>.orange {
color: orange;
}
</style>
...
<div>
<span class="orange">orange<span>
<span>span</span>
</div>ABC XYZ
선택자 ABC의 하위 요소들 중에서 XYZ를 충족시키는 요소들을 선택합니다.
바로 위에서 설명한 ABC>XYZ는 직속 자식으로 있는 요소들 중에서 선별하는 것이고, 띄어쓰기를 써서 ABC XYZ와 같은 식의 복합 선택자를 사용하면 직속과 무관하게 하위에 존재하는 요소를 모두 후보로 간주합니다.
<style>
div .orange {
color: orange;
}
</style>
...
<div>
<span class="orange">orange<span>
<span>span</span>
<ul>
<li class="orange">orange</li>
<li>not orange</li>
</ul>
</div>ABC + XYZ
인접 형제 선택자라고도 하며, 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택합니다. 여러 개가 아니라, 조건에 맞는 요소 하나만 선택합니다.
아래 코드 블럭을 참고하면 이해가 쉬울 것 같습니다.
<style>
.orange + li {
color: red;
}
</style>
...
<ul>
<li class="orange">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>위 코드에서, 실제로 글자색이 빨강이 되는 것은 두번째 (second) li 요소일 것입니다.
orange라는 클래스명을 가진 요소의 다음 형제 요소이기 때문이죠.
ABC ~ XYZ
일반 형제 선택자입니다. +를 사용하는 복합 선택자와 똑같이 작용하나, 일반 형제 선택자는 조건에 부합하는 요소 모두를 선택하게 됩니다.
<style>
.orange ~ li {
color: red;
}
</style>
...
<ul>
<li>zero</li>
<li class="orange">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>이번에는 second, third, fourth 모두 글자가 빨간색이 될 것입니다.
다만, zero의 경우에는 orange라는 클래스명을 가진 요소보다 먼저 위치하기 때문에, 해당 선택자에 의해 선택되지 않습니다.
동적 가상 클래스 선택자
지금까지 많은 종류의 선택자들을 알아보았습니다. 이러한 선택자들 뒤에, ":가상 선택자명"와 같은 형식으로 가상 선택자를 추가하면, 특별한 선택자 옵션을 작동시킬 수 있습니다.
대표적인 가상 선택자들을 세부적으로 알아볼 것이고, 먼저 사용자와 상호작용하는 식으로 이루어지는 동적 가상 클래스를 먼저 알아보겠습니다.
| 선택자 | 내용 |
|---|---|
| :link | 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택함. (기본 상태) |
| :visited | 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택함. |
| :hover | 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택함. |
| :active | 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택함. |
| :focus | 포커스를 가지고 있는 input 요소를 모두 선택함. |
Hover
"ABC:hover"의 형식으로 사용하며, ABC 요소 위에 마우스 커서가 올라가 있을 때 작동합니다.
즉, 마우스 커서가 해당 요소에 올라간 상태가 아니라면, hover 선택자 뒤에 명시한 CSS 코드들은 적용되지 않습니다. 커서가 올라가면 비로소 적용이 되겠죠.
흔히 웹사이트들에서 버튼에 마우스를 올리면 크기나 색깔이 변하는 경우가 많은데, 이러한 것들이 hover를 활용한 예라고 볼 수 있겠습니다.
기본적으로, 반드시 :link(link의 기본 상태, 사용자가 한번도 링크를 방문하지 않은 상태)와 :visited(사용자가 해당 링크를 한 번이라도 방문한 상태)가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.
다만, link와 visited 선택자는 브라우저에서 기본값을 제공하기 때문에, 실제로 CSS 코드를 짤 때에는 두 가지를 굳이 고려할 필요는 없습니다.
Active
사용자가 마우스로 링크를 클릭하고 있는 상태를 선택하기 위한 가상 선택자입니다. "ABC:active"의 형식으로 사용합니다.
마우스 클릭이 아니라 "클릭을 하고 있는" 상태입니다.
한 가지 주의할 것은, :active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작한다는 점입니다.
Focus
"ABC:focus"의 형식으로 사용합니다. 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태를 위한 선택자입니다.
입력칸이나 버튼 등을 누르거나 탭 키를 누르다 보면 해당 요소가 강조되는 경우가 있는데, 이러한 경우가 focus가 이루어진 경우라고 할 수 있겠습니다.
상태 가상 클래스 선택자
상태 의사 클래스를 사용하면 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정할 수 있습니다.
CSS에서 사용할 수 있는 상태 의사 클래스는 다음과 같습니다.
| 선택자 | 내용 |
|---|---|
| :checked | 체크된(checked) 상태의 input 요소를 모두 선택함. |
| :enabled | 사용할 수 있는 input 요소를 모두 선택함. |
| :disabled | 사용할 수 없는 input 요소를 모두 선택함. |
구조 가상 클래스 선택자
구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있습니다.
대표적인 구조 의사 클래스는 다음과 같습니다.
first-child & last-child
:first-child는 모든 자식 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택합니다.
반대로, :last-child는 모든 자식 요소 중에서 맨 마지막에 위치하는 자식 요소를 모두 선택합니다.
:nth-child(n)
:nth-child는 모든 자식 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 모두 선택합니다.
실제로 사용할 때에는, :nth-child(숫자)의 형식으로 사용합니다.
:nth-child를 사용할 때 알아두면 좋은 것은, 수식처럼 n을 가공해 다양한 선택자 패턴을 만들 수 있다는 것입니다.
예를 들어, :nth-child(2n+1)와 같은 식으로 작성을 하면 홀수 번째 자식 요소들만 선택할 수 있습니다. (n은 0부터 시작하는 zero-based numbering을 따릅니다.)
가장 요소
가장 요소는 해당 HTML 요소의 특정 부분만을 선택할 때 사용합니다. 가상 클래스 선택자와 다르게, :를 두 번 사용해서 작성합니다.(::)
구체적인 유형과 사용법은 아래와 같습니다.
ABC::before
::before는 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다.
ABC::after
::after는 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다.
속성 선택자
HTML 태그는 내부에 특정 속성들을 가질 수 있습니다. 어떤 속성은 태그 종류와 무관하게 사용할 수 있는 전역 속성으로 작용하기도 하고요.
이러한 속성들을 활용해서도 선택자 옵션을 만들 수 있습니다.
[ABC]
ABC에 해당하는 속성을 가진 요소들을 모두 선택합니다. 아래 블럭을 참고하세요.
<style>
[disabled] { background: black; color: yellow; }
</style>
...
<div>
<input type="text" value="Hello">
<input type="text" value="World">
<input type="text" value="Again" disabled>
</div>위 코드 블럭에서, 글자색이 빨강이 되는 input 요소는 마지막 하나일 것입니다. 유일하게 disabled 속성을 가지고 있기 때문입니다.
[ABC="XYZ"]
ABC 속성값이 XYZ인 요소를 모두 선택합니다.
<style>
[type="email"] { background: black; color: yellow; }
</style>
...
<div>
<input type="text">
<input type="email">
<input type="password">
</div>type이 email인 두 번째 input 요소만 글자색이 빨강이 될 것입니다.
선택자 우선 순위
선택자 우선 순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 것입니다.
우선 순위에 따라 점수가 달리 매겨지고, 결국 가장 높은 점수를 가지는 선택자 유형이 우세하게 됩니다.
선택자 우선 순위 기준은 다음과 같습니다.
