-
css
웹페이지를 꾸며주는 언어
html은 정보를 전념하게하고 css는 디자인을 전념함
기본형식
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> li{ <!--모든 li에 red칼러를 주겠다--> color:red; } </style> </head> <body> <li>안녕하세요</li> </body> </html>id를 사용하여 css를 html에 삽입
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #select{ color:red; } </style> </head> <body> <li id="select">안녕하세요</li> </body> </html>select라는 id를 선언하고 color:red를 설정하였다.
body에서 이 id를 호출하면 red color가 적용된다.
부모 자식 선택자
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #select>li{ color:red; } </style> </head> <body> <ol id="select"> <li>one</li> <li>two</li> </ol> <li>three</li> <li>four</li> </body> </html>css부분을 해석해보자면 id select의 직계자손인 li만을 red color로 지정하겠다
따라서 ol태그에 포함된 li태그만 red color로 적용되고 li태그만 선언한 부분은 검정색으로 출력된다.
출력내용 가상 클래스 선택자
active
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> a:active{ color:red; } </style> </head> <body> <a href="https://ko.wikipedia.org/wiki/%EC%A0%9C%EC%9E%84%EC%8A%A4_%EA%B3%A0%EC%8A%AC%EB%A7%81">제임스 고슬링</a> </body> </html>제임스 고슬링 링크 클릭시 텍스트가 빨간색으로 변함
hover
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> a:hover{ color:red; } </style> </head> <body> <a href="https://ko.wikipedia.org/wiki/%EC%A0%9C%EC%9E%84%EC%8A%A4_%EA%B3%A0%EC%8A%AC%EB%A7%81">제임스 고슬링</a> </body> </html>제임스 고슬링 링크에 마우스를 올려두면 텍스트가 빨간색으로 변함
active와 hover을 동시에 적용했을때
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> a:active{ color:green; } a:hover{ color:red; } </style> </head> <body> <a href="https://ko.wikipedia.org/wiki/%EC%A0%9C%EC%9E%84%EC%8A%A4_%EA%B3%A0%EC%8A%AC%EB%A7%81">제임스 고슬링</a> </body> </html>style에 선언한 부분중 가장 뒷쪽에 선언한 부분이 적용이 되기때문에 hover이 적용되고 active는 적용되지않음
따라서 hover만 적용됨
link - 방문한 적이 없는 링크 설정
visited - 방문한 적이 있는 링크 설정
'css' 카테고리의 다른 글
width,height,vw,vh (0) 2021.06.06 css border (0) 2021.06.06 인라인,블록 (0) 2021.06.06 css 구글폰트 사용 (0) 2021.06.05 css 캐스케이딩 우선순위 (0) 2021.06.05