1-3 CSS - FE
CSS의 구성
span{
color:red;
}
- span: selector (선택자)
- color: property
- red: value
CSS의 구성 요소
inline
internal
external
inline
- html 태그 안에 넣는 것
- 같은 속성 추가 시 다른 CSS 적용보다 최우선으로 적용
<p style="border:1px solid gray;color:red;font-size:2em;">
internal
- head안에 <style></style> 태그 넣는 방식
- 구조와 스타일이 섞이게 되므로 유지보수가 어렵다
- 별도의 CSS파일을 관리하지 않아도 되며 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>
external
- 외부파일(.css)로 지정하는 방식
- html파일 안에 CSS 파일 추가하는 방식
- CSS 코드가 짧지 않다면 이 방법으로 구현하는 것이 좋다
- 여러 개의 CSS 파일을 분리하고 이를 합쳐 서비스에 사용하기도 하낟
- internal 코드와 같은 css코드를 구현하고 style, css와 같은 별도 파일로 만든다
- 이후 아래처럼 link 태그로 추가하면 된다
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</div>
</body>
</html>
우선순위
- inline은 별도의 우선순위를 갖지만 internal과 external은 우선 순위가 동등하다
- 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다
javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요.
1. javascript의 getElementById() 등의 메소드를 이용하여 css를 수정할 수 있습니다.
구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.
2. internal, external 모두 사용하고 있습니다.
상속의 우선순위 결정
- 상위에서 적용한 스타일은 하위에서도 반영된다
- 이로 인해 여러 단계로 중첩된 element마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다
<!DOCTYPE html>
<html>
<head>
<style>
div{
color:green;
}</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div><span>my text is upper!</span>
<ul>
<li><span>my text is dummy</span>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
molestiae in architeco non quos aperiam , incidunt.
Ex sequi ullam, culpa explicabo fecere
modi ad fugiat ipsa cupidiate provident , a, expedita!</p>
</div></li>
</ul></div>
</body>
</html>
Cascading
- CSS는 여러 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다
선언 방식에 따른 차이
inline>internal (head태그 사이)>external 순으로 먼저 적용
span{
color:red;
}
span{
color:blue;
}
동일하면 나중의 것이 적용됨
body<span {
color:red;
}
span{
color:blue;
}
더 구체적으로 표현된 것이 적용됨
<div id="a" class="b">
text....
</div>
#a {
color:red;
}
.b {
clolor:blue;
}
div{
color:green;
}
id값이 우선됨
id>class>element
google search
-> CSS specificity
class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요? id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다.
CSS selector
- HTML의 요소를 tag,id,html 태그 속성 등을 통해 쉽게 찾아주는 방법
- tree 구조로 되어 있는 데이터를 빠르게 찾아가는 방법
-태그 : 부모 자식 관계로 되어 있
element에 style 지정을 위한 3가지 기본 선택자
-tag로 지정하기
span{
color:red;
}
- id로 지정하기
#spantag{
color:red;
}
- class로 지정하기
.spanclass{
color:red;
}
CSS Selector의 다양한 활용
- id, class 요소 선택자와 함께 활용
#myid {color:red}
div.myclassname{color.red}
span#myspan
<<span인데 아이디가 myspan인 요소들 선택
- 그룹 선택 해야 한다면 (여러 개 셀렉터에 같은 style 적용해야한다면)
h1, span, div{color:red;}
- 하위 요소 선택(공백)
#jisu span {color:red;}
- 자식 선택 (>)
#jisu>span {color:red}
- n번째 자식 요소를 선택
#jisu>p:nth-child(2) {color:red}
id가 지수인 태그의 자식 태그 들 중 n번째 자식 태그가 p이면 색상 변경
#jisu>p:nth-of-type(2) {color:red}
id가 지수인 태그의 자식 태그들 중 n번째 p태그의 색상을 red로 변경
- 자식 선택: 자식은 바로 하위 엘리먼트를 가리킨다
pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
nth-child: 유형과 관계 없이 n번째를 선택
nth-of-type: 특정 유형부터 n 카운팅
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소