[CSS] 선택자/스타일/상속/boxmodel

Front-End/HTML + CSS

[CSS] 선택자/스타일/상속/boxmodel

2jin2 2024. 1. 8. 20:16

[공부 내용 정리]

CSS란?

CSS는 Cascading Style Sheets의 약자.
Cascading (to fall quickly and in large amounts ⇒ 낙하)
- CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됨. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었음.

우리가 작성한 HTML의 스타일, 레이아웃 등을 꾸미는 역할.
CSS를 한번 작성해 여러 HTML에 재사용할 수 있음.

작성방법

선택자(Selector) - 이 요소에

{ - 스타일 적용을 시작할게요

속성(Property) - 이 속성에

: - 대응 값은

속성값(Property Value) - 이 값으로 지정해주세요

세미콜론(;) - 해당 속성 선언(명령)을 끝낼게요

} 해당 요소에 대한 스타일 적용을 마칠게요.

주석

한 줄, 여러 줄 모두 /* */ 로 작성.

/* 주석 */

인라인 방식

태그 자체에 style속성으로 스타일을 주는 방식
일부 스타일 적용에 제한이 있음.( ex. :hover, ::before, ::after와 같은 가상요소에는 사용불가 )

<p **style="color:yellow; background-color:black;"**>Hello wold</p>

→ 웬만하면 이렇게 사용하진 않음.

내부 스타일

head 태그 안 style 태그를 사용하여 스타일을 주는 방식

<!DOCTYPE html>
<html lang="ko-KR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>내부 스타일</title>
	**<style>
		p {
				color:yellow; 
				background-color:black;
		}
	</style>**
</head>
<body>
	<p>Hello world</p>
</body>
</html>

→ 코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않음.

외부 스타일

link

현재 문서와 외부 리소스의 관계를 명시.
빈 태그로 속성만을 포함
head 요소 내부에만 위치할 수 있음.
rel : relations 관계. 대상 파일의 속성을 나타냅니다. css 파일은 stylesheet
href : hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냄.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>외부 스타일</title>
	**<link rel="stylesheet" href="style.css">**
</head>
<body>
	<p>Hello world</p>
</body>
</html>

/* style.css */
p {
		color:yellow; 
		background-color:black;
}

해당 방법을 가장 권장

→ HTML과 CSS를 분리하는게 제일 좋음!

CSS 상속

1) 개별로 인라인 스타일 적용하기

<div>
	<h1 style="color:red;">Hello</h1>
	<h2 style="color:red;">Hello</h2>
	<p style="color:red;">Hello</p>
</div>

2) 태그 선택자 적용하기

h1{color:red;}
h2{color:red;}
p {color:red;}

3) 그룹 선택자(, )로 적용하기

h1, 
h2,
p {color:red;}

4) 상속 이용하기

div{
	color:red;
}

상속(Inheritance)

CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있음.

div {
	color: red;
	border: 5px solid pink;
}

-> 위에 본 div의 color 속성은 자식인 h1, h2, p에게 상속이 됨.

하지만 wirdth, height, margin, padding, border 와 같은 것은 상속되지 않음. → 크기와 관련된 것들은 상속되지 않는다.

inherit : 선택한 요소에 적용된 속성값을 부모와 동일하게 함.
initial : 브라우저 기본 스타일 속성을 따르게 함.

div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }

그리고 button, input 요소처럼 form 관련 태그들은 상속받지 않기도 함.

→ 브라우저별로 적용된 속성이 있기 때문.

전체 선택자

universal selector
html을 포함한 HTML 문서 내의 모든 요소를 선택함. * 사용하여 선택할 수 있음.

→ h1, h2, p의 글자 크기와 굵기가 다 다르지만 *을 해주면 다 똑같아짐.

타입(유형) 선택자 (태그 선택자, 요소 선택자)

특정 태그를 선택함

h1 {
	font-weight:bold;
}
p{
	font-size: 24px;
}

아이디 선택자(#)

id selector
HTML 페이지 내에 id는 유일해야 함!!
HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어짐.
아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많음.

<header id="header">
...
</header>

#header {
	padding: 10px;
}

클래스 선택자(.)

가장 중요하고 가장 많이 사용됨.
class selector
클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있음. 재사용성이 높음.

<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>

.fc-red {
	color: red;
}

<aside> 💡 id, class는 숫자로 시작하면 안됨! 하이픈(-) 과 언더바(_), 문자로만 시작할 수 있음.

</aside>

특성(속성) 선택자([])

주어진 특성을 가진 모든 요소를 선택함.

[type="button"]{
	border:0;
	cursor:pointer;
}
[class="btn"]{
	color:#fff;
	background: royalblue;
}

그룹 선택자(,)

h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}

h1, h2, h3, h4, h5, h6{ font-weight:bold;}

복합 선택자

자손(하위) 선택자( )

자식, 자손 모두를 선택할 수 있다.
공백, 띄어쓰기를 통해 구분!

section p {
  border: 3px solid skyblue;
}

-> 섹션 안에 있는 모든 p 태그 선택함.

자식 선택자(>)

> 를 통해 구분.
직계자손만을 선택.

section > p{
  color:royalblue;
}

일반 형제 선택자(~)

~를 통해 구분.
뒤에 나오는 형제(들)만 선택.

section ~ p{
  text-decoration:underline;
}

-> 섹션 뒤에 있는 p 태그들에만 영향을 미침.

