CSS [디자인을 위한 코드](1)
- 프로그래밍/웹사이트
- 2019. 8. 3.
CSS [디자인을 위한 코드]
오늘은 css로
- 지금은 사용하지 않는 태그
- 디자인을 위한 코드 CSS(1)
1. 지금은 사용하지 않는 태그
<font>태그 사용하기
<font color="색깔">내용</font>이런식으로 사용해 볼게요.
(ex) <font color="red">내용</font>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
</head>
<body>
<h1>web</h1>
<ul>
<li><a href="" target="_blank" title="게으른 주인장"><font color="red">1. 홈</font></a></li>
<li><a href="" target="_blank" title="c언어"><font color="red">2. c언어</font></a></li>
<li><a href="" target="_blank" title="파이썬"><font color="red">3. 파이썬</font></a></li>
<li><a href="" target="_blank" title="java"><font color="red">4. java</font></a></li>
<li><a href="" target="_blank" title="html"><font color="red">5. html</font></a></li>
</ul>
<p>본문<br><img src="사진2.png"></p>
</body>
</html>이걸 크롬으로 실행해보면 아래 사진처럼 빨간 색깔이 적용됩니다.
이렇게 적은 수라면 일일이 적용해줘도 상관없습니다.
하지만 만약 색을 바꿔줘야 하는 항목이 매우 많다면?
이런 방식으로는 모두 색깔을 바꿔주기는 힘들겁니다.
하지만 css를 사용한다면 이것이 가능합니다.
2. 디자인을 위한 코드 CSS
css는 html과 같은 언어가 아닙니다.(css는 디자인을 위한 언어)
그러므로 웹브라우저에게 css코드를 css문법에 따라 해석해야 한다고 html문법으로 알려줘야 합니다.
<style></style> 이 태그가 위의 역할을 하는 태그입니다.
<style>==html문법, 이 태그 안쪽에 있는 문법은 css문법으로 해석하라는 말과 같습니다.
그럼 css를 이용해서 위와 똑같은 효과가 생기도록 바꿔보겠습니다.
<head>태그 안에 style태그를 만들고 style태그 안에 a{color:red; text-decoration-line:none;}를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
a{
color:red;
text-decoration-line: none;
}
</style>
</head>
<body>
<h1>web</h1>
<ul>
<li><a href="" target="_blank" title="게으른 주인장">1. 홈</a></li>
<li><a href="" target="_blank" title="c언어">2. c언어</a></li>
<li><a href="" target="_blank" title="파이썬">3. 파이썬</a></li>
<li><a href="" target="_blank" title="java">4. java</a></li>
<li><a href="" target="_blank" title="html">5. html</a></li>
</ul>
<p>본문<br><img src="사진2.png"></p>
</body>
</html>색깔은 위와 똑같이 빨간색이고 밑줄도 사라진 것을 확인할 수 있습니다.
위의 코드는 모든 a태그의 색깔을 빨간색으로 바꾸고 밑줄을 제거하라고 한 것이기 때문입니다.
추가
<style>태그 안에 font-size:45px;을 입력하면 글자의 크기가 45px의 크기가 됩니다.
text-align:center;를 입력하면 글자가 가운데로 정렬됩니다.
2-1 속성을 사용한 CSS
style속성을 사용한 css 적용.
위에서 태그를 사용한 css는 선택을 해서 사용할 수 없다.
하지만 속성을 사용한다면 원하는 곳에 css를 적용할 수 있다.
(ex) syle="내용"을 추가한다. (아래 코드 참고)
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
a{
color:red;
text-decoration: none;
}
</style>
</head>
<body>
<h1>web</h1>
<ul>
<li><a href="" target="_blank" title="게으른 주인장">1. 홈</a></li>
<li><a href="" target="_blank" title="c언어">2. c언어</a></li>
<li><a href="" target="_blank" title="파이썬" style="color:blue;">3. 파이썬</a></li>
<li><a href="" target="_blank" title="java">4. java</a></li>
<li><a href="" target="_blank" title="html" style="color:blue;text-decoration:underline">5. html</a></li>
</ul>
<p>본문<br><img src="사진2.png"></p>
</body>
</html>크롬으로 열어보겠습니다.
속성으로 css를 추가해서 제가 원하는 부분의 색깔만 파란색으로 바꿨습니다.
또 원하는 부분에 밑줄이 생겼습니다.
<style>
selector--> a{
declaration--> color:red;
property value--> }
<style>
2-2 class 라는 속성주기
class 속성을 이용해서 원하는 태그에만 css를 적용할 수 있습니다.
위의 속성을 사용한 css에서 원하는 태그에만 style 속성을 추가해서 색깔을 추가했는데 그 부분을 지우고 class속성을 추가해주겠습니다. class="one"을 추가해줬습니다.
그 후 style태그에 .class이름{적용할 내용}을 적어주었습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
a{
color:black;
text-decoration: none;
}
.one{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>web</h1>
<ul>
<li><a href="" target="_blank" title="게으른 주인장">1. 홈</a></li>
<li><a href="" target="_blank" title="c언어">2. c언어</a></li>
<li><a href="" target="_blank" title="파이썬" class="one">3. 파이썬</a></li>
<li><a href="" target="_blank" title="java">4. java</a></li>
<li><a href="" target="_blank" title="html"class="one" >5. html</a></li>
</ul>
<p>본문<br><img src="사진2.png"></p>
</body>
</html>이렇게 class속성을 주어서 원하는 태그에만 css를 적용할 수도 있습니다.
하지만 이 class 선택자가 두개인경우에는 어떻게 될까요?
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
.one{
color:blue;
text-decoration:underline;
}
.two{
color:red;
text-decoration:none;
}
</style>
</head>
<body>
<li><a href="" target="_blank" title="html"class="one two" >5. html</a></li>
</body>
</html>이 코드를 실행했을 때는 아래있는 class="two"가 적용됩니다.
이번에는 style태그에서 .one과 .two의 위치를 바꿔보겠습니다.(선택자의 위치 변경)
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
.two{
color:red;
text-decoration:none;
}
.one{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<li><a href="" target="_blank" title="html"class="one two" >5. html</a></li>
</body>
</html>이걸 열어보면 one의 내용이 적용되는 것을 확인할 수 있습니다.
즉 더 아래 있는 내용이 적용되는 것입니다.
2-3 id선택자
id선택자는 class선택자보다 우선순위가 높습니다.
원하는 태그에 id의 값을 넣어주고 style태그에 #id선택자 이름{css내용}을 넣어주면 됩니다.
(아래 코드 참고하세요.)
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="code.ico">
<title>타이틀입니다.</title>
<meta charset="utf-8">
<style>
#two{
color:red;
text-decoration:none;
}
.one{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<li><a href="" target="_blank" title="html"class="one" id="two" >5. html</a></li>
</body>
</html>파일을 열어보면 id선택자가 class선택자보다 위에 있지만 우선순위가 높은 id선택자의 css가 적용됩니다.
우선순위 =(구체적)id 선택자>class선택자>태그 선택자(포괄적) 순서입니다.