CSS 1. Basic

min seung moon·2021년 10월 25일

HTML5,CSS3,JavaScript

목록 보기

4/10

1. CSS

01. CSS 구성

선택자{
	속성 : 속성값;
	속성 : 속성값;
}

-1. 선택자(selector)의 역할

속성과 값을 지정할 대상을 검색

div{
	color : red;
}

-2. 속성(Property)과 값(Value)의 역할

검색된 대상에 지정될 CSS 명령

div{
	color : red;
	font-siz : 20px;
	font-weight : bold;
}

-3. 주석

/* Comment */
문서 내 수정사항이나 설명 등을 작성

02. CSS 작성법

-1. inline 작성법

태그에 직접 작성

<div style="color: red; font-size: 20px; font-weight: bold;">HELLO</div>

-2. embedded 작성법

<style></style> 에 작성

<head>
	<style>
		div{
			color: red;
			font-size: 20px;
			font-weight: bold;
		}
	</style>
</head>

-3. link 작성법

<link>로 외부 CSS 파일 불러오기

<head>
	<link rel="stylesheet" type="text/css" href="css file route" />
</head>

-4. @import 작성법

CSS @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
직렬 호출 방식이라 절차지향으로 호출이 됨, 그렇기에 시간이 걸릴 수 있어 특별한 상황에서 사용
- 특별 상황 : 다음에 호출될 css가 현재 css가 호출 되고 호출되어야 할 경우 @import 방법이 적합

<style>
	@import url("./css/common.css");
</style>

* .css File

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

03. 기본 선택자

-1. Universal Selector(전체 선택자)

(요소 내부의)모든 요소를 선택
*(Asterisk Mark)

* {
	color : red;
}

-2. Type Selector(태그 선택자)

태그이름
E

li {
	color : red;
}

-3. Class Selector(클래스 선택자)

HTML class 속성 값
.E

.orange{
	color : red;
}

-4. ID Selector

HTML id 속성의 값이 E인 요소 선택
#E

#orange{
	color : red;
}

04. 복합선택자

-1. Basic Combinator(일치선택자)

동시에 만족하는 요소 선택

span.orange {
	color : red;
}

-2. Child Combinator(자식 선택자)

자식 요소 선택

ul > .orange{
	color : red;
}

-3. Descendant Combinator(후손(하위, 자손) 선택자)

후손(하위, 자손)요소 선택
후손은 조상 태그의 자식 태그 포함해서 전부 후손이다

div .orange{
	color :red;
}

-4. Adjacent Sibling Conminator(인접 형제 선택자)

다음 형제 요소 하나만 선택

.orange + li{
	color : red;
}
<ul>
	<li></li>
	<li></li>
	<li class="orange"></li>
	<li></li>*
	<li></li>
</ul>

-5. General Sibling Combinator(일반 형제 선택자)

다음 형제 요소 모두 선택

.orange ~ li{
	color : red;
}
<ul>
	<li></li>
	<li></li>
	<li class="orange"></li>
	<li></li>*
	<li></li>*
</ul>

05. 가상 클래스 선택자

가상 클래스 선택자는 ':'가 하나다

-1. HOVER

마우스(포인터)가 올라가 있는 동안에만 선택
E:hover

a:hover{
	color :red;
}

-2. ACTIVE

마우스로 클릭하는 동안에만 선택
E:active

a:active{
	color :red;
}

-3. FOCUS

포커스가 된 동안에만 선택
E:focus
대화형 콘텐츠에서 사용가능(input, img, tabindex)

input:focus{
	color:red;
}

-4. FIRST CHILD

형제 요소 중 첫번째 요소라면 선택
E:first-child

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

-5. LAST CHILD

형제 요소 중 마지막 요소라면 선택
E:last-child

.fruit li:list-child{
	color : red;
}

-6. NTH CHILD

형제 요소중 n번째 요소라면 선택
(n 키워드 사용시 0부터 해석(Zero-base))
E:nth-child(n)

.fruits li:nth-child(2){
	color:red;
}

- n 키워드는 0부터 시작(2n -> 2*0=0, 2*1=2, 2*2=4 ... 짝수를 찾을 수 있음)
.fruits li:nth-child(2n){
	color:red;
}
<ul class="fruits">
	<li></li>
	<li></li>*
	<li></li>
	<li></li>*
</ul>

- n 키워드는 0부터 시작(n+3 -> 0+3=3, 3번째 부터 선택 )
.fruits li:nth-child(n+3){
	color:red;
}
<ul class="fruits">
	<li></li>
	<li></li>
	<li></li>*
	<li></li>*
</ul>

nth-chile 주의 사항***

해석을 nth-child(n)를 먼저 찾고 그게 p태그인지 확인 후 적용
- 하지만 지금 첫번째는 div 이기에 적용이 안됨

