CSS 기초

1. CSS 기초 문법

선택자(Selector)

: 스타일을 적용하고자 하는 HTML 요소

 

2. HTML에 CSS를 적용하기

[방법1] .css 파일을 만든 후, html에 적용

css파일에 코드를 작성하고 아래의 코드를 html파일 head태그 안에 붙여준다.

<link rel="stylesheet" href="이름.css">

 

[방법2] html에 css코드를 작성

html파일에 head태그 안에 아래와 같이 작성한다.

<style>css코드</style>

 

[방법3] 태그 속성으로 지정

태그마다 속성으로 따로 스타일을 지정해준다. html과 css가 잘 구별되지 않기 때문에 추천하지 않는다.

<h1 style="color: blue;">hello</h1>

 

3. 선택자

1. 선택자 특징

 

여러 선택자는 ,를 이용하여 한번에 사용 가능

h1, p{
	color : blue;
    }

2. 종류

 

1) 태그

p{
	color: blue;
    }

2) 아이디 = HTML 문서 내에서 고유한 이름

#myid{
	color: red;
    }

3) 클래스 = 비슷한 특징 갖는 요소 묶어서 사용

.myclass{
	color: yellow;
    }

4) 전체 선택자

*{ color: blue;}

5) 속성 선택자 = 특정 속성을 소유하는 모든 요소에 적용

a[target="_blank"]{color: red;}

6) 복합 선택자 = 선택자 2개 사용

 

- 자식 선택자 : 특정 태그안에 포함된 태그들을 자식이라고 본다.

article > p{color: red;}

 

- 후손 선택자 : 특정 태그 안에 포함된 자식과 그들의 자식 모두 포함한다.

article p {color: blue;}

7) pseudo 클래스 선택자 = 가상 클래스

:link = 방문하지 않은 링크일 경우

a:link {color: yellow;}

:visited = 방문한 링크일 경우

:hover = 요소에 마우스가 올려져 있는 경우

 

4. 값과 단위

1) px : 절대적 크기

2) em : 상대적 크기, 현재 스타일이 지정된 요소의 font-size기준

3) rem : 상대적 크기, 최상위 요소의 font-size기준

4) % : 상대 길이, 높이, 부모 요소가 기준

 

5. 위치 속성

1. 태그 종류별 위치 속성 제한

1) block element : width, height, margin, padding 가능

2) inline element : width, height, margin-top, margin-bottom 불가능

3) inline-block : inline속성(content에 맞게 박스크기를 가짐)을 가지면서 inline에서 변경 불가능했던 속성이 변경 가능

 

2. flexbox

: 요소들을 담고 있는 바깥 요소에 display: flex; 추가

*바깥 요소 = 부모 요소

 

1) flex-direction : flex 컨테이너 안의 아이템들의 방향을 정함

 

2) flex-wrap : flex 아이템이 컨테이너를 벗어났을 때 줄 바꿔줌

3) justify-content : 정해진 방향을 기준으로 수평방향으로 item을 정렬하는 방법을 정함

 

4) align-items : 정해진 방향을 기준으로 수직방향으로 item을 정렬하는 방법을 정함

 

5) align-content : 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬하는 방법

6) flex-grow : flex 아이템의 확장, 단위 없는 속성값, 기본 0

 

7) flex-shrink : flex 아이템의 축소, 기본 1

 

8) flex-basis : flex 아이템의 기본 크기를 결정, 기본 auto

 

9) flex : flex-grow, flex-shrink, flex-basis 한번에 사용 가능