css 8-5부터

 

layout!!!!하려면 이거 잘 알아야한다

위치 지정 position

원하는 위치에 갖다 놓는다 x,y좌표

- absolute

절대 좌표 체계를 이용하자 -> 부모좌표기준이므로 body기준

부모가 relative여야한다 부모를 기준으로 하기 때문에

x,y  = left,top

브라우저의 좌측상단이 0,0이다.

 

static 문서의흐름에 맞춰

의미x 생략가능

relative 위치값을 지정할 수있는 static

left,top을 지정하지 않으면 static과 동일

내앞에 있는 애를기준으로 한다.

fixed 브라우저 창을 기준으로 위치를 지정해 배치한다

브라우저창에 완전히 고정

 

backgroud-clip

 

border-box : 가장 외곽테두리까지

 

background-image

이미지를 크기에 맞춰 바둑판형태로 반복해서 쓴다.

 

background-repeat

배경이미지를 반복하지 않고 싶을때 사용한다.

 

background-position

이미지의 위치를 지정한다

 

background-origin

 

background-attachment

화면상에 고정

position과의 차이는 마우스클릭이벤트를 attachment는 받을 수 없다는 거

 

background-size

이미지의 크기를 조절

 

 

그라데이션

background : linear-gradient(to right bottom, blue, white);

중심색깔 파랑에서 흰색으로 오른쪽 아래로 가면서 그라데이션

 

 

css 고급선택자

부모요소 > 자식요소

바로 아래의 자식요소를 가리킬때 사용한다

하나만 선택한다

 

인접형제 선택자

형제요소 + 형제요소

h1+p  h1의 형제요소인 첫번째 p를 선택한다. p만가져옴

 

형제 선택자

요소1  ~ 요소2

h1~p h1의 형제요소인 모든 p를 가져온다 h1과 p형제 둘다 가져옴

 

id값이나 클래스값으로 찾아가는 것이 더빠르다

그러니 태그를 쓸때 정확하고 속도가 빠르게 하려면 이러한 값을 섞어쓰는게 좋다

id값은 유일하고 class값은 여러개가 같아도 된다

 

속성을 가지고 접근

a[href]

태그명[속성이름]

속성에 특정 값이 있는 요소 접근

a[target = "_blank"]

 

여러값중에 특정 속성값이 포함된 속성요소를 선택하는 선택자

[class ~= "button"]

속성값에 button이 포함되어있는애들 가져옴 -> java의 contains랑 indexof와 같다

 

특정 속성값이 포함된 속성 요소를 선택하는 선택자

[title |= "us"]

us-로 시작하거나 us인  애들을 가져옴 -> java의 startwidth와 같다.

 

특정 속성값으로 시작하는 속성요소를 선택하는 선택자

[title ^= eng]

eng로 시작 하는 애들을 가져옴

 

특정 값으로 끝나는 속성요소를 선택하는 선택자

[href $= xls]

대충 파일의 이름을 갖고 찾아을 때 씀

 

특정요소가 포함되어있는 속성요소를 선택하는 선택자

[href *=w3]

값 안에 포함되어있기만하면 골라옴

 

가상 클래스

 

: enabled :disabled

사용가능 불가능 상태 지정

 

:checked

선택된것에 대한 지정

 

:not

특정요소를 제외하고

 

구조 가상클래스

 

nth-child(n) - > 특정태그에 상관없이 자식태그에 관해서

n번째의 자식에게 지정

 

태그:nth-of-type(n) ->특정태그에 대해서 자식태그의 n번째 자식에게 지정

rk

 

 

가상요소

::before

해당 컨텐츠의 내용의 앞에 새로운내용을 추가할수 있다

::after

해당 컨텐츠의 내용의 뒤에 새로운내용을 추가할수 있다

 

transform

translate()

해당 요소가 지정한 크기만큼 이동한다

scale()

해당요소가 크기가 커진다

rotate()

각도를 설정해서 시계방향 회전, 음수면 반시계방향 회전

skew()

비틀기를 사용하는 함수

 

트랜지션

transition-property

뭘대상으로 진행

transition-duration

진행시간과 지연시간

transition-timing-function

실행시간

transition-delay

지연시간

transition

 

 

 

반응형 웹과 미디어 쿼리

반응형 웹

하나의 사이트를제작해서 웹과 모바일에서 이용가능하게 한다.

 

뷰포트 

pc화면과 모바일 기기의 픽셀차이로 인해 크기가 작아지는데 접속기기의 화면에 맞춰 확대하거나 축소해서 스마트폰화면에서 실제 내용이 표시되는 영역이다.

 

user-salable = yes 손으로 확대축소 가능

 

vw: 1vw는 뷰포트의 너비의 1%와 같습니다.