fruits p:nth-child(1){
	color : red;
}
<div class="fruits">
	<div></div>
	<p></p>
	<p></p>
	<span></span>
</div>

이번 해석에서는 .boxGroup안에 있는 모든 첫번째 요소의 div에 스타일을 적용이 됨
- 1에만 적용하고 싶으면 수정을 해야 함(자식 선택자를 선택)

.boxGroup div:first-child{
	color : red;
}
<div class="boxGroup">
	<div>1</div>*
	<div></div>
	<div>
		<div></div>*
		<div></div>
		<div></div>
	</div>
</div>

.boxGroup>div:first-child{
	color : red;
}

모든 첫번 째 하위 태그에 적용을 희망하는 조건이 div일 경우면
- 수정하여 적용이 가능(선택자 생략)


.boxGroup div:first-child{
	color : red;
}
<div class="boxGroup">
	<div>1</div>*
	<div>2</div>
	<div>3
		<p>3-1</p>*
		<div></div>
		<div></div>
	</div>
</div>
.boxGroup :first-child{
	color : red;
}

-7. NTH OF TYPE

타입(태그이름)과 동일한 타입인 형제 요소 중 n번째 요소라면 선택
(n키워드 사용시 0부터 해석(Zero-base))
E:nth-of-type(n)

.fruits div:nth-of-type(1){
	color : red;  
}

nth-of-type 주의 사항***

nth-of-type의 선택자는 오로지 type(태그이름)만 작용 가능
- nth-of-type(1)으로 첫번째 태그를 확인하지만 .red라는 클래스가 없어 적용 안됨

.fruits .red:nth-of-type(1){
	color : red;
}
<ul class="fruit">
	<li></li>
	<li class="red"></li>
	<li></li>
	<li class="red"></li>
</ul>

-8. Nefation Selector(부정 선택자)

E:not(S)

.fruits li:not(.strawberry){
	color:red;
}
<ul class="fruit">
	<li></li>
	<li class="strawberry"></li>
	<li></li>
	<li></li>
</ul>

06. 가상 요소 선택자

가상 요소 선택자는 '::'가 두개다

-1. BEFORE

요소 내부의 앞에, 내용(content)을 삽입
E::before
content는 필수 속성이다.

ul li::before{
	<!-- content: "숫자";*
	font-weight : bold;
	color : red;
	margin-right : 20px; -->
	content : "";
	width : 30px;
	height : 30px;
	background : tomato;
	margin-right : 20px;
	display : inline-block;
	border-radius;
}
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

-2. AFTER

요소 내부의 뒤에, 내용(content)을 삽입
E::after

ul li::after{
	<!-- content : ".0"; -->
	content : url("imgSrc");
}
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

-3. 가상요소클래스 주의사항

: 하나만 작성해도 되지만 :: 두개 작성하는것을 권장
원래 첫 출시에 :로 출시

div:before{
	content : "<";
}
div:after{
	content: ">";
}
<div>DIV</div>

07. 속성 선택자

-1. ATTR

속성 attr을 포함한 요소 선택
[attr]

[disabled]{
	opacity : 0.2; <!--20%-->
	color : red;
}
<input type="text" disabled>

-2. ATTR=VALUE

속성 attr을 포함하며 속성 값이 value인 요소 선택
[attr=value]

[type="password"]{
	opacity : 0.5; <!--50%-->
	color : red;
}
<input type="password">

-3. ATTR^=VALUE

속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택
[attr^=value]

[class^="btn"]{
	font-weight : bold;
	border-radius : 20px;
}
<button class="btnSuccess">Success</button>
<button class="btnDanger">Danger</button>
<button>Normal</button>

-4. ATTR$=VALUE

속성 attr을 포함하며 속성값이 value로 끝나는 요소 선택
[attr$=value]

[class^="btn"]{
	font-weight : bold;
	border-radius : 20px;
}
[class$="success"]{
	color : green;
}
<button class="btnSuccess">Success</button>
<button class="btnDanger">Danger</button>
<button>Normal</button>

08. 상속

-1. 상속되는 속성들(properties)

text 속성들이 대부분 상속이 된다.

01-01. font
	- font-size
	- font-weight
	- font-style
	- line-height
	- font-family
01-02. color
01-03. text-align
01-04. text-indent
01-05. text-decoration
01-06. letter-spacing
01-07. opacity
etc...

-2. 강제 상속

상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있다
'자식'을 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는것은 아니다

<div class="parent">
	<div class="child"></div>
</div>
.parent{
	position : absolute; //상속되지 않는 속성과 값
}
.child{
	position : inherit; // 강제 상속 받아 position : absolut;와 동일
}

09. 우선순위

<body>
    <!--인라인 선언 방식-->
    <div id="colorYellow" class="colorGreen" style="color:orange">Hello world!</div>
</body>

