강좌 : 유튜브 생활코딩
2. WEB2-CSS
- CSS와 HTML은 다르다
- HTML은 너무나 중요하기 때문에 HTML이 정보에 전념하게 하기 위해서 HTML로 부터 디자인에 대한 기능을 뺏어온 것이 CSS
- CSS를 통해 디자인하는 것이 HTML을 통해서 디자인하는 것보다 훨씬 효율적
✍Style 태그와 Style 속성
Style 태그
<style> </style>
- style 태그는 html문법이면서 동시에 이 사이에 있는것은 css라는 것을 알려주는 의미
- 고로 CSS언어를 사용할땐 이 사이에서 이용
이 웹페이지에 있는 모든 <a> 태그에 색상을 추가하고싶을때
<style>
a {
color:red;
}
</style>++ 태그안에 있는 속성값(property : value)을 누구에게 줄것인가 지정하는 것(a { })을 선택자(Selector)라고 하고, 속성값은 효과 또는 선언(declaration)이라고 한다
완성
<!doctype html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<style>
a {
color:red;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>안녕하세요</h2>
<P>
안녕하세요 이것은 메인페이지입니다.
</P>
</body>
</html>
++ <!-- 이사이에 쓰는것은 무시된다 -->
Style 속성
- 태그와는 다르게 원하는 태그에만 값을 추가할 수 있으므로 선택자가 필요x
style=" "속성을 사용하면 그 속성의 값을 웹브라우저는 css문법에 따라 해석
완성
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" style="color:red">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>✍CSS 기본 문법
밑줄
text-decoration: none;
text-decoration: underline;
++ 세미콜론(;) : 구분자
글자크기
font-size: 10%;
정렬
text-align: center;
색상변경
color:red;
✍선택자
- 이 웹페이지에 있는 모든
<a>태그에 색상을 추가하고, 원하는 태그에만 다른색상을 지정하고 싶을땐class="이름" (html 속성)을 원하는 태그에 추가하고<style>태그 안에 선택자를.이름라고 입력 태그 선택자보다class 선택자가 우선
++ class 안에는 여러개의 값이 들어갈 수 있고 띄어쓰기로 구분
- 여러개의 클래스를 만들고 선택자를 입력하면 프로그램은 위에서 밑으로 읽기때문에 나중에 써져있는 선택자가 적용
- 이것을 방지하기 위해선
id="이름"을 이용하면 순서상관없이class 선택자보다id 선택자가 우선 - id의 값은 하나만 사용할 수 있다
++ 선택자앞에 점(.)을 붙이는 이유는 우리가 원하는건 saw 태그가 아니라 class값이 saw인 태그이기 때문에
+++ 마찬가지로 id값이 active인 태그를 찾기 위해선 선택자 앞에 샾(#)을 입력
완성
<!doctype html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<style>
a {
color:black;
text-decoration: none;
}
#active{
color:red;
}
.saw{
color:gray;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw" id="active">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>안녕하세요</h2>
<P>
안녕하세요 이것은 메인페이지입니다.
</P>
</body>
</html>
코린이