안녕하세요 인포돈 입니다.
이전 시간까지 HTML 문법에 대해 알아보았습니다.
이번 시간에는 HTML과 상호보완적으로 많이 쓰이는 CSS에 대해서 알아보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>물론 HTML만으로도 홈페이지를 만들 수 있지만 저희는 좀 더 이쁘게 만들고 싶지 않으신가요???
그렇다면 CSS의 일부분을 배우면 저희가 보는 이런 웹사이트들처럼 저희도 엔지니어가 될 수 있습니다.
이전에 HTML 태그를 연습했던 1.html 파일로 그대로 연습해보셔도 되고, 새롭게 파일을 만들어서 진행하셔도 무방합니다
바로 본론으로 들어가 css에 대해서 알아보겠습니다.
HTML에서는 가운데 정렬, 배경 이미지 등 예쁘게 꾸미기 위해서 만들어진 게 CSS라는 문법입니다.
하나의 예시를 보여드리겠습니다.
<font color="red"> HTML </font>해당 코드는 css가 나오기 전에 많은 사람들이 이용했던 font태그입니다. 색갈이라는 속성에 red라는 값을 넣어주면 태그 사이에 있는 문자들이 빨간색으로 바뀌게 됩니다.
그러나 우리는 항상 극단적인 상황으로 생각해 볼 필요가 있습니다. 만약 html 같은 단어 및 문장이 1억 개라면???
이러한 문제점을 해결하기 위해서 저희는 css를 알아둬야 할 필요성이 있는 것이죠
*font태그는 현재 거의 쓰이지 않고 있습니다.
1. style 태그
그렇다면 'css는 어떻게 사용하는 것인가?'라는 의문이 드실 겁니다.
이번에는 이론보다는 바로 실전 코드를 보여주며 이해를 도와드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a {
color:red
}
</style>
</head>
<body>
<a href="링크 주소"> html </a>
</body>
</html>자 이제 앞서 예시를 들었던 코드의 문제점을 해결한 css코드입니다. 이전에 배웠던 !DOCTYPE html, head, body, html, a를 제외하면 남는 코드는 바로 아래 코드입니다.
<style>
a {
color:red;
}
</style><style>은 html의 기능인 태그 기능입니다. 그러나!! 여기서 주의해야 될 점이 있습니다. style태그의 기능은 태그 안에 있는 문장을 css문법으로 실행해라 라는 의미를 가지는 태그입니다.
이에 따라 안쪽에 쓰여 있는 a { color:red; }의 문장이 css코드인 겁니다. 즉, html과 css는 서로 상호보완적으로 사용됨을 느낄 수 있습니다.
이 코드를 해석해보면 "a태그로 감싸고 있는 문장의 색깔을 빨간색으로 변경하는 css코드"라고 해석해 볼 수 있습니다.
해당 코드를 잘 분석한다면 이제 저희는 css에 대해서도 검색을 통해서 많은 것들을 해결할 수 있습니다. 그러기 위해선 어떻게 검색해야 될지 막막하시죠? 그 해결책을 바로 풀어드리겠습니다!
자 여기 코드에서 a는 바로 선택자 Selector라고 부릅니다. color는 Property 속성이라고 불리고, red는 Value 즉, 값이라고 불립니다. 그렇다면 이제 저희가 원하는 것을 검색하기 위한 조건이 모두 만족됐다고 볼 수 있습니다.
밑줄을 그리고 싶다? 그러면 "css underline property" 정도로 검색하면 원하는 결과를 얻으실 수 있습니다.
이렇게 정확한 명칭과 쓰임세를 안다면 간단한 검색만으로도 저희는 원하는 코드를 얻을 수 있습니다!
결코 코딩이 어려운 것이 아닙니다! 모르는 게 당연하고요 모든 개발자들도 모든 속성, 태그를 알지 못합니다.
다만 많은 실전 경험으로 일반인보다 많은 태그와 속성을 아는 것뿐입니다. 이러한 차이를 급격히 줄일 수 있는 방법이 바로 정확한 명칭, 쓰임세를 알고 검색을 통해서 이러한 차이를 줄일 수 있습니다.
절대로 포기하지 말고 끝까지 도전해 봅시다.
2. id, class
다음으로 알아볼 것은 바로 class, id라는 속성을 알려드리겠습니다.
class와 id는 앞서 배운 style과 똑같이 html 속성이면서도 css문법으로 해석하라는 기능을 가지고 있습니다.
앞서 저희는 Selector 선택자를 배웠습니다.
그러만 수많은 a라는 선택자 중에 일부 선택자 a만 색깔을 빨간색에서 회색으로 바꾸고 싶어 할 수도 있습니다. 이럴 때 사용하는 것이 바로 class와 id라는 속성입니다.
아래 예제를 보면 id와 class의 사용법을 알 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a {
color:red;
}
.color1{
color:gray;
}
#color2{
color:blue;
}
</style>
</head>
<body>
<p><a href="링크 주소"> html </a></p>
<p><a href="링크 주소" class="color1"> css </a></p>
<p><a href="링크 주소" id="color2"> javascript </a></p>
<p><a href="링크 주소" class="color1" id="color2"> c++ </a></p>
</body>
</html>코드가 많아졌다고 두려워하지 말고 차근차근 알아보면 쉽습니다.
해당 결과는 어떻게 나올까요?
왜 이런 결과가 나오는지 벌써 아시는 분이 계신가요??
차근차근 하나씩 보면서 설명해 드리겠습니다. body부터 살펴보면, 첫 줄은 html은 앞서 배웠었던 부분처럼 선택자 a에 의해 빨간색으로 바뀌는 것을 알 수 있습니다.
두 번째 줄 css 줄에는 class="color1"이라는 속성이 생겼습니다. 같은 a선택자이자만 결과는 회색 즉, color1이라는 선택자의 코드를 실행한 것을 알 수 있습니다.
이것으로 저희는 일반적인 선택자 a 보다는 class속성으로 만들어지 color1이 더 우선순위가 있다는 것을 알 수 있습니다.
또한, class는 일반 a 선택자와 구분을 두기 위해 앞에. 을 붙이는 것을 알 수도 있습니다.
세 번째 줄에는 id="color2"라는 속성이 있습니다. 그렇다면 이 또한 a 선택 자보다 color2라는 선택자의 코드를 실행했으니 우선순 의가 id에 있다는 말임을 알 수 있습니다.
id의 경우 #으로 다른 선택자와는 구분을 하고 있다는 것도 알 수 있지요.
마지막 줄을 살펴보면 결과는 파란색!! 그렇다면 class보다 id에 우선순 의가 있다는 것을 알 수 있습니다.
*참고사항
- id에 경우 더 이상 해당 파일에서 color2라는 id를 또 사용할 수는 없습니다.
(주민등록번호라고 생각하시면 됩니다. 같은 주민번호가 있으면 혼란이 오겠죠?)
- 한 태그 안에 같은 class가 2개가 있을 경우 코드와 가까운 코드가 우선순위입니다.
<!DOCTYPE html>
<html>
<head>
<style>
a{
color:red;
}
.color1{
color:gray;
}
.color2{
color:blue;
}
</style>
</head>
<body>
<p><a href="링크 주소" class="color1 color2"> css </a></p>
</body>
</html>위 코드의 결과는 바로 파란색의 css 글씨가 보입니다.
보는 바와 같이 같은 class이지만 color2가 더 가까이 위치하기 때문입니다.
*class속성에 "color1 color2"라고 2개의 클래스를 지정할 수 있습니다. (띄어쓰기로 두 개를 구분하죠)
오늘은 css에서 선택자, 속성, 값이 무엇인지, class와 id가 무엇인지에 대해 알아보았습니다.
아직 이걸로 어떤 꾸미기가 가능하진 감이 안 오시는 게 당연합니다!!
걱정하지 마시고 다음 step을 밟으러 오시면 그 해답이 있습니다.
'토이 프로젝트 > HTML로만드는 홈페이지' 카테고리의 다른 글
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 6(CSS) (0) | 2021.03.05 |
|---|---|
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS) (0) | 2021.03.04 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성) (0) | 2021.03.02 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom) (0) | 2021.03.02 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 1(계획) (0) | 2021.02.16 |
