CSS 기초 - 1

인라인 스타일 : HTML 태그마다 style 속성으로 css 코드를 넣어주는 방식. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없으며, 분리가 불가능하기에 특별한 경우 제외하고는 사용하지 않음

 

내부 스타일시트 : head 태그 안에 style 태그를 두고 그 안에 css 코드를 작성하는 방식. css가 해당 html 문서에서만 적용될 경우 유용하게 사용될 수 있다.

 

링킹 스타일 시트 : 외부 css파일을 html 문서에 연결하는 것. css코드를 여러 html 파일에서 공통으로 사용할 수 있으므로, 가장 널리 사용되는 방식임

 

 

 

 

CSS의 선택자가 구체적일수록 우선순위가 높다

 

- css로 html을 꾸미려면 어떤 것을 꾸미겠다는 지정이 필요하다.

 

- 같은 선택자의 경우 뒤에 오는 것이 우선 순위가 높음

 

 

- 태그 선택자는 전체 요소 선택자보다 우선순위를 가진다.

p{
	color : blue;
}

 

 

- class 선택자는 태그 선택자보다 우선 순위를 가진다.

.example{
	color: blue;
}

 

 

- class 선택자는 다른 선택자에 이어붙일 수 있다

p.examle{
	color : blue;
}

위는 p태그이면서 example 클래스를 가진 요소를 가리킨다.

 

 

<p class = “example example1”> 처럼 여러개의 class를 가질 수 있다. 스페이스로 구분한다.

.example.example1 {
	color : blue;
}

위는 class명이 example면서 example1인 것들에게 적용시키는 것

 

 

- id 선택자는 class 선택자보다 우선순위를 가진다.

- id는 페이지상에서 요소마다 고유해야한다.

- 즉 한 요소에서 id=“red”라면 다른 요소에서 id가 red인 요소가 존재하면 안됨

#example{
	color : blue;
}

 

 

- 여러 요소들을 한꺼번에 선택하고 싶을 때, 요소들을 쉼표로 구분해준다. 그룹 선택자라고 한다.

span, .example, #example {
	color : blue
}

위는 span태그 인 것과 class명이 example인 것, 그리고 id가 example인 것들에게 적용시키는 것

 

 

 

 

 

	<ul class="outer">
		<li>육류</li>
		<li>채소</li>
		<li>유제품</li>
		<li>과일
			<ul>
				<li>사과</li>
				<li>포도</li>
				<li>딸기</li>
				<li>키위</li>
			</ul>
		</li>
	</ul>

	<ol>
		<li>한놈</li>
		<li>두시기</li>
		<li class="starter">석삼</li>
		<li>너구리</li>
		<li>다섯놈</li>
		<li>육개장</li>
		<li>칠푼이</li>
		<li>팔보채</li>
		<li>구공탄</li>
	</ol>

html 예시이다.

 

 

.outer li{
	
}

위는 class명이 outer인 요소 안에 있는 모든 li에 적용

 

 

.outer > li {

}

class명이 outer인 요소 안에 있는 1촌 자식에게만 적용

위의 코드에서는 <ul> 전까지 적용

 

 

.outer >  li li {

}

class명이 outer인 요소 안의 1촌 자식안에 있는 모든 li에 적용

 

 

.starter + li{

}

class명이 starter인 요소를 뒤따르는 바로 다음 li에 적용

위 코드에서는 너구리만 적용된다

 

 

 

 

[가상 클래스]

 

ol li:first-child,
ol li:last-child{

}

ol 태그안에 있는 li의 첫 번째 요소와, 마지막 요소에 적용되는 태그이다. 예시 코드 기준으로 한놈,구공탄에 적용된다.

 

 

.outer > li:not(last-child){

}

class명이 outer인 요소의 1촌 자식 중 마지막 요소가 아닌 것에 적용

위의 코드에서, 육류,채소,유제품에 적용된다.

 

 

ul:not(.outer) li {

}

ul태그들 중 class명이 outer가 아닌 ul 태그 안의 li에게 적용

위의 코드에서는 사과,포도,딸기,키위에 적용

 

 

ol li:nth-child(3) {

}

ol태그에 속한 li태그 중 3번째에게 적용

위의 코드에서는 석삼에 적용

 

 

ol li:nth-child(3) 3번째 것

ol li:nth-child(3n) 3의 배수에 적용

ol li:nth-child(3n+1) 3개씩 띄워서 적용 1 다음 4

ol li:nth-child(3n+2) 2번째 적용, 5번째 적용, 8번째 ,,,

ol li:nth-child(odd) 홀수번째에 적용

ol li:nth-child(even) 짝수번째에 적용

 

 

li : hover{

}

