WEB1-HTML을 수강하고 CSS를 수강한다
HTML 태그로 웹페이지를 꾸밀 수 있다.
<font> 태그로 문자의 색을 바꿀 수 있다.
<font color="red">WEB</font>-> WEB의 글자색을 빨간색으로 변경
CSS 활용해서 웹페이지 꾸미기
<style> 태그
<style> 태그를 사용해 이 태그안에 작성된 코드는 CSS문법임을 알려준다
이 태그안에 있는 코드들은 CSS문법으로 작성한다.
<style>
a {
color:red;
text-decoration: none;
}
</style>
Selector a {
Declaration color : red;
} Property : Value
color:black;
- a 태그의 문자를 빨간색으로 변경
text-decoration: none;
- a 태그의 문자의 밑줄을 제거
HTML태그로 일일이 변경하는 것 보다, CSS를 활용해 변경하는 것이 훨씬 효율적
HTML로부터 디자인의 기능을 따로 뺀 것이 CSS
HTML속성 이용해 CSS활용하기
HTML의 속성을 이용해 CSS문법을 사용할 수 있다.
<li><a href="2.html" style="color:red">CSS</a></li>
HTML태그의 style속성을 이용해 CSS의 색만 빨간색으로 변경할 수 있다.
CSS 속성(Property)을 스스로 알아내기
제목(h1)의 크기를 변경하고, 가운데 정렬을 하고 싶을 때, 어떻게 해야 할까
아직 글자의 색을 변경하는 방법, 밑줄 제거 방법밖에 배우진 않았지만 인터넷검색을 통해 알아 낼 수 있다.
검색을 생활화 하자
h1 {
font-size:45px;
text-align: center;
}구글에 css text size property를 검색하니 크기를 설정하는 속성을 알 수 있었고,
css text center property를 검색하니 문단을 정렬하는 속성을 알 수 있었다.
모든 태그를 알고 있지 않아도 된다.
내가 무엇을 모르는 지를 알면 검색하면된다.
CSS 선택자(Selector)를 스스로 알아내기
클래스선택자, id선택자를 이용하기
<style>
a {
color:black;
text-decoration: none;
}
h1 {
font-size: 45px;
text-align: center;
}
#active {
color:red;
}
.saw {
color:gray;
}
</style>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
HTML태그의 클래스에 class속성, id속성을 넣어서 해당 속성이 적용된 글자를 바꿀 수 있다.
ex)
HTML의 class속성은 saw이다
style태그를 보면 '.saw'선택자로, class 속성이 saw인 태그의 색을 gray로 변경하는 코드를 작성했다.
CSS의 class속성은 saw, id속성은 active이다
style태그를 보면 '.saw'선택자로, class 속성이 saw인 CSS의 색을 gray로 변경할 것 같지만,
우선순위가 ID선택자가 더 높기 때문에, #active선택자로 인해 글자의 색이 red로 변경된다.
선택자 우선순위
태그 선택자 -> 클래스 선택자 -> ID선택자
인터넷에 css selector를 검색하면 더 다양한 선택자를 볼 수 있다.