CSS 첫 시작

목차

1. CSS 기초 이론
2. 문법
3. 선택자
     모든 요소의 선택자
     태그 선택자
     클래서 선택자
     아이디 선택자
4. 결합자
5. 스타일의 속성과 값

1. CSS 기초 이론

HTML이 구조를 위한 내용이면 CSS는 모양을 위한 시트 브라우저의 요소에 모양을 적용시킨다.

2. 문법

선택자 {
속성 : 값
}

CSS는 선택자 속성 값으로 이루어져 있다.

3. 선택자

선택자 : 어떤 요소에 스타일을 적용시킬지를 명시해주는 것이다.

선택자 유형

*{} : 모든 요소의 선택자

div {} : 유형 선택자 모든 div 태그에 스타일을 적용 시키겠다.

.class {} : 클래스 선택자

#id {} : 아이디 선택자

---

4. 결합자

결합자 : 여러 선택자를 연결해서 스타일을 사용

div div {} : 자손 결합자

.class .class2 {} : 자손 결합자

div > div : 자식 결합자

div + div : 인접 결합자

의사 클래스/요소 : html 작성할 때 요소로 작성하지 않은 요소를 선택할 때 사용

div:hover {} 의사 클래스 => 마우스를 위에 올렸을 때 스타일 변화

div:after {} 의사 요소 => 가상요소를 만들 때 사용

---

5. 스타일의 속성과 값

display : block;

태그의 특성을 block 요소로 바꿔준다. 화면의 한줄을 차지.

display : inline;

인라인 요소 span a 등등 요소가 인라인을 가지고 있다. 요소의 내용의 크기만큼 차지한다.

display : flex;

이 속성있는 자식의 요소의 정렬읠 방식을 정한다.

display : none;

화면에서 요소가 보이지 않게 지워 버린다. 나중에 자바스크립트에서 display 속성을 none으로

지워 버리고 요소 선택을 하면 선택이 되지 않는다.

display : inherit;

부모의 속성을 가져와서 값을 적용한다.

display : initial;

태그가 원래 가지고 있던 속성으로 초기화

너비 100px , 높이 100px 의 빨간배경 영역을 볼 수 있다.

width : 100px; 태그의 너비

height : 100px; 태그의 높이

width : max-content;

자식 내용의 크기 만큼 너비를 차지한다.

width : min-content;

자식 내용의 최소만큼 너비를 차지한다.

max-width : 100px;

설정한 너비 이상으로 태그의 너비가 넓어질 수 없다. 최대 너비를 지정

min-width : 100px;

설정한 너비 이하로 태그의 너비의 크기가 줄어들지 않는다. 최소의 너비를 지정

 

위 사진은 overflow : hidden 적용한 것을 볼 수가 있다. 적용 전에는 p태그의 높이가 100px영역이 밖으로 나간 것을 볼 수가 있다.

overflow : hidden;

자식 태그가 부모 영역 이상으로 넘어가면 보이지 않게 처리

overflow : scroll;

자식의 태그가 부모의 영역 밖으로 나왔을 때 스크롤 효과를 준다.

overflow-x : hidden;

좌우로 자식태그가 넘어가면 안보이게 처리

overflow-y : hidden;

자식태그가 아래로 넘어가면 안보이게 처리

overflow-y : scroll;

자식태그가 아래로 넘어가면 스크롤 처리

opacity : 0.1;

태그에 투명도를 설정할 수 있다. ( 1 === 100% / 0.1 === 10%)

font-size : 16px; 태그의 내용에서 글자 크기 지정

font-weight : 500; 태그의 글자의 굵기 지정

color : red; 글자의 색 지정

text-align : center / start / end; 글자의 정렬을 가운데/왼쪽 정렬/오른쪽으로 정렬

text-decoration : overline / underline / none; 텍스트 중간선 / 아래선 / 선을 제거 해준다.

letter-spacing : 10px; 글자의 간격을 조절

 

 

요소의 간격 조절 (margin 과 padding)

p태그에 margin 40px 을 주었고 네 방향간격이 외부(부모 태그로)로부터 40px 떨어진 것을 볼 수가 있다.

 

 

p태그에 padding 20px 을 주었고 네 방향간격이 내부(자기자신으로)로부터 20px 늘어난 갓얼 볼 수 있다.