1. <font> 활용 예시
<li><a href="1.html"><font color="red">HTML</font></a></li>
2. <style>
a{
color:black;
}
</style>
이 때 a는 selector,
{}부는 declaration,
color은 property,
black은 value
의 값이다.
head부에 이와 같은 css태그를 삽입하면 결과가 어떻게 될까?
일일이 font태그를 삽입하지 않아도 a태그(하이퍼링크를 제공하는)로 둘러싸인 모든 문자열을 검정색으로 바꿔준다.
style을 태그가 아닌 html의 속성으로 사용할 수도 있는데 이는 태그 안의 style부를 CSS의 문법으로 해석하도록 한다.
ex) <li><a href="2.html" style="color:red">CSS</a></li>
3. <text-decoration>을 통하여 문자열에 대한 밑줄 등의 속성을 지정할 수 있다
-style태그에 넣기
<style>
a{
color:black;
text-decoration: none;
}
</style>
-태그 안에 style속성으로 넣기
<li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>
<style>
h1{
font-size: 60px;
text-align: center;
}
</style>
<style>
a{
color: black;
text-decoration: none;
}
#active{
color: red;
}
.saw{
color: gray;
}
h1{
font-size: 60px;
text-align: center;
}
</style>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
선택자를 지정하여 style 조건을 부분적으로 줄 수 있다. 이 때 우선순위는 id>class>elements 순이며 우선순위가 같을 경우 뒤에 나오는 코드에 영향을 받게 된다.
또한 class와 elements는 같은 것을 여러개를 만들 수 있는 반면 id는 한번 사용해야 되므로 더 구체성을 가진다.
h1, h2, h3, h4, h5, h6 { color: yellow; }
선택자는 위와 같이 여러개를 쉼표로 묶어 한번에 정의할 수도 있고
* { color: yellow; }
이와 같이 *를 통하여 모든 선택자를 지정할 수도 있다
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
이런식으로 <p> 태그의 bar 클래스, foo 클래스의 bar 클래스,
foo id의 bar 클래스 등 선택자의 조합으로 구체적인 속성을 매길 수 있다.
또한 대괄호를 통해 class 전체, id 전체를 묶어 속성을 매길 수도 있다.
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
위는 p.foo, p#title과 같은 역할을 하지만 더 명시적이다.
[class~="bar"] : class 속성의 값이
공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이
"bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이
"bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이
"bar" 문자가 포함되는 요소 선택
div span { color: red; }//div태그의 자손인 span에만 스타일 지정
부모 자식관계 까지 포함하는 관계로 자손 관계일 때 공백으로 표현 가능
div > h1 { color: red; }//div태그의 자녀인 h1에만 스타일 지정
부모 자식관계일때만 사용
div + p { color: red; }//div 태그 옆 p 태그만 스타일 지정
같은 태그 안에 바로 인접하여 묶여있는 형제 선택자일때 +를 통하여 표현 가능
body > div table + ul { ... }//body의 자녀인 div 태그의 자손인 table에 인접한 ul태그에 스타일 지정
커서가 올라갔을 때, 혹은 링크의 경우 이미 접속한 링크일 때, 이렇게 조건에 따라 스타일을 다르게 주고 싶을 때 사용할 수 있다.
li:first-child { color: red; }
li:last-child { color: blue; }
리스트의 첫번째 값, 마지막 값에만 스타일 적용할 때
a:link { color: blue; }
a:visited { color: gray; }
a태그에서 링크의 접속 전과 접속을 이미 했을 때의 스타일을 다르게 줄 때
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }
:focus: 현재 입력 초점을 가진 요소에 적용
(tab으로 탐색하면서 지정됐을 때, 입력을 위해 폼 박스를 눌렀을 때)
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
(a태그 부를 눌렀을 때, submit을 누를 때 등 상황이 바뀌는 순간
<style>
p::before{content:"Everyone Besides"}
p::after{content:"but I couldn't stop"}
p::first-line{
color: aqua;
}
p::first-letter{
color:beige;
}
</style>
이와 같이 p태그에 대한 글자 추가 혹은 스타일 지정을
구체적으로 하기 위하여 p태그 내부가 아닌 스타일을 사용
할 수 있다.
::before p태그의 앞부분에 문구 추가
::after 뒷부분에 문구 추가
::first-line 첫줄에 대한 스타일
::first-letter 첫 문자에 대한 스타일
앞서 선택자에 따른 우선순위는 id>class>element 순이라고 하였다
이는 4개의 숫자로 만드는 구체성으로 좀더 명료히 표현할 수 있다.
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
0, 0, 0, 0 : 전체 선택자 (*)
조합자는 구체성에 영향을 주지 않는다. (>, + 등)
ex)
h1 { ... } / 0,0,0,1
body h1 { ... } / 0,0,0,2
.grape { ... } / 0,0,1,0
.bright { ... } / 0,0,1,0
p.bright em.dark { ... } / 0,0,2,2
#page { ... } / 0,1,0,0
div#page { ... } / 0,1,0,1
하지만 구체성을 무시하고 최우선순위로 스타일을 지정하고 싶다면
p#page { color: red !important; }와 같이 지정해주면 된다.
또한
<h1 id="page">Hello, <em>CSS</em></h1>
와 같이
h1태그 안 page id안에 상속되어있는 em태그의 경우에는
똑같이 0,1,0,1의 구체성을 가지지 못한다.
이부분에 대하여
* { color: red; }
h1#page { color: gray; }
의 스타일을 줄 경우 구체성을 가지지 못하는 em태그 부는 red색이 된다.
몇번 째 자식을 지칭할 때 사용하는 선택자
nth-child(1,2,3,4,,,,,): 몇번 째 자식인지 구체적으로 지칭
nth-child(odd, even): 홀수, 혹은 짝수번째 자식 지칭
nth-child(5n, n+2,-n+3): n이 0부터 증가하는 정수라고 보고 5의 배수, 2번째부터, 첫 3개 요소
등을 지칭
nth-child(n): 자식 모두 지칭
<style>
/*
block level element
*/
h1{
border-width: 5px;
border-color: red;
border-style: solid;
/*display: inline;*/
display: none;
}
a{
border-width: 5px;
border-color: red;
border-style: solid;
display: block;
}
</style>
h1,a 태그는 각기 차지하는 구역이 다르다. h1의 경우에는 사용 시 한줄을 모두 차지하도록 되어있으나 a는 그렇지 않다.
이처럼 태그 간에 구역이 다르고 이 구역을 이루는 선을 편집하는 것이 border이다.
display 속성을 통해 이러한 구역 자격을 다르게 지정해줄 수 있는데, inline와 같이 한줄을 차지하지 않도록, block와 같이 한줄을 차지하도록, none와 같이 표시되지 않도록 지정할 수 있다.
<style>
h1, a{
border: 5px solid red;
}
</style>
또한 위와 같이 스타일의 selector 여러개를 한번에 정의하고 border 속성도 간략히 할 수 있다.
박스로 둘러쌓인 CSS는 a태그에 속해있으나 display를 block으로 지정하면서 구획이 늘어났다.
<style>
h1{
border: 5px solid red;
padding:20px;
margin:20px;
width: 100px;
}
</style>
하나의 문자열(content)는 border이라는 구역 표시선 안의 범위로 둘러쌓여 있으며, 구역 안의 범위 padding, 구역 밖의 다른 border와의 간격을 margin을 통하여 설정할 수 있다.
Width로 구역의 폭을 정의할 수 있다
기본적으로 우리가 width, height을 조절하는 구역은 content구역이다.
하지만 box-sizing: border-box;을 추가할 경우 width, height로 border까지의 구역이 차지하는 값을 설정할 수 있다.
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 5px solid gray;
}
#griddd{
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
</head>
<body>
<div id="griddd">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
<span>NAVIGATION</span>
</body>
div,span 태그는 h1,h2등과 같이 텍스트의 의미적인 부분을 두지 않고 오로지 그 텍스트만을 있는 그대로 표현하기 위해 쓰이는 태그이며 div는 block레벨, span은 inline레벨이다.
이 div를 한정으로 id=griddd로 두고 이에 한정하여 display를 grid형식으로 바꾸어 grid-template-columns: 150px 1fr으로 지정하게 된다면 NAVIGATION과 ARTICLE이 화면크기를 줄이고 늘림에 따라 유동적으로 변화하도록 설정할 수 있다.
NAVIGATION은 150px의 구역 크기로 지정하고, ARTICLE은 나머지 공간인 ifr을 가지며 ARTICLE은 화면크기에 따라 변화한다
만약 NAVIGATION을 1fr, ARTICLE을 2fr으로 지정한다면 화면크기가 변화해도 1:2의 비율을 계속 유지하게 된다.
<div id="grid">
<ol>
<li><a href="1.html" >HTML</a></li>
<li><a href="2.html" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...
</div>
와 같이 div태그 안의 ol태그를 선별적으로 조건을 주고 싶을 때는
<style>
#grid ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 25px;
padding-right: 0px;
}
</style>
처럼 id tag를 연달아 작성하여 지정해 줄 수 있다.
<style>
div{
border:5px solid green;
font-size:60px
}
@media(min-width:800px){
div{
display:none
}
}
</style>
웹 실행창의 크기 변화에 따라 div태그 부를 다르게 만들 수 있는 반응형 웹을 만드는 방법이다.
@media()안에 실행창이 크기가 800px이 넘어갈 경우에 display를 안보이도록 한다.
위와 같은 스타일의 웹이 창의 크기를 줄였을 때 HTML 설명부가 ol밑으로 오도록 하고 싶고, border 선을 표시하지 않도록 만들어 보자.
<style>
@media(max-width:800px){
#grid{
display: block;
}
h1{
border-bottom: none;
}
#grid ol{
border-right: none;
}
}
</style>
위와 같이 @media 속성을 추가하여 grid id를 가지는 태그의 부분은 display를 block으로 하여 한 줄을 차지하도록 한다.
grid id를 가지는 태그의 ol태그가 800px이하의 창에서는 오른쪽 선이 표시되지 않도록,
WEB글씨 밑의 선도 표시되지 않도록 설정할 수 있다.
수많은 html 파일들이 같은 css 스타일을 적용한다면 일일이 파일에 같은 코드를 기술해줘야 할까? 또한 그 파일들의 스타일을 바꿀 때마다 모든 파일들을 일일이 수정해줘야 할까? 이는 link를 통한 중복 제거로 해결 가능하다.
a{
color: black;
text-decoration: none;
}
#active{
color: red;
}
h1{
font-size: 60px;
text-align: center;
border-bottom: 1px solid gray;
padding: 20px;
margin: 0;
}
#grid ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 25px;
padding-right: 0px;
}
body{
margin:0;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#article{
padding-left: 25px;
}
@media(max-width:800px){
#grid{
display: block;
}
h1{
border-bottom: none;
}
#grid ol{
border-right: none;
}
}
우리가 지금까지 작성한 style 태그 안의 내용을 style.css와 같이 css 파일로 따로 저장한다음 필요한 html 파일마다 이를 적용해 줄 수 있다.
<link rel="stylesheet" href="style.css">
link 태그를 통하여 html 파일 안에서 css 파일을 불러와 스타일을 적용해주면 코드도 명료해지고 중복적인 작업을 줄여줄 수 있다.