HTML/CSS/JS - CSS 개요

ekgns0508·2023년 9월 24일
CSShtmljs프론트엔드

html/css/js

목록 보기
5/11

CSS 개요

1. 기본문법

선택자 {속성: 값;}
  • 선택자 : css스타일을 적용할 대상(Selector)
  • 속성 : 스타일(css)의 종류(Property)
  • 값 : 스타일의 값(value)
div {color: red;}

“div 태그를 찾아서 색상을 빨강으로 설정하겠다”

/*설명작성*/
div {
	color: red;
	margin: 20px;
}

“/* */”를 사용해 주석처리해 통해 메모를 작성할 수 있다.

2. 선언방식

  1. 내장 방식
  2. 링크 방식
  3. 인라인 방식
  4. @import 방식

(1) 내장 방식

html내부의 style태그를 이용해서 내부에 스타일을 작성하는 방식이다.

유지보수 측면에서 단점을 보이기 때문에 권장하는 방식은 아니다.

<style>
	div {
		color: red;
		margin: 20px;
	}
</style>

(2) 인라인 방식

요소의 style속성(전역속성)에 직접 스타일을 작성하는 방식이다.(선택자 없음)

css 적용 우선순위가 매우 높아 css를 따로 작성하더라도 적용이 되지 않는 문제점이 있어 추천하지 않는다.

<div style="color: red; margin: 20px;"></div>

(3) 링크 방식

link 태그로 외부 css 문서를 가져와서 연결하는 방식이다.(병렬로 연결한다)

<link rel="stylesheet" href="./css/main.css">

(4) @import 방식

css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식이다.(직렬로 연결한다)

@import url("./box.css");

3. 기본 선택자

(1) * : 전체 선택자

모든 요소를 선택한다.

혼자서 쓰이는 경우는 거의 없고 복합선택자와 함께 사용해 특정 범위내의 모든 요소를 선택할때 사용하곤 한다.

* {
	color: red;
}

(2) 태그 선택자

태그이름이 태그선택자로 사용한 태그명인 태그를 선택한다.

/* li 태그를 모두 선택한다 */
li {
	color: red;
}

(3) 클래스 선택자

특정 클래스를 가지고 있는 HTML의 요소를 선택한다.

앞에 “.”을 붙여 사용한다.

<li class="orange">오렌지</li>
<span class="orange">오렌지</span>
.orange {
	color: red;
}

예시) 위의 코드에서는 class속성이 “orange”인 li, span 태그 모두 선택한다.

(4) 아이디 선택자

특정 아이디값을 가지고 있는 요소를 선택

<li id="orange" class="orange">오렌지</li>
#orange {
	color: red;
}

예시) id속성의 값이 “orange”인 li 태그를 선택한다.

4. 복합 선택자

(1) 일치 선택자

선택자 ABC와 XYZ를 동시에 만족하는 요소를 선택한다.

태그 선택자는 별도의 기호가 없으므로 태그선택자를 맨앞에서 사용해 구분할 수 있게 한다.

span.orange {
	color: red;
}

예시) span태그이며 클래스값이 “orange”인 요소를 선택한다. (태그선택자와 클래스선택자 동시 사용)

(2) 자식 선택자

선택자 ABC의 자식 요소 XYZ를 선택한다. 특수기호 “>”를 사용한다.

ul > .orange {
	color: red;
}

예시) ul태그의 자식요소중에서 클래스값이 “orange”인 태그를 모두 선택한다.

(3) 하위 선택자(후손 선택자)

선택자 ABC의 하위요소 XYZ를 선택한다. ‘띄어쓰기’가 선택자의 기호로 사용된다.

일반적으로 자식 선택자보다 많이 쓰게되며 좀더 세부적으로 선택하기 위해서 자식 선택자가 사용되곤 한다.

div .orange {
	color: red;
}

예시) div태그 하위에 클래스값이 “orange”인 요소를 모두 선택한다.

(4) 인접 형제 선택자

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택한다.

