css

풀스택 개발자 2020. 6. 29. 18:08

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 - 방문한 적이 있는 링크 설정