css는 무엇일까?
CSS는 html문서 내의 요소들의 스타일을 변경해줍니다.
p {
color: red;
font-size: 20px;
}css의 기본 선언 형태는 위와 같은 모습을 하고 있습니다.선택자(Selector):p선언 블록(Declation Block):{}선언(declations):속성(Properties) - color, font-size과값: red, 20px- 스타일을 입혀 주기 위해서는 무엇을 어떻게 변경시켜 줄 것인지를 알아야 합니다. 해당 요소를 지정하기 위해 선택자를 이용하고, 선언 블록 내에 속성과 값을 통해 변경하고자 하는 스타일을 지정해줍니다.
css 적용방법
<html>
<head>
<link rel="stylesheet" href="style/main.css" />
</head>
</html>- 별도의 css파일을 생성하여 외부 리소스를 연결할 수 있습니다.
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
</html><head>내의 자식 요소로<style>내에 선언할 수 있습니다.
<html>
<head>
</head>
<body>
<p style="color: red">안녕하세요</p>
</body>
</html>- 해당 요소의
style속성에 직접 선언할 수 있습니다. 하지만, 인라인 스타일은 디버깅이 힘들고, 재사용이 힘들기 때문에 지양하는 것이 좋습니다.
캐스캐이딩 원칙
css의 원래 단어는Cascading Style Sheet입니다.Cascading은 폭포수처럼 단계별로 흐르는 것을 의미합니다. 그러한 특성은css가 부모요소의 스타일을 자식 요소가 그대로 상속받는 특성으로 이어집니다.
<html>
<head>
<style>
div {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>안녕하세요</p>
</div>
</body>
</html>- 위의 코드는 부모 요소인
<div>와 자식 요소인<p>둘 다 스타일이 지정되어 있습니다. 이런 상황에서는 적용 범위가 작은 자식 요소의 스타일을 사용하게 됩니다. tag < class < id < inline- 외부 파일은 아래에 있는 파일이 우선적으로 사용되게 됩니다.
선택자(Selector)
위의 예시에서는 모두 선택자로 태그의 이름을 사용했습니다. 지금부터는 다양한 방법으로 조금 더 구체적이고 편한 방법으로 해당 요소를 선택할 수 있게하는 선택자에 대해 알아보겠습니다.
class, id
<div class="cities">
<span id="capital">서울</span>
<span>부산</span>
</div>.cities {
color: red;
}
#capital {
color: blue;
}
class와id의 속성값으로 해당 요소를 선택할 수 있습니다.class는 이름 앞에.을 붙이고,id는 앞에#을 붙입니다.id가class보다 우선 순위에 있기 때문에, 두<span>모두cities에 속하지만,서울은id값인capital의 스타일이 적용됩니다.
attribute
<div>
<span title="capital">서울</span>
<span title="ocean">부산</span>
<span>인천</span>
</div>span[title] {
color: blue;
}
span[title=ocean] {
color: green;
}
[]안에 속성명만을 넣으면 해당 속성이 있는 모든 요소들을 말하고,[속성명=속성값]의 형태로 특정 속성값도 선택할 수 있습니다.
<a href="http://google.co.kr">구글 1</a>
<a href="http://google.com">구글 2</a>
<a href="https://google.com">구글 3</a>
<a href="https://google.com/maps">구글 4</a>a[href*="google"] {
color: pink;
}
a[href^="http://"] {
color: red;
}
a[href$="maps"] {
color: green;
}
- 문자열 뒤에
$, ^, *을 덧붙여서 요소의 선택을 좀 더 상세히 설정할 수 있습니다. *를 붙이면 특정 문자열이 포함된 모든 요소들을 선택합니다.^을 붙이면 특정 문자열로 시작하는 모든 요소들을 선택합니다.$를 붙이면 특정 문자열로 끝나는 모든 요소들을 선택합니다.
first-child, last-child, nth-child
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>li:first-child {
color: red;
}
li:nth-child(3) {
color: blue;
}
li:nth-child(2n) {
color: green;
}
li:last-child {
color: yellow;
}
first-child, last-child, nth-child은 선택자 옆에:과 함께 사용합니다.first-child는 말 그대로, 해당 선택자 중 첫 번째 요소로 사용된 것을 선택합니다. 그런데 1 번 요소 뿐만 아니라 4번li요소에도 선택자의 영향이 끼치는 것을 알 수 있는데,first-child는 첫 번째li요소를 선택하는 것이 아니라li요소이면서li요소의 부모 요소의 첫 번째 자식요소를 선택하기 때문입니다.last-child는 해당 선택자 중 마지막 요소를 선택합니다.nth-child는 뒤에()안에 원하는 숫자를 넣거나n과 함께 여러 숫자에 적용하는 것도 가능합니다.
first-of-type, last-of-type, nth-of-type
first-of-type, last-of-type, nth-of-type은first-child, last-child, nth-child와 매우 유사하지만 다른 점이 있기 때문에 사용할 때 유의해야 합니다.
<ul>
<p>0</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
- 위의 예시에서 첫 번째
<ul>의 자식 요소로<p>를 추가하고, 스타일은 그대로 적용했습니다. - 기존의
child와 같은 스타일이 적용된 것 처럼 보입니다. - 하지만, 새로 추가된
<p>태그에 기존의child스타일을 그대로 적용하면 아래와 같이 변합니다.
type은 선택자의 타입을 선택하고,child는 부모의 자식 요소를 선택하는 것을 알 수 있습니다.
not
<input type="text" />
<input type="password" />
<input type="number" /> input:not([type=password]) {
background-color: skyblue;
}
- 해당되지 않는 요소를 선택하는 선택자입니다.
link, visited
<a href="https://www.example.com">example</a>
<a href="https://www.google.com">구글</a>a:link {
color: green;
}
a:visited {
color: yellow;
}
link는<a>태그가 사이트에 방문하지 않은 경우에,visited는 방문한 경우에 적용됩니다.- 위의
구글은 방문한 적이 있기 때문에visited의 선택자의 영향을 받고 있습니다.
hover, active, focus
<input class="container" value="css에 대해 알아봅시다." />input.container:hover {
color: red;
}
input.container:active {
color: green;
}
input.container:focus {
color: blue;
}hover는 커서가 해당 요소 위에 위치하고 있으면 적용됩니다.active는 커서가 해당 요소를 클릭하고 있는 순간에 적용됩니다.focus는 커서가 해당 요소에 위치하고 있을 때 적용됩니다.
enabled, disabled, checked
<input type="text"/> <br/>
<input type="text" disabled /> <br />
<input type="radio" checked />
<input type="radio" />input:enabled {
background-color: yellow;
}
input:disabled {
background-color: green;
}
input[type=radio]:checked {
outline: 1px solid red;
}
enabled는disabled속성이 없는 요소에 적용됩니다.disabled는disabled속성이 있는 요소에만 적용됩니다.checked는<input>의 타입이radio인 경우에 선택한 요소에만 적용됩니다.
before, after
<p id="hello">반갑</p>
<p>습니다</p>p#hello:before {
content: '안녕하세요! '
}
before는 해당 요소의 앞에 생성되고,after는 해당 요소의 뒤에 생성됩니다.content라는 속성의 값이 화면에 보여집니다.
first-letter, first-line, selection
<p>abc def hijk lmp</p>
<p>adsfjlkl sdajklfajsdkl asdlkfjklasdj asdfjkldsafjkl asdjfkljdaskl dsaljfklsdj adsfjlksdjkl asdfjlkasdjlk adsflkjasdkl sdafjlkasdklj daslkfjasdlk;fjnczxmv,n m</p>p:first-letter {
color: red;
}
p:first-line {
color: green;
}
p::selection {
color: blue;
}
first-letter는 해당 요소의 첫 글자를,first-line은 해당 요소의 첫 줄을 선택합니다.selection은 커서가 드래그한 영역만큼이 선택됩니다.
선택자 결합 - 하위, 자식
<div class="division">
<span>111</span>
<span>222</span>
</div>
<div class="container">
<span>333</span>
<span>444</span>
</div>
<div class="division">
<span>555</span>
<span>666</span>
</div>span:first-of-type {
color: blue;
}
- 위와 같은 상황에서는 첫 번째
span으로 지정되는 모든 요소들이 선택됩니다. 그런데, 첫번째div내의 첫 번째span만을 선택하고 싶다면span자체에class를 추가할 수도 있지만, 그것보다는 기존의 코드를 활용하여class명이division인div의 하위 요소인 경우로 한정지을 수도 있습니다.
div.division > span:first-of-type {
color: blue;
}
형제 선택자
<ul>
<p>숫자들</p>
<li class="red">1</li>
<li class="green">2</li>
<li class="red">3</li>
<li class="blue">4</li>
</ul>p ~ li {
color: red;
}
p + li {
color: blue;
}
~을 사용하여 부모 요소가 같은 요소들 중 해당 요소보다 아래의 모든 요소들을 선택할 수 있습니다.+을 사용하여 바로 인접한 요소를 선택할 수 있습니다.
그룹화
<div>div</div>
<span>span</span>div, span {
color: yellow;
}
,로 선택하고자 하는 요소들을 나열하여 원하는 요소들을 묶을 수 있습니다.
initial, inherit, unset
css는 부모 요소의 스타일을 상속 받는데, 상속을 원하지 않는 경우가 있을 수 있습니다. 그런 경우, 원하는 속성값에initial을 추가하여 상속을 무효화 시킬 수 있습니다. 모든 속성을 무효화시키고 싶으면all이라고 하면 됩니다.- 부모로부터 상속받는 것보다 우선순위에 있는 선택자에 있지만, 부모로부터 상속을 그대로 받고 싶은 경우도 있습니다. 그럴 때는,
inherit속성을 사용하면 됩니다. unset은 기본적으로와 추가적으로 적용되어 있는css에 대해 초기화합니다.
자기개발 :)