Unit4 [css기초]

css은 사용자 경험을 제공하는 도구

 

사용자 인터페이스(UI): 일반사용자가 쉽게 사용할수 있도록 인터페이스

사용자 경혐(UX) :사용자 경험

CLI :개발자들이 애플리케이션과 소통하기 위해 키보드로 작성한 암호눌러서 동작시킴

 

프론트엔드 개발자 역할 : 애플리케이션과 소통에 필요한 UI이 제작

컴포넌트 기능별로 묶어서 제작

레이아웃 디자인

타이포그래피와 색상 적용

 

셀렉터

body {

                 color: green;

                 선언

                 속성명  :   속성값 ; 선언구분자 

         }

      선언블록

 

css 연결 -> link요소 : hrml파일과 다른 파일을 연결하는 목적으로 사용

rel속성 : 파일의 특징

href 속성: 파일의 위치

 

css 스타일 적용

1.인라인 스타일 

2.내부 스타일 시트

3. 외부 스타일 시트

 

기본적인 셀렉터 

id로 이름 붙여서 스타일링 적용 

<p id = "title"> section </p>

class로 스타일을 분류하여 적용

 

여러개의 class를 하나의 엘리먼트에 적용

<li class = "so se">go</li>

 

색상

color

background-color

border-color

font-family

 

기타 스타일링

굵기:font-weight

밑줄,가로줄:text-decoration

자간:letter-spacing

행간: line-height

 

*자간: 글자와 글자 사이

*행간: 두 글줄을 나누는 수직의 간격

 

정렬

vertical-align 세로정렬시 부모요소 display속성이 table-cell

 

center,font 사용 X

관심사 분리 패러다임 적용

html파일과 css파일 역할 따로 담당

 

단위

절대 단위 :px,pt 등

상대 단위: %,em,rem,ch,vw,wh 등

 

MDN ,w3schools 참고

 

글꼴 사이즈 정할때

px는 항상 설정된 픽셀로 고정 , 인쇄와 같이 화면사이즈가 정해진 경우 유리

rem는 시용자가 설정한 글꼴 크기에 따르므로 접근성 유리 ,root의 글자 크기 따라서 변함

 

화면 사이즈를 정할때

반응형 웹에서 기준점을 만들때

디바이스너비에 따라 유동적인 레이아웃이 적용

화면 너비나 높이에 따른 상대적인 크기가 중요할때

vw(viewport width),vh(viewport height)를 사용 

*viewport: 웹사이트 보이는 영역

1vw는 보이는 width의 1/100

1vh는 보이는 height의 1/100

 

박스모델 기초

 

block 줄바꿈이 되는 박스

div , p 

너비 : 100%

width,height 등 크기 설정 속성 작동 O

inline,inline-block : 옆으로 붙는 박스

inline :줄바꿈 X ,크기 지정 X

span

너비: 글자가 차지하는 만큼

width,height 등 크기 설정 속성 작동 X

 

inline-block:줄바꿈 X 동시에 block박스 특징 가짐

너비: 글자가 차지하는 만큼

width,height 등 크기 설정 속성 작동 O

 

margin 바깥여백

top,right,bottom,left

p{

    margin:10px 20px;

} 

 

padding: 안쪽여백

 

박스를 벗어나는 콘텐츠처리

 

p{

  height: 40px;

  overflow:auto;

}

overflow

auto : 박스보다 큰 콘텐츠 스크롤

hidden :넘치는 내용 안보여주기

 

boc-sizing:border-box 적용하면

모든박스에서 여백과 테두리 포함한 크기 계산 

                content-box 적용하면

박스의 크기 측정

 

다양한 셀렉터 

전체 셀렉터

*{ }

태그 셀렉터

div { }

ID 셀렉터

#id { } 

class 셀렉터

.class { }

속성 셀렉터

a[href]

특정 값을 가지는 속성 

p[id = "so"]

여러값을 가질때 특정값이 포함된 속성 

p[class~="so"] 

하이픈 적용 X 공백인정O

 

특정 값이 포함된 속성

p[class|="so"]

p[class~="so"]와 차이점 : 지정된값 이나 so-인 경우 적용 공백 인정X

 

특정 값으로 시작하는 속설

p[class^="so"]

 

특정 값으로 끝나는 속성

p[class$="so"]

 

특정 값의 일부가 일치하는 속성

p[class~="s"]

 

 

 

자식 셀렉터

첫번 째로 입력한 요소의 바로 아래 자식인 요소를 선택

header > span {}

후손 셀렉터

첫 번째로 입력한 요소의 후손을 선택

header p {}

 

형제 셀렉터 

같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 요소들 모두 선택

section ~ p{}

 

인접 형제 셀렉터

같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 요소 하나 선택

section + p{}

 

기타 설렉터

가상 클라스 셀렉터

a:link{} 방문하지 않은 a요소 선택

a:visited{} 방문한 a요소 선택

a:hover{} 마우스를 요소 위에 올렸을때 a요소 선택

a:active{} : 클릭된 상태 일때 a요소 선택

a:focus{} : 포커스가 들어와있을때 a요소 선택

 

UI 요소 상테 셀렉터

input:checked + span{} : 체크 상태일때 선택

input:enabled + span{} :사용 가능한 상태일때 선택

input:disabled + span{} : 사용불가능한 상태일때 선택

 

구조 가상 클래스 셀렉터

p:first-child{}

ul > li:last-child {}

ul > li:nth-child(2n){}

ul > li:nth-last-child(2n){}

ul:nth-of-type(2){}

p:ntn-last-of-type(1){}

 

부정 셀렉터

input:not([type="password"]){}

div:not(:nth-of-type(2)){}

 

정확성 확인 셀렉터

input[type="so"]:valid{}

input[type="so"]:invalid{}