TIL (2021.12.22) - [CSS] 스타일 작성법과 다양한 선택자
CSS
CSS(Cascaing Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. CSS를 이용하면 웹 문서의 내용과 상관없이 디자인을 바꿀 수 있고, 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
CSS 작성하는 방법
CSS 작성하는 방법에 대해서는 스타일 연결하는 방법과 스타일 표기방법과 형식에 대해서 공부할 것이다.
스타일 시트
일단 스타일 시트는 html 문서 안에서 정의한 내부 스타일 시트와 별도로 css 파일을 만들어 연결해서 사용하는 외부 스타일 시트로 구분할 수 있다.
- 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 말한다.
<head>태그 안에서 정의하고,<style>태그를 이용해 스타일시트를 정의한다.
<head>
<style>
p {
text-align: center;
}
h1 {
color: blue;
font-size: 20px;
}
</style>
</head>- 외부 스타일 시트 : 사이트를 제작할 때, 외부 스타일 시트를 사용하는 게 일반적이다. ".css"라는 파일 확장자를 사용한 파일에 따로 저장해놓고 필요할 때마다 가져와서 사용한다. 외부 스타일 시트를 연결할 때는
<link>태그를 이용한다.
<head>
<link rel="stylesheet" href="외부 스타일 경로" />
</head>- 인라인 스타일 : 간단한 스타일 정보의 경우 스타일을 적용할 대상에 직접 표시하는 방법을 의미한다. 유지 보수하는데 어렵기 때문에 권장하지 않는 방법이다.
<h1 style="color: blue;">CSS란 무엇인가?</h1>
<p>CSS는 HTML과 함께 웹 표준의 기본 개념이다. 웹 문서의 디자인 요소를 담당한다.</p>@import방식 : CSS의@import규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와서 연결하는 방식이다.
스타일 형식
선택자 {스타일속성 : 속성 값;}h2 {
font-size: 20px;
color: blue;
}-
선택자: 어디에 스타일을 적용할 것인가. 위 예시h2태그 같은 경우에는 태그 선택자로h2태그에 스타일을 적용하겠다는 것이다. -
스타일속성: 속성 값;: 스타일속성과 속성 값을:콜론으로 구분하고, 마지막에는;세미콜론으로 그 다음에 올 스타일속성과 구분해준다. -
스타일속성이 여러 개일 경우에는 구별하는 것이 쉽지 않기 때문에 유지 보수하기 쉽고 가독성 있게 작성하기 위해서는 여러 줄에 걸쳐 작성하는 것을 권장한다.
h2 {font-size: 20px; color: blue;}
/* 이렇게 붙여서 작성하는 것 보다
아래처럼 여러 줄에 걸쳐 작성하는 것이 가독성이 높다 */
h2 {
font-size: 20px;
color: blue;
}
h2
{
font-size: 20px;
color: blue;
}우선순위와 상속
Cascading은 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. 스타일 간의 충돌을 막기 위해 위에서 아래로 흐르며 적용되는 방법에도 우선 순위와 상속의 원칙이 있다.
스타일 우선순위
- 중요도
- 사용자 스타일 시트
- 중요 스타일(스타일에
!import가 붙은 것) - 제작자 스타일 시트의 일반 스타일
- 기본적인 브라우저 스타일 시트
- 명시도
- 구체적인 것이 우선순위가 높고 포괄적인 것은 우선순위가 낮다.
- 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 태그 스타일
- 소스의 순서 : 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다. 나중에 오는 스타일이 우선순위가 더 높다.
- 스타일 상속: 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. 배경 이미지나 배경 색은 상속되지 않고, 기본 값인 투명으로 지정된다.
- 강의에서 id 선택자를 100점, class 선택자를 10점, 태그 선택자를 1점이라고 생각하고, 점수를 매겨서 우선순위를 계산하면 도움이 된다고 했다.
선택자
선택자(Selector)는 태그 하나가 될 수도 있지만, 여러 개의 요소를 묶어 별도의 선택자로 지정할 수도 있다. 전체선택자, 태그 선택자, 클래스 선택자, id 선택자 외에도 복합 선택자에 대해서 정리해볼 것이다.
-
*: 전체 선택자. 모든 요소에 스타일을 적용한다. -
태그이름: 태그 선택자. 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. -
.클래스 선택자: 특정한 부분에만 스타일을 적용한다. 클래스 선택자를 사용하기 위해서는html파일에서<태그>에 class 속성을 써야 된다. 클래스 이름 앞에 반드시.마침표를 붙여야 된다. -
#id 선택자: 특정한 부분에만 스타일을 적용한다. 클래스 선택자와 id 선택자의 차이점은 class 속성은 요소를 지칭하는 이름이 중복 가능하고, 여러번 반복할 수 있다는 것이다. 하지만 id 속성은 요소를 지칭하는 이름이 고유하고, 한번만 적용할 수 있다는 점이다. id 선택자 이름 앞에 반드시#기호를 붙여야 된다.
<클래스 선택자와 id 선택자 예시>
<!-- index.html -->
<body>
<a href="링크 경로" class="link">
<div id="container"></div>
</body>/* main.css */
.link {
color : yellow;
text-decoration: none;
}
#container {
background: blue;
width: 500px;
height: 500px;
}- 그룹 선택자 : 둘 이상의 요소에 같은 스타일을 적용하는 것이다.
,로 구분해서 여러 선택자를 나열하면 된다.
복합 선택자
- 일치 선택자 : 선택자 ABC와 XYZ를 동시에 만족하는 요소
/*span태그의 class 속성 값이 orange*/
span.orange {
color: blue;
}- 자식 선택자 : 선택자 ABC의 자식 요소인 XYZ 선택자에 스타일 적용.
부모요소>자식요소이렇게>부등호를 표시해서 구분한다.
하위 선택자와 혼동할 수 있는데, 하위 선택자에서는 자식 요소 뿐만 아니라 손자 요소까지 적용된다. 하지만 자식 선택자는 바로 아래 요소인 자식 요소에만 스타일이 적용되는 점을 기억할 것!
/*ul 태그의 자식요소중 class 속성 값이 orange*/
ul>.orange {
color: blue;
}- 하위(후손) 선택자(descendant selector) : 선택자 ABC의 하위 요소 XYZ 선택자에 스타일 적용. 자식 요소, 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용되니, 자식 선택자와 구분해서 기억해야 된다! 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.
/*div 태그의 하위 요소인 orange 클래스*/
div .orange {
color: blue;
}- 인접 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYY 하나를 선택해서 스타일 적용. 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용된다는 점!
+표시
/*orange 클래스의 첫 번째 형제 li 요소*/
.orange + li {
color: blue;
}- 일반 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택해서 스타일 적용한다. 일반 형제 선택자를 정의할 때는
~틸드 기호를 표시한다.
/*orange 클래스의 모든 형제 li 요소*/
.orange ~ li {
color: blue;
}가상 클래스 선택자 (:)
클래스 이름 앞에 : 콜론을 붙여 표시하는 가상 클래스
-
ABC:hover: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택이 된다. -
ABC:active: 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 -
ABC:focus: 선택자 ABC 요소에 포커스가 되면 선택. HTML 대화형 콘텐츠가 focus 될 수 있는 요소이다.(input, button, label, select 등 여러 요소가 있음) 대화형 콘텐츠가 아닌 tabindex 속성을 사용한 요소도 focus 가능하다. -
ABC:first-child: 선택자 ABC가 형제 요소 중 첫째라면 선택 -
ABC:last-child: 선택자 ABC가 형제 요소 중 막내라면 선택 -
ABC:nth-child(n): 선택자 ABC가 형제 요소 중 (n)번째라면 선택. n은 0부터 시작한다. -
ABC:not(XYZ): 선택자 XYZ가 아닌 ABC 요소 선택
가상 요소 선택자 (::)
가상 요소 선택자는 내용의 일부만 선택해 스타일을 적용할 때 사용한다.
ABC::before: 선택자 ABC 요소의 내부 앞에 내용을 삽입한다. (자주 사용하고 인라인 요소이다)ABC::after: 선택자 ABC 요소의 내부 뒤에 내용을 삽입한다.
/*content 속성이 필수이다!!!!!!!*/
p::before {
content: "내용";
}속성 선택자
태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정한다.
[ABC]: 속성 ABC를 포함한 요소 선택
/*a 태그 중 href 속성이 있는 요소에만 스타일 적용*/
a[href] {
background-color: red;
}[ABC="XYZ"]: 속성 ABC를 포함하고 속성 값이 XYZ인 요소를 선택
/**/
a[target="_blank"] {
background-color: red;
}[ABC ~="XYZ"]: 여러 속성 값 중에 해당 값이 포함되는 요소를 선택한다. 하나의 속성에 속성 값이 여러 개일 때 특정 속성 값을 찾을 때 편리하다.
<!-- class 속성 값에 button이 포함된 메뉴 2, 메뉴3 부분에 스타일이 적용된다 -->
<style>
[class ~="button"] {
bprder: 2px solid gray;
}
<style>
<body>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#" class="button">메뉴2</a></li>
<li><a href="#" class="flat button">메뉴3</a></li>
</ul>
</body>-
[ABC |="XYZ"]: 특정 값이 포함된 속성에 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일 적용한다. -
[ABC ^="XYZ"]: 특정 값으로 시작하는 속성에 대해서만 스타일을 적용한다. -
[ABC $="XYZ"]: 특정 값으로 끝나는 속성에 스타일을 적용한다. -
[ABC *="XYZ"]: 사용자가 지정한 속성 값의 어느 위치든 해당 값이 포함되어 있으면 스타일을 적용한다.
'HTML5+CSS3 웹표준의 정석' 책과 패스트 캠퍼스의 '한번에 끝내는 프론트엔드 개발 초격차 패키지' 강의를 참고해서 정리했다. 처음에는 태그선택자, id선택자, class 선택자밖에 몰랐는데, 강의를 들으면서 스타벅스 홈페이지를 따라 만들어 보니 복합선택자도 사용해보고, 가상 클래스 선택자(:hover)도 사용해보고 다양한 선택자에 대해서 알게 되었다.
이제 그 다음에는 CSS에서 사용하는 스타일 속성에 대해서 정리해봐야겠다.
