[코드잇] CSS 핵심개념 ② - Display, 선택자, 스타일 계산하기

---

4. Display

5. 선택자

6. 스타일 계산하기

---

4. Display

블록과 인라인

display: block
display: inline
display: inline-block
display: none  /*css로 html태그를 감출 때*/

블록 (block)	인라인 (inline)
위에서부터 아래로 차례대로 배치됨	평소에 글쓰는 방향 화면에 꽉 차면 다음 줄로 넘어감
너비와 높이를 지정할 수 있다	너비나 높이를 지정할 수 없음  (예외적으로 <img> 같은 건 가능)
크기를 지정할 수 있음	크기를 지정할 수 없음
margin 과 padding 어떤 방향이든 모두 가능	여백은 가로로(글 쓰는 방향)만 가능

---

인라인 블록

인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성

· CSS를 작성하다가 다른 요소들이 자리를 안 비켜준다
· 너비나 높이가 적용되지 않는다
→ 그럴 때는 그 요소가 인라인인지 확인해보고, inline-block으로 바꿔서 써보기

Inline Block (출처: 코드잇)

 

배치는 인라인처럼 하면서 크기도 정하고 싶을 때는 display 속성으로 인라인 블록(inline-block)을 쓰면 됨.
배치는 인라인처럼 되지만 블록처럼 크기가 있음.

---

float

float (출처: 코드잇)

.figure {
  width: 280px;
  float: right;
  margin-left: 10px;
}

 

float을 이용하면 요소가 배치되는 방식에서 벗어나서 블록 왼쪽이나 오른쪽으로 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있음.

---

5. 선택자

CSS 선택자 목록

선택자(Selector) : CSS 규칙에서 맨 앞에 적어 주는 것

선택자 목록(Selector List) : 선택자를 나열해 놓은 것

 

.book-description과 .book-info라는 두 개의 클래스를 동시에 선택하는 것

.book-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.book-info {
  background-color: #000000;
  border-radius: 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  margin: 24px 0;
  padding: 12px 32px;
  text-align: center;
}

/* 위와 아래 방식은 모두 같이 적용됨*/
.book-description, .book-info {
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
}

.book-description, 
.book-info {
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
}

---

선택자 붙여 쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있음.

 

html

<p class="delay book-info">
지금 택배로 주문하면 <span class="date">10월 8일</span>에 받아 볼 수 있어요</p>

 

CSS

 

 

delay와 book-info를 둘 다 갖고 있는 요소를 선택

/*선택자 순서는 상관 없음*/
.delay.book-info {
  background-color: #ffff00; 
}

/*p태그이면서 delay와 book-info를 모두 갖고 있는 선택자 선택*/
p.delay.book-info {
  background-color: #ffff00; 
}

/*p태그이면서 shipping이라는 아이디를 갖고 있는 선택자 선택*/
p#shipping {
  background-color: #ffff00; 
}

/*아이디 shipping이고 delay 클래스, book-info 클래스 모두 갖고 있는 요소 선택*/
#shipping.delay.book-info {
  background-color: #ffff00; 
}

.delay#shipping.book-info {
  background-color: #ffff00; 
}

 

조합을 많이 쓴다고 좋은 것이 아님.

되도록 클래스 한 개 짜리를 사용해라.

 

html

<div id="info" class="large card">Card</div>

css

div#info.large.card

---

자식, 자손 선택하기

<h1 class="title">
<h2 class="title">

이렇게 클래스 이름이 겹칠 수 있음.
부모의 클래스 이름과 자식의 클래스 이름을 조합해서 요소를 선택해서 스타일을 덮어쓰면 됨.

 

자식 결합자(child combinator)

· 바로 아래 있는 태그, '>'로 표

· book-container라는 클래스를 가진 태그의 자식이면서 title이라는 클래스를 갖고 있는 요소 선택

.book-container > .title {
  color: #12172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  margin: 24px 0 8px;
}

 

자식 결합자를 쓰면 똑같은 클래스 이름이라도 다른 스타일을 적용할 수 있음.

만약 book이라는 클래스 안에서 저 아래에 있는 date라는 클래스를 선택하고 싶으면?

 

자손 결합자(Descendant Combinator)

· 스페이스(띄어쓰기)로 선택자를 이어줌.

.book .date {
	font-weight: 700;
}