같은 부모요소를 공유하는 요소들을 서로 형제 요소라고 한다.

<ul>
	<li>딸기</li>
	<li>수박</li>
	<li class="orange">오렌지</li>
	<li>사과</li>
</ul>
.orange + li {
	color: red;
}

예시) 클래스가 orange인 요소 다음에 존재하는 li 태그 하나를 선택한다.

(5) 일반 형제 선택자

선택자 ABC의 다음 형제 요소 XYZ를 모두 선택한다.

<ul>
	<li>딸기</li>
	<li>수박</li>
	<li class="orange">오렌지</li>
	<li>사과</li>
</ul>
.orange ~li {
	color: red;
}

예시) 클래스가 orange인 요소 다음에 있는 모든 li 형제 요소들을 선택한다.

5. 가상 클래스 선택자

(1) :hover

선택자 ABC의 요소에 마우스 커서가 올라가 있는 동안 선택한다.

특정한 행동했을때 동작하는 것을 지칭한다. 극히 일부분이며 동작에 관한 것은 주로 자바스크립트로 다루게 된다.

a:hover {
	color: red;
}

예시) a태그 요소에 마우스를 올릴경우 글자 색상을 빨강으로 변경한다.

(2) :active

선택자 ABC요소에 마우스를 클릭하고 있는 동안 선택한다.

a:active {
	color: red;
}

예시) a 태그 요소를 마우스로 클릭하고 있는 동안 글자색상을 빨강으로 변경한다.

(3) :focus

선택자 ABC요소가 포커스되면 선택한다.

단, 포커스될 수 있는 요소는 몇가지 정해져있다.(input, a, button, label, select등 HTML대화형 콘텐츠에 적용할 수 있다. 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 Focus될 수 있다)

input:focus {
	background-color: orange;
}

예시) input 요소가 클릭되어 입력할 수 있는 상태가 될경우(focus될경우) 배경색을 주황색으로 변경한다.

<div class="box" tabindex="-1"></div>
.box:focus {
  width: 300px;
  background-color: royalblue;
}

예시2) div요소는 본래 포커스되는 요소가 아니지만 tabindex속성의 값으로 -1을 줄경우 포커스될 수 있는 요소로 만들 수 있어 해당 css 스타일이 작동하게 된다.

(4) :first-child

선택자 ABC가 형제 요소중 첫째라면 선택한다.

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
</div>
.fruits span:first-child {
	color: red;
}

예시) fruits 클래스를 가진 요소의 하위요소의 형제요소들 중 첫번째 자식요소이며 span 태그인 요소를 선택한다. 즉, ‘딸기’를 선택한다.

.fruits div:first-child {
	color: red;
}

예시 2) fruits 클래스를 가진 요소의 하위요소들중에서 첫번째 요소이며 div 태그를 갖고 있는 요소를 선택한다. 즉, ‘오렌지’를 선택한다.

(5) :last-child

선택자 ABC가 형제 요소중 막내 요소라면 선택한다.

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
</div>
.fruits h3:last-child {
	color: red;
}

예시) fruits클래스를 갖고 있는 요소의 하위 요소들중에서 h3태그를 갖고 있는 마지막 요소를 선택한다.
(단, h2태그여도 마지막 형제요소가 아닐경우에는 선택되지 않는다)

(6) :nth-child(n)

선택자 ABC가 형제 요소중 (n)번째라면 선택한다.

first-child, last-child 처럼 정해져있는 첫번째, 마지막 요소가 아닌 자신이 직접 몇번째 요소를 선택할것인지 정할 수 있다.

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
	<div>
		<p>망고</p>
		<h3>사과</h3>
	</div>
</div>
.fruits *:nth-child(2) {
	color: red;
}

예시) fruits 클래스를 가지고 있는 요소의 하위 요소들 전체요소중에서 2번째 형제요소인 요소들을 선택한다.
(위 코드에서는 수박과 사과가 빨간색 글자로 스타일이 적용된다. 수박(span)은 div의 자식요소들중 2번째 형제요소, 사과(h3)는 2번째 div태그요소의 2번째 형제요소이기 때문이다)

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
	<p>키위</p>