li태그 중에 마우스가 올라간 것들에 적용

 

 

 

 

[스타일]

 

font-style 글자를 기울일 때 사용할 수 있다

ex) font-style : italic;

 

font-weight 글자의 굵기를 조절한다.

nomarl 과 bold 중 선택하거나

100~900 사이 100 단위의 수치를 사용

 

font-size 글자의 크기를 지정 

단위로는 px, %, em, rem 사용

 

px는 절대값으로서 픽셀 단위

100%는 1em, 부모요소와의 상대적 크기를 나타냄

rem은 html 요소와의 상대적 크기를 가지므로, 요소의 중첩에 영향x

(맨 바깥쪽의 html 요소에만 비례해서 크기를 정함)

 

즉 1.5em이 [부모 ->  부모 * 150% = 자식 -> 자식 * 150% = 손주]

처럼 물려받을수록 늘어나면서 적용된다면

 

1.5 rem은 [부모 -> 부모 * 150% = 자식 -> 부모 * 150% = 손주]

처럼 맨 바깥쪽 html 요소에만 비례해서 크기가 정해진다

 

 

pt는 1인치/72로 프린트할 컨텐츠에 사용

 

 

[html]

 바깥
<div>중간
	<div>안쪽</div>
</div>

[css]

html{
	font-size : 14px;
}
div {
	font-size : 2em;
}

이렇게 하면, “바깥”의 크기는 14px,

“중간”의 크기는 28px,

“안쪽”의 크기는 56px가 된다.

 

 

text-decoration

밑줄, 취소선, 물결선 등으로 글을 꾸며주는데 사용

 

text-transform

알파벳의 대소문자 표시에 사용

 

text-shadow

텍스트에 그림자를 줄 수 있다.

text-shadow : x좌표, y좌표, 흐림(선택), 색; 으로 사용한다

ex) text-shadow : 2px 2px lightgrey

 

 

text-align

텍스트의 정렬 방식을 지정

 

left 왼쪽 정렬

center 가운데 정렬

right 오른쪽 정렬

justify 왼쪽으로 정렬하면서, 텍스트가 여러줄이 될 때, 

마지막 줄을 제외한 줄들의 오른쪽이 나란히 정렬됨

 

 

letter-spacing 자간 조절

word-spacing 단어 간격 조절

line-height 줄 높이 조절

 

text-indent 

들여쓰기 조절

 

list-style

ul과 ol 목록의 불릿,숫자 스타일을 지정할 수 있음

none을 통해 아무것도 붙이지 않아도 됨

 

 

 

 

[색상 표현]

 

keyword 색상마다 부여된 이름

ex) white 

 

RGB(A) 빨강,초록,파랑의 광원으로 색을 혼합,

끝에 알파값을 붙여서 투명도를 조정할 수 있음

ex) rgb(255, 255, 255)

ex) rgb(0, 0, 0, 0.25)

투명도는 높을 수록 짙고, 낮을 수록 투명해진다.

 

 

HEX R,G,B,Alpha 값들을 16진수형태로 나타낸 것

ex) #FFFFFF

 

HSL(A)은 색상,채도,명도값 그리고 알파값을 조합하여 색을 나타냄

ex) hsl(0, 100%, 100%)

 

 

css color mdn을 검색하면 여러 색을 볼 수 있다.

 

 

 

 

 

[인라인 요소와 블록 요소]

 

 

블록요소는 딱딱한 상자

사각형의 형태를 가지며, 너비,높이, 안팎의 간격을 부여받을 수 있음

 

인라인 요소는 비닐이나 랩 안에 내용물을 넣은 것과 같음.

일쩡한 바깥 형태나 껍데기 없이 페이지의 흐름에 따라 다른 텍스트,컨텐츠와 어우러져 배치됨

 

 

[inline]

기본 너비 : 컨텐츠만큼

width, height : 무시

가로공간 차지 : 공유

margin 속성 : 가로만 적용

padding 속성 : 가로만 적용, 세로는 ‘배경색만’

 

 

[block]

기본 너비 : 부모의 너비만큼

width, height : 적용

가로공간 차지 : 독점

margin 속성 : 모두 적용 (상하상쇄)

(마진이 겹치면 하나가 먹힘)

padding 속성 : 모두 적용

 

[inline-block]

기본 너비 : 컨텐츠만큼

width, height : 적용

가로공간 차지 : 공유

margin 속성 : 모두 적용

padding 속성 : 모두 적용

 

 

 

inline요소는 형태를 가지지않는다.

block은 한 줄에 다른 것들이 들어올 수 없다

inline-block은 딱딱한 상자, 정사각형 형태를 유지하면서, 상자 각각이 줄을 공유하면서 나열됨