· book이라는 클래스 중 date라는 클래스를 가진 요소를 선택함.
· 자손 결합자를 더 많이 쓰는 편임.

 

---

가상 클래스

HTML 요소의 특정 상태나 위치를 선택하기 위해 사용되는 CSS 선택자

a {
  color: #12172a;
  text-decoration: none;
}

a:hover {
  /* 마우스를 올렸을 때 밑줄이 생김 */
  text-decoration: underline;
}

force state

hover	마우스 커서가 요소 위에 올라가 있는 동안의 상태를 선택	a:hover {   color: #ff0000; /* 마우스 오버 시 글자 색상을 빨간색으로 변경 */ }
active	사용자가 마우스 클릭한 직후의 상태를 선택	button:active {   background-color: #00ff00; /* 클릭 시 배경색을 녹색으로 변경 */ }
focus	요소가 포커스를 받은 상태를 선택 (포커스 : 마우스 커서나 키보드 탭키로 갖다댄 상태)	input:focus {   border: 2px solid #0000ff; /* 포커스를 받으면 테두리를 파란색으로 변경 */ }
visited	링크가 방문되었을 때의 상태를 선택	a:visited {   color: #800080; /* 방문한 링크의 글자 색상을 보라색으로 변경 */ }

---

n번째 자식 선택자(n-th child Selector)

:nth-child()

주의 : 1번부터 시작한다

.gallery :first-child { ... } /*첫 번째 자식*/
.gallery :last-child { ... } /*마지막 자식*/
.gallery :nth-child(3) { ... }  /*세 번째 자식*/
.gallery :nth-child(even) { ... }  /*짝수 번째 자식*/
.gallery :nth-child(2n) { ... }  /*짝수 번째 자식*/
.gallery :nth-child(odd) { ... }  /*홀수 번째 자식*/
.gallery :nth-child(2n+1) { ... }  /*홀수 번째 자식*/

---

6. 스타일 계산하기

캐스케이드

style.css : 직접 추가한 파일

user agent stylesheet : 웹 브라우저에서 기본으로 적용되는 CSS 규칙

 

그런데 background-color 처럼 겹치는 속성은 어떻게 함?

 

캐스케이드 : 여러 CSS 규칙들이 정의될 때 순서에 따라 합치는 것

delay book-info에 있는 background-color가 book-info에 있는 background-color을 덮어씀.

 

여기서 element.style에 background-color을 입력하면 아래 적용된 것들이 지워지고 덮어씌워짐.

element.style = HTML 태그에다가 직접 스타일 속성으로 넣는 것

---

캐스케이드 순서

user agent stylesheet는 유저가 만든 style.css보다 우선 순위가 낮음.
인라인 스타일 (html에 직접 스타일 작성)은 캐스케이드에서 우선순위가 가장 높음.

똑같은 선택자를 쓰는 경우에는 나중에 쓸수록 우선 순위가 높음.

.description {
  color: #818181;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  margin: 0;
}

.description {
  color: #ff0000;
}

여기서 적용되는 것은 밑에 있는 속성값임.

 

선택자의 명시도가 높을수록 우선순위가 높음

.book-info {
  background-color: #000000;
  border-radius: 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  margin: 24px 0;
  padding: 12px 32px;
  text-align: center;
}

.delay.book-info {
  background-color: #c76546;
}

여기서 '.delay.book-info'의 우선순위가 '.book-info'보다 우선순위가 높음.

선택자가 복잡할수록 명시도가 높아서 우선순위로 캐스케이드를 함.

구글 specificity calculator (ID, 클래스, 태그 개수 등)

---

상속

부모 요소에 정의된 스타일이 자식 요소에도 적용되는 것

 

흐릿하게 된 것 = 상속이 안 된 것

선택자로 선택된 CSS 규칙이나 웹 브라우저 기본 스타일 시트보다는 우선순위가 낮음.

상속되는 속성 : 글자색, 글꼴과 관련된 속성들, 정렬 등

 

#header > .description {
  /* #header > .description에 상속되는 스타일 */
  font-size: 16px;
  color: #333;
}

.accent {
  /* .accent에 직접 적용되는 스타일 (우선적으로 적용됨) */
  font-size: 18px;
  font-weight: bold;
  color: #ff0000; /* 빨간색으로 설정 */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color

color - CSS: Cascading Style Sheets | MDN