</div>
.fruits *:nth-child(2n) {
	color: red;
}

위 css코드에서 2n의 n은 ‘Zero-based numbering’이 적용됨으로써 n은 0부터 시작하게 된다. 결론적으로 위 코드는 nth-child(0), nth-child(2), nth-child(4), …. 를 모두 선택하게 된다. 즉 짝수번째의 요소들을 선택한다.

예시) 결과적으로 수박(span), 망고(p), 키위(p)가 선택되게 된다. fruits클래스를 가지고 있는 요소의 하위요소들중에서 각각 0, 2, 4 번째 형제요소이기 때문이다.

.fruits *:nth-child(2n+1) {
	color: red;
}

예시 2) 위 css 코드에서는 가상 선택자 nth-child로 2n+1번째 요소들을 선택하기로 했으므로 20+1, 21+1, 2*2+1, … 번째 요소들을 선택하게 된다. 1, 3, 5, …번째 요소들을 선택하므로 결과적으로 홀수번째 요소들을 선택하게 된다.

(7) :not(요소)

선택자 XYZ가 아닌 ABC 요소를 선택한다.

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
</div>
.fruits *:not(span) {
	color: red;
}

예시) fruits클래스를 가진 요소의 하위요소들 전체 중에서 span태그 요소가 아닌 요소들을 선택한다. ‘오렌지’, ‘망고’, ‘사과’ 를 선택하게 된다.

6. 가상 요소 선택자

가상요소 선택자는 ‘::’와 같이 콜론 2개를 붙이는 것이 표준이다.

(1) ::before

인라인 요소로서 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입한다.

‘content’라는 css 속성을 사용해서 삽입할 내용을 작성할 수 있다.

<div class="box">
	Content!
</div>
.box::before {
	content: '앞';
}
<!-- 아래와 같은 형식의 결과를 출력한다 -->
<div class="box">
	'삽입되는 인라인 요소;
	Content!
</div>

예시) 위 코드에서 결과로 ‘앞! Content!’가 출력된다. ::before로 삽입되는 요소는 인라인 요소이므로 삽입된후 줄바꿈이 일어난 후 ‘Content!’가 들어오므로 ‘앞!’과 ‘Content!’ 사이에는 공백이 생긴다.

(2) ::after

인라인 요소로서 선택자 ABC요소의 내부 뒤에 내용(Content)을 삽입한다.
before 가상요소 선택자와 같이 ‘content’속성으로 뒤에 삽입할 내용을 작성할 수 있다.

<div class="box">
	Content!
</div>
.box::after {
	content: "뒤!";
}
<!-- 아래와 같은 형식의 결과를 출력한다 -->
<div class="box">
	Content!
'삽입되는 인라인 요소;
</div>

예시) box클래스의 요소 뒤에 ‘뒤!’라는 내용을 삽입하게 된다. 똑같이 인라인 요소이기 때문에 줄바꿈으로 인해 내용 사이에는 공백이 존재하게 된다.

<div class="box">HEROPY!</div>
.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}

.box::after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background-color: royalblue;
}

가상요소 선택자를 사용해서 글자만 집어넣을 수 있는 것은 아니다. 위와 같이 width, height 속성으로 가로, 세로 폭을 지정해주었지만 가상요소 선택자는 기본적으로 인라인 요소이기 때문에 적용되지 않는다.(인라인 요소는 기본적으로 세로폭을 지정할 수 없음) 하지만 display속성의 값으로 ‘block’ 값을 지정해 블록요소로 전환시킨다면 정상적으로 적용이 된다.

단, 가상요소 선택자는 기본 속성으로 content속성을 갖고 있어야 하므로 content속성의 값으로 빈 문자열이라도 지정해 content속성을 입력해줘야 한다.

7. 속성 선택자

속성선택자는 대괄호([]) 특수기호를 사용한다.

(1) [속성이름]

속성 ABC를 포함한 요소를 선택한다.

<input type="text" value="heropy"/>
<input type="password" value="1234"/>
<input type="text" value="ABCD" disabled/>
[disabled] {
	color: red;
}

예시) disabled 속성을 가진 요소들을 선택한다. disabled속성을 가지고 있는 3번째 input 요소를 선택하게 된다.

(2) [ABC=”XYZ”]

속성 ABC를 포함하고 있는 값이 XYZ인 요소를 선택한다.

<input type="text" value="heropy"/>
<input type="password" value="1234"/>
<input type="text" value="ABCD" disabled/>
[type="password"] {
	color: red;
}

예시) type속성의 값이 “password”인 요소들을 선택하게 된다. 2번재 input요소를 선택하게 된다.

8. 스타일 상속

<div class="ecosystem">생태계
    <div class="animal">동물
      <div class="tiger">호랑이</div>
      <div class="lion">사자</div>
      <div class="elephant">코끼리</div>
    </div>
    <div class="plant">식물</div>
  </div>
.animal {
	color: red;
}

예시) animal클래스의 요소의 하위 요소들까지 모두 스타일이 적용된다. 이를 스타일 상속이라고 한다.

상속되는 css 속성들..

상속이 가능한 css 속성들은 모두 글자/문자 관련 속성들이다.
(단, 모든 글자/문자 속성들이 가능한 것은 아니다)

  • font-style: 글자 기울기
  • font-weight: 글자 두께
  • font-size: 글자 크기
  • line-height: 줄 높이
  • font-family: 폰트(서체)
  • color: 글자 색상
  • text-align: 정렬

강제 상속

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  width: 300px;
  height: 200px;
  background-color: orange;
}

.child {
  width: 100px;
  height: inherit;
  background-color: inherit;
  position: fixed;  /* viewport를 기준으로 배치하겠다.*/
  top: 100px;
  right: 10px;
}

글자/문자 관련 속성들에는 자동적으로 상속이 되는 속성들이 존재하지만 적용되지 않는 속성들에 대해서 강제적으로 상속하도록 지정할 수 있다.

속성의 값으로 ‘inherit’을 주게 되면 강제적으로 부모요소의 스타일값을 가져오게 된다.

위 예제에서는 height속성과 background-color속성의 값으로 ‘inherit’을 줌으로써 강제상속을 시켰으므로 부모 요소의 height속성의 값인 200px과 background-color속성의 값인 ‘orange’를 가져오게 된다.

9. 선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법이다.

  • 점수가 높은 선언이 우선한다.
  • 점수가 같으면, 가장 마지막에 해석된 선언이 우선한다.

명시도(점수)

  • !important - 중요도 : 9999999999점(우선순위가 가장 높음)
  • 인라인 선언 : 1000점
  • ID 선택자 : 100점
  • Class 선택자 : 10점
  • 태그 선택자 : 1점
  • 전체 선택자 : 0점
  • 상속 : X

예시

  1. 클래스선택자(10) + 태그선택자(1) + 클래스선택자(10) = 21
.list li.item {
	color: red;
}
  1. 클래스선택자(10) + 태그선택자(1) + 클래스선택자(가상클래스, 10) = 21
.list li:hover {
	color: red;
}
  1. 클래스선택자(10) + 태그선택자(가상요소, 1) = 11
.box::before {
	content: "Good";
	color: red;
}
  1. 아이디 선택자(100) + 태그선택자(1) = 101
#submit span {
	color: red;
}
  1. 태그선택자(1) + 클래스선택자(10) + 태그선택자(1) + 클래스선택자(가상클래스, 10) = 22
header .menu li:nth-child(2) {
	color: red;
}
  1. 태그선택자(1) = 1
h1 {
	color: red;
}

  1. 클래스선택자(가상클래스, 10) = 10

    not은 계산하지 않고 .box만 계산한다.

profile
ekgns0508
이전 포스트

HTML/CSS/JS - HTML 핵심 정리

다음 포스트

HTML/CSS/JS - CSS속성(1)

0개의 댓글