인접 형제 선택자(+)

+를 통해 구분.
바로 뒤에 인접한 형제(오직 하나)만 선택.

section + p{
  background:yellow;
}

가상 클래스 선택자 (pseudo selectors)

선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있음.

가상 클래스, /구조적 가상 클래스 선택자는 둘 다 : 로 시작함!

가상 클래스

구조적 가상 선택자

: first-child

형제 요소 그룹 중 첫 번째 요소

: last-child

형제 요소 그룹 중 마지막 요소

: nth-child

형제 사이에서의 순서에 따라 요소를 선택할 수 있음.

/* 2번째 li */
li:nth-child(2) {
  color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li. (n은 0부터 1씩 증가합니다)*/
li:nth-child(2n+1) {
  color: lime;
}

→ ul의 li 의 자식일 경우 3번째 background-color를 hotpink로 변경한다.

:not

부정 선택자

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}

→ li 인데 first_child가 아닌 것을 선택함. (역전, 반대의 의미)

우선순위

1. 후자 우선의 원칙: 뒤에 나오는 CSS가 우선순위가 높음

2. 구체성(명시도)의 원칙 : 선택자가 구체적일수록 우선순위가 높음.

3. 중요성의 원칙

! important

이 선언은 다른 CSS의 어떤 선택보다도 우선함.
important 사용은 좋지 못한 습관.

display 속성

박스의 유형을 결정함.
어떤 방식으로 배치할지 레이아웃을 설정함

block : 요소 전후에 줄 바꿈을 생성
inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성.
inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있음 (여기까지 일단 공부)
~~flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정~~
~~grid: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정~~
~~none: 해당 속성은 접근성 트리에서 해당 요소가 제거됨. 이렇게 되면 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않음~~

CSS Box Model

HTML 요소를 감싸는 상자
웹 페이지는 이런 수많은 상자가 모여 있는 것임.
요소 , 패딩, 테두리, 마진으로 구성되어 있음.
- 요소 : 텍스트, 사진 등 보여줄 대상
- 패딩 : 요소 주변 영역을 감쌈
- 테두리 : 요소와 패딩을 감싸는 테두리
- 마진 : 테두리 밖의 영역을 감쌈.

margin 영역은 요소의 넓이에 포함되지 않음.

width

요소의 너비를 설정함.
기본값은 콘텐츠 영역의 너비지만 box-sizing 속성을 사용하여 테두리 영역의 너비 설정 가능.
auto : 기본값. 브라우저가 계산하여 지정함.

height

요소의 높이를 설정함.
auto : 기본값. 브라우저가 계산하여 지정함.

padding

컨텐츠 바로 바깥의 영역을 의미함. 요소 내부에 여백을 주기위한 공간.
단축 속성
내부 공간에서 간격을 넣고 싶을 때
padding-top padding-right padding-bottom padding-left 순으로 작성

p{
	padding: 10px; /* top, right, bottom, left 모두 10px */
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
	padding: 10px 20px 30px 40px;
}

margin

margin 영역에 색깔을 넣는 것은 불가능
외부 공간에서 요소와 요소 사이에 간격을 넣고 싶을 때
단축 속성
margin-top margin-right margin-bottom margin-left 순으로 작성

margin auto는 수평 정렬을 할수 있지만, 세로 정렬을 적용할 수는 없음!

ex) margin-left 를 설정했나 안했나의 차이. "더 편리해진 위니브에 오신 것을 환영합니다." 문구 이동

마진 병합 현상(Margin Collapsing)

1) 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상

2) 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

마진 병합 현상 해결방법

border

테두리를 지정합니다.
테두리는 요소가 차지하는 전체 너비, 높이의 일부입니다.
단축속성입니다.
선의 두께, 스타일, 색상을 지정할 수 있습니다
border-width border-style border-color
- border-width
  - border-top-width
  - border-right-width
  - border-bottom-width
  - border-left-width
- border-style
  - border-top-style
  - border-right-style
  - border-bottom-style
  - border-left-style
- border-color
  - border-top-color
  - border-right-color
  - border-bottom-color
  - border-left-color

box-sizing

content-box : 기본값. width, height에 border, padding 포함하지 않음.
border-box: width, height에 border, padding 포함.
- width = 콘텐츠 너비 + border + padding

overflow, overflow-x, overflow-y

박스보다 콘텐츠가 더 커 콘텐츠가 넘칠 경우 어떻게 처리할지를 지정.
visible: 기본값. 박스를 넘는 컨텐츠를 자르지 않음.
hidden: 요소의 크기만큼 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않음.
scroll: 요소의 크기만큼 잘라내고, 스크롤을 제공.
auto: 자동으로 콘텐츠가 넘칠 경우 스크롤바를 노출.

border-radius

상자의 모서리를 둥글게 처리함.
단축 속성

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

opacity

불투명도를 설정.
0-1 사이의 숫자를 지정할 수 있음. (0: 투명 - 1: 불투명)

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

CSS 선택자 연습하는 게임인데 은근 재밌다. 옆에 힌트가 있어서 막혀도 푸는 맛이 있었다.

저작자표시

'Front-End > HTML + CSS' 카테고리의 다른 글

[CSS] position/flex (1)	2024.01.09
[HTML] 태그/method/table (1)	2024.01.05
[HTML] 기본 문서 구조/태그 (3)	2024.01.04

현재글[CSS] 선택자/스타일/상속/boxmodel

2jin2story