div { color : red !important; } // !important
#colorYellow { color : yellow } //아이디 선택자
.colorGreen { color : green; } //클래스 선택자
div { color : blue; } //태그 선택자
* { color : darkblue; } //전체 선택자
body { color : violet; } //상속

-1. 우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우,
어떤 선언의 CSS속성(property)을 우선 적용할지 결정하는 방법

명시도 점수가 높은 선언이 우선(명시도)
점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서)
명시도는 '상속' 규칙보다 우선(중요도)
!import가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

우선순위에는 '중요도, 명시도, 선언 순서'의 개념이 있습니다. 각 개념이 의미하는 것을 기억하세요
!import > inline > ID > Class > Type > * > 상속

01. !import(가장 중요)
	: 모든 선언을 무시하고 가장 우선
	- 점수 : 무한대 pt
02. Inline(인라인 선언 방식, Style Attribute)
	: 인라인 선언(HTML style 속성을 사용)
	- 점수 : 1000pt
	- 추천하지 않는 방식
03. ID Selector(아이디)
	: 아이디 선택자
	- 점수 : 100pt
04. Class Selector(클래스)
	: 클래스 선택자, 가상 클래스 포함
	- 점수 : 10pt
05. Type Selector(태그)
	: 태그 선택자, 가상 요소 포함
	- 점수 : 1pt
06. Universal Selector(전체)
	: 전체 선택자(*)
	- 점수 : 0pt
07. CSS Inheritance(상속)
	: 상속 받은 속성은 항상 우선하지 않음, 부정 선택자 포함
	- 점수 : 계산하지 않음

10. 단위

-1. px 단위

해상도에 따른 상대 단위
절대 수치로 고정

-2. % 단위

부모의 영향을 받는 단위
부모의 크기를 기준으로 수치 측정 된다

-3. em 단위

자기 자신의 font-size에 영향을 받는 단위

.container{
	width : 60em; // 60em = 60*10 = 600px
	font-size : 10px;
}

-4. rem 단위

rem(root em), 최상위 요소(html)에 지정된 font-size에만 영향을 받는 단위

html{
	font-size : 10px;
}
.child{
	width : 20rem; // 20rem = 10px * 20 = 200px
}
body{
	// html에게 상속 받는 font-size를 덮을 수 있어
	// 기본 font-size를 유지하며 rem에는 영향을 안준다
	font-size : 16px;
}

-5. vw 단위

vw(viewport width), 보이는 화면 전체 가로
백분율

div{
	width : 50vw;  //viewport 가로의 50%
}

-6. vh 단위

vw(viewport height), 보이는 화면 전체 높이
백분율

div{
	height : 50vh;  //viewport 높이의 50%
}

-7. vmin 단위

viewport의 최소 넓이
현재 더 작은 사이즈((width or height))의 기준 단위
백분율

div{
	width : 50vmin;
}

-8. vmax

viewport의 최대 넓이
현재 더 넓은 사이즈(width or height)의 기준 단위
백분율

div{
	width : 50vmax;    
}

min seung moon

아직까지는 코린이!

이전 포스트

HTML 태그, 속성

다음 포스트

CSS 1. Basic

HTML5,CSS3,JavaScript

1. CSS

01. CSS 구성

-1. 선택자(selector)의 역할

-2. 속성(Property)과 값(Value)의 역할

-3. 주석

02. CSS 작성법

-1. inline 작성법

-2. embedded 작성법

-3. link 작성법

-4. @import 작성법

03. 기본 선택자

-1. Universal Selector(전체 선택자)

-2. Type Selector(태그 선택자)

-3. Class Selector(클래스 선택자)

-4. ID Selector

04. 복합선택자

-1. Basic Combinator(일치선택자)

-2. Child Combinator(자식 선택자)

-3. Descendant Combinator(후손(하위, 자손) 선택자)

-4. Adjacent Sibling Conminator(인접 형제 선택자)

-5. General Sibling Combinator(일반 형제 선택자)

05. 가상 클래스 선택자

-1. HOVER

-2. ACTIVE

-3. FOCUS

-4. FIRST CHILD

-5. LAST CHILD

-6. NTH CHILD

nth-chile 주의 사항***

-7. NTH OF TYPE

nth-of-type 주의 사항***

-8. Nefation Selector(부정 선택자)

06. 가상 요소 선택자

-1. BEFORE

-2. AFTER

-3. 가상요소클래스 주의사항

07. 속성 선택자

-1. ATTR

-2. ATTR=VALUE

-3. ATTR^=VALUE

-4. ATTR$=VALUE

08. 상속

-1. 상속되는 속성들(properties)

-2. 강제 상속

09. 우선순위

-1. 우선순위 결정

10. 단위

-1. px 단위

-2. % 단위

-3. em 단위

-4. rem 단위

-5. vw 단위

-6. vh 단위

-7. vmin 단위

-8. vmax

HTML 태그, 속성

CSS 2. Box Model

0개의 댓글