반응형

a 태그의 링크중 선택안되었던것은 파란색 선택된것은 보라색 으로 된걸 본적있을것이다.

이렇게 마우스의 기능에 따라 css가 바뀌는걸 가상클래스 수도클래스 라고한다

​

a:active{ color : green; //마우스 클릭시 css 적용 } a:hover{ //롤오버 마우스 올려놨을시 css 적용 color : red; }

마우스로 클릭시 green 으로 바뀜

마우스를 올려놨을때 red로 바뀜

만약 이경우에 a태그에 마우스를 올려놓고 클릭하였을경우

green 으로 바뀌지 않음 , 이유는 클릭과 롤오버의 이벤트가 둘다 발생하였지만

css 는 나중에 설정한 값이 우선순위가 높기때문임 그래서

hover를 위로 배치 active를 아래로 배치해야한다

hover 기능은 여러가지 다른태그에도 사용 가능

​

a:visited{ //방문한 링크 css 적용 color : orange; }

방문한 링크는 orange 적용

visited는 보안상 문제때문에 안에 적용하는 속성값이 상당히 제한적이다

​

a:link{ color : black; }

a태그의 링크의 색깔은 black 으로 적용

​

​

a:focus{ color : white; }

a태그가 tab키 등으로 인하여 포커싱이 잡혓을경우 css가 적용된다.

focus css 같은경우엔 여러가지 이유로 인해서 css의 가장 말단에 넣는것이 좋다.

input:focus 도 같은효과


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - margin 겹침  (0) 2019.03.03
CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02
반응형

display 속성

​

1. block

Element 를 block 로 설정하면 그 줄에는 그 Element 말곤 존재할수없다



​

​

2. inline-block

높이 위치등을 설정하였을경우 그 속성의 값을 가지고 차례대로 나열된다



​

​

​

3. inline

높이 위치등이 설정된것을 다 무시하고 오로지 컨텐츠 내용 (텍스트) 로만 크기가 할당된다.



​

​

​

​

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ display: inline; }</style> </head> <body> <div style="width: 100px; height: 100px; background-color: red;">Display:inline width:100 height:100</div> <div style="width: 100px; height: 100px; background-color: green;">Display:inline width:100 height:100</div> <div style="width: 100px; height: 100px; background-color: blue;">Display:inline width:100 height:100</div> <!-- inline-inline width:100 height:100 --> // 이걸로 교체해가면서 테스트 <!-- inline width:100 height:100 --> </body> </html>

​






반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02
CSS - 애니메이션 @keyframes  (0) 2019.03.02
반응형

CSS 선택자

이건 JS 를 하는사람이라면 똑같아서

구지 안쓰려 햇지만 한번 써봅니다.

div { background-color : red; } // 태그 선택자 <div></div> .class { background-color : red; } // 클래스 선택자 <div class = 'class'></div> #id { background-color : red; } // ID 선택자 <div id = 'id'></div> //전체 선택자 *{background-color : red} // 모두 전체 선택 //하위선택 , 자식선택 , 다중선택 div,span { background-color : red; } // div , span 둘다 선택 div li { background-color : red; } // div 안에 있는 하위태그인 li 의 모든요소 div > li { background-color : red; } // div 안에 있는 바로 밑에있는 자식태그의 li만 선택 //형제선택 , 인접형제선택 div ~ span { background-color : red; } // div 선택자의 형제요소중 span 선택 //div 초과 span 미만 div + span { background-color : red; } // div 선택자의 형제요소 중 첫번쨰 span 선택 //속성 선택자 [attribute] // 속성을 가진 태그 모두선택 [attribute="value"] // 속성값이 value 인 태그 모두 선택 [attribute~="value"] // 속성값이 value 를 포함한 태그를 선택 //<h1 title="value xyz">Lorem</h1> (o) <h1 title="valuexyz">Lorem</h1> (x) [attribute|="value"] //속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다. //<h1 title="value xyz">Lorem</h1> (x) <h1 title="valuexyz">Lorem</h1> (o) [attribute^="value"] //속성의 값이 value로 시작하는 모든요소를 선택합니다. //<h1 title="value xyz">Lorem</h1> (o) <h1 title="valuexyz">Lorem</h1> (o) [attribute$="value"] // 속성의 값이 value로 끝나는 요소를 선택합니다. //<h1 title="xyz value">Lorem</h1> (o) <h1 title="xyzvalue">Lorem</h1> (o) [attribute*="value"] //속성의 값이 value를 포함한 요소를 선택합니다. //<h1 title="xyz value xxx">Lorem</h1> (o) <h1 title="xyzvaluexxx">Lorem</h1> (o) // 원하는 자식 선택 div:nth-child(5) // div의 5번쨰 자식 선택 (괄호안에 숫자) div:nth-child(5n) // div의 5의 배수들만 선택 div:nth-child(3n + 2) // 2번쨰 선택후 3의배수로 선택 //짝수, 홀수 선택 div:nth-child(odd) // 홀수 선택 div:nth-child(even) // 짝수 선택 //뒤에서부터 선택 div:nth-last-child(2) // 뒤에서 2번째자식 선택 나머진 동일 //nth-child 주의할것 nth-child는 엘리먼트의 자식들을 선택하는거다 예를들면 <ul> <div></div> // nth-child(1) <li>1</li> // nth-child(2) <li>2</li> // nth-child(3) <li>3</li> // nth-child(4) </ul> 요렇게 자식들이 태그의 상관없이 순서가 정해져있기 때문에 li태그중 젤 첫번쨰가아닌 각각의 노드들중의 숫자로 선택한다

​

CSS선택을 할수있는 재미난 게임

(움직이는 것들만 CSS로 셀렉터를 이용하여 선택해보자

http://flukeout.github.io/

저는 32탄까지 다꺳는데 재미있네요 제가 위에 써논걸로 전부꺨수 있으니 한번 해보세여


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02
CSS - 애니메이션 @keyframes  (0) 2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION)  (0) 2019.03.01
반응형

반응형 디자인을 만들기 위해서 쓴다

특정 페이지 크기 이상이되면 css를 동적으로 사용할수 있다.

<!DOCTYPE html> <html> <head> <title>Document</title> <style> @media (min-width: 600px) { /*페이지크기 600px이하 되면 아래 구문 수행*/ /* width < 600 */ /* 만약 @media (min-width: 600px) {*/ /*페이지크기 600px이상 되면 아래 구문 수행*/ /* width > 600 */ div { display: none; } } @media (max-width: 600px) and (min-width:400px){ // 이렇게하면 600이상 , 400 이하 일경우 아래 구문 수행 .maxdang{ display: none; } } .div{ width: 500px; height: 500px; background-color: pink; } </style> </head> <body> <div class="div"> 안녕 </div> </body> </html>

이렇게 동적으로 화면을 반응형으로 만들수 있는게 @media 미디어 쿼리이다

css의 조건문 같은느낌이다.

media 쿼리는 이것말고도 상당히 많은 부분을 할수있다

가령 print 할경우 @media print { } 로 써서 프린트할떄 필요없는부분을 display:none; 을 사용하여

바꿀수있다.

​

<meta name = "viewport" content="width=device-width, initial - scale=1.0">

미디어 쿼리로 반응형을 사용하엿을경우 모바일은 적용이 잘안되는모습을 볼수있는대 (크기가 다르기때문)

위와 같이 메타태그를 추가하면 모바일에서도 똑같이 작동된다.

​


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - 애니메이션 @keyframes  (0) 2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION)  (0) 2019.03.01
반응형

CSS 애니메이션은 자바스크립트로 표현하는 것보다 더 상세히 기술할수있는

용량을 줄이는 획기적인 방법이다.

transition 과 매우비슷 (사실 뭐가 다르냐)

​

선언은 @keyframes 이름 { } 으로 기술하며

0% 부터 100% 까지 %로 선택하여 기술할수있다

from { } to { }로 할 수 도 있다.

@keyframes fadeIn { from{ // 0% 일때의 상태 opacity : 0; //투명도 0일땐 완전한 투명이고 } to { //100% 일때의 상태 opacity : 1; // 투명도 1일땐 완전한 불투명 이다 } }

◎ animation 과 transform 예제

▼ 내용

abcd

<html> <head> <style> div{ height:200px; width:200px; background:blue; color:White; font-size: 39px; transition: all .5s ease-in-out; /*모든 속성에대해 장면전환 transition 적용*/ animation: rotate 3.0s ease-in-out infinite; /*infinite 는 애니메이션 무한반복 rotate 는 keyframe 이름 3초동안 div가 회전하면서 애니메이션 효과 무한 반복*/ } div:hover{ transform: rotate(5turn) scale(0.5,0.5); /*5번 회전 , 크기 1/2배로 줄임*/ background-color : red; color : green; } @keyframes rotate{ 0%{ transform:none; } 50%{ transform:rotate(5turn) scale(.5 , .5); color: red; font-size:20px; } 100%{ transform:none; } } </style> </head> <body> <body> <div>안녕</div> </body> </body> </html>



css 애니메이션 참조하면 좋은 블로그

https://brunch.co.kr/@99-life/3


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION)  (0) 2019.03.01

+ Recent posts

티스토리툴바