(스마트인재개발원) CSS 복습

최종프로젝트 조가 정해지고 

 

주제를 정하기 시작했다!!!

 

정처기 필기 시험때문에 정신없었던 일주일이였지만 ㅠㅠ 

 

아마 이번에 내가 프론트를 맡을거 같아서 기존수업에서 배웠던 

 

CSS와 html을 복습해보는 시간을 가져봤습니다.

---

 

 

CSS(Cascading Style Sheets)

HTML문서의 스타일 꾸밀 때 사용하는 스타일 시트 언어

 

왜 css를 따로 만들었을까??

-유지보수 편의성 + 재사용성

 

 

css 기본구조

디자인

 

선택자  / 선언

 

css란?

h1{

 

color : red;

}

 

h1 : 선택자 / color : red; : 선언

---

font

: 글자의 폰트를 정의하는 속성

 

font-family  글꼴(나눔고딕, 굴림, 돋움)

 

font-size       글자크기(px,em,rem) px->픽셀/고정된 글자크기

 

font-weight 글자두께(bold, 100~900)

 

font-style     글자스타일(ltalic)

 

선택자의 종류->ppt 따와라

 

전체선택자 (가중치:0)

:*로 표시되며 웹 문서 내 모든 요소 선택

 

ul>li*3

 

아이디 선택자(가중치 :100) 한번만사용가능

:# 기호로 표시되며 특정한 요소 선택

html구조의 공간분할을 적용할때

 

클래스 선택자(가중치 : 10) 공통되는 스타일을 적용

:마침표(.) 기호로 표시되며 특정한 요소 선택

공통되는 스타일을 적용할 경우 (중복가능)

 

 

---

계층 선택자

:특정위치의 요소를 계층적 구조로 요소 선택

 

자손선택자 : 기준 선택 (띄어쓰기 ex용달 짱구)

 

자식선택자 (>사용)  

형만>짱구{

}

ul>li{

}

근접후행 선택자 (+사용)

짱구

• + 짱아
•  

li+li

 

후행선택자(~사용)

짱구~흰둥

li~span

 

그룹선택자

:  다양한 요소들은 콤마(,)로 구분하여 요소 선택

 

반응 선택자

: 사용자의 반응으로 생성되는 특정한 상태를 선택

 

:active 마우스로 클릭할 때 선택

 

:hover 마우스를 올린 태그를 선택

 

 

크기단위

: 요소 or 텍스트의 크기를 지정하는 단위

 

px -> 화소 하나의 크기에 대응되는 단위 (고정값)

em -> 부모요소 크기에 따른 배수 단위

rem -> html 태그의 폰트 크기에 따라 결정

 

 

스타일 시트 명시도 계산

가중치     스타일 적용

0               전체선택자 *{color:red;}

 

1               타입선택자  클래스이름{color:red;}

 

10            클래스선택자 .클래스이름{color:red;}

 

100          아이디선택자 #main{color:red;}

 

#(아이디100)box p span{

color : yellow;

}

 

---

 

 

클래스와 아이디 차이 : 중복

 

계층선택자

 

자손 : 기준선택 띄어쓰기

자식 : 기준>선택

근접후행 : 기준 + 선택

후행 : 기준~ 선택

 

그룹선택자(,)

반응선택자

-클릭 : active

-올리는거 : hover

 

---

 

 

공간분할태그

 

: 경계를 분할하거나 영역을 나눌 때 사용

<div>,<p>,<span>

div > p > span

 

display

:요소가 화면에 보이는 방식 지정

block : block형식으로 지정

 

->웹 페이지의 가로공간을 모두 차지하는 속성

inline : inline 형식으로 지정

 

->컨텐츠(내용)이 끝나는 지점까지 너비를 가지는 속성

단 너비와 높이를 설정할 수 없다

 

none : 화면에 보이지 않게 지정

-> 해당 html요소를 보이지 않게 지정

 

---

css위치속성

 

Box Model

:요소의 부피감을 결정하는 개념

(웹페이지 레이아웃, 디자인 설계 시

Content : Content

 

border : 경계선 스타일 지정

 

margin : 경계선의 바깥 여백 지정

 

padding : 경계선의 안쪽 여백 지정

 

margin 바깥 여백 속성

 

:테두리를 기준으로 요소의 바깥여백 지정

margin : 10px; ->모든 방향에 적용

margin : 10px 10px; -> top,bottom/right,left

 

margin : 10px 10px 10px; -> top /right,left / bottom

 

margin : 10px 10px 10px 10px; -> top / right /bottom/left (시계방향)

 

margin: auto;

 

margin-top ->위쪽 바깥여백

---

https://smhrd.or.kr/

스마트인재개발원