HTML로 웹을 만든 사람들은 웹페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠짐.
⚡️팁)
html 주석 만들기:
CSS 주석 만들기:
/**
1. style 태그 사용
CSS는 HTML과는 다른 언어이므로
'코드를 html이 아니라 CSS문법에 따라 해석해야 돼!
라고 html 언어로 알려주어야 함.
<style></style>
이라는 태그 안에 작성함.
<style>
a {
color:red;
}
</style>라고 하면 모든 a(링크달린 글자)에 대해서 글자를 빨간색으로 바꿔준다.여기서
a {} 를 선택자(Selector)라고 부른다.
괄호안의 효과는 (Declaration)이라고 함.
color는 속성(property)
red는 값(value)
물론 이렇게 기존 코드에 일일히 <font color="red">를 달아줄 수도 있다.
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">Javascript</font></a></li>
</ol>하지만 목차가 1억개라면? 1억개 전부 다 빨간색으로 바꿔야 한다면?
😳🥵 초난감쓰;;
CSS를 사용하면 a{color:red}; 라는 단 한줄의 코드로 순식간에 100개든 1억개든 색깔 변경 가능!
한 가지 장점 더!
2. style 속성 사용
혹은 이렇게 선택자 없이도 글씨색을 바꿀 수 있다.
<li><a href="2.html" style="color:red">CSS</a></li>style이라는 html 속성을 사용하면, 그 속성의 값을 웹브라우저는 css의 문법에 따라 해석함. -> style 속성이 위치한 태그에 적용함.
즉, html 속성을 사용하면 그 값으로 css효과가 들어오는 것이다.
<a 태그에 밑줄 없애기>
<style>
a {
color:black;
text-decoration: none;
}
</style>이렇게 declaration에 추가하면 된다.
혹은 세미콜론으로 구분하면 효과들을 한 줄에 적는 것도 가능!
<style>
a {
color:black;text-decoration: none;
}
</style>
이제 밑줄이 다 없어졌다. 근데 만약 CSS 한줄에만 밑줄을 긋고 싶다면?
<li><a href="2.html"
style="color:red;text-decoration:underline">CSS</a></li>이렇게 style 속성 뒤에 추가해주면 된다.
그러면 짜잔! CSS에만 밑줄이 그어진다.
위에서 다룬 a{color:red}뿐만 아니라, 다양한 선택자와 속성을 검색을 통해 찾아보면서 웹을 디자인할 수 있게 된다!
제목이 있는 h1에 대해서 폰트 크기 조절, 가운데 정렬 하려면??
<style>
a {
color:black;
text-decoration: none;
}
h1 {
font-size: 67px;
text-align: center;
}
</style>이렇게 하면된다 마찬가지로 <style></style>안에!
<class 지정하기>
만약 1.HTML과 2.CSS만 회색으로 바꾸고 싶다면? style속성을 사용하여 color:gray로 바꿔도 되겠지만, 다음과 같이 class를 지정하면 일일히 바꿔야 하는 중복 문제를 해결할 수 있다. 그리고 반드쉬 반드쉬 saw앞에 .을 붙여야 한다.
.의 의미? class가 saw인 선택자를 가리킴.
<style>
.saw {
color:gray;
}
</style>
~
~
(중략)
~
~
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>이렇게 클래스를 지정해서 class로 지정한 것들의 속성만을 바꿀 수도 있다.
위의 코드를 적용하면 HTML과 CSS만 글자색이 회색으로 바뀐다. 만약 현재 보고 있는 CSS라는 항목을 빨간색으로 바꾸려면? style 안에 active 속성을 적용하면 된다.
<style>
.saw {
color:gray;
}
.active {
color:red;
}
</style>
~
~
(중략)
~
~
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
요렇게 된다.
그런데 주목할 점은 CSS라는 항목은 saw와 active 둘 다의 명령을 받았는데 회색이 아니라 빨간색이냐? 그건 나중에 명령한 선택자의 말을 듣기 때문이지 ! 만약 둘의 순서를 바꾸면 saw가 active보다 뒤에 오기 때문에 회색이 된다.
웹페이지에서 id값(유일무이한, 중복되면 안되는 값)이 active인 태그를 선택하려면?
<style>
#active {
color:red;
}
.saw {
color:gray;
}
</style>
~
~
(중략)
~
~
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>이렇게 하면 saw가 active보다 나중에 오더라도 색깔은 red가 된다!
한 가지 더. 클래스 선택자와 태그 선택자가 붙으면 클래스 선택자가 이긴다!
<style>
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size: 67px;
text-align: center;
}
</style>예를 들어보자. 이렇게 지정하면 글자색은 black이 될까? No. 블랙이 아니라 회색이 된다. .saw가 a를 이기기 때문이지.
힘쎈 순으로 나열하면
id선택자> class선택자 > 태그 선택자여기까지 하면 selector를 검색해서 적용이 가능해진 단계가 된다!
