HTML은 정보를 주는 문서였습니다.
제목, 글 등 우리가 원하는 내용들은 다 담을 수 있었지만,
글의 색을 바꿔주는 등의 꾸며주는 기능을 하는 태그는 거의 없었죠.
CSS는 그런 내용을 꾸며주는 기능을 가지고 있는 컴퓨터 언어입니다.
네이버라는 웹을 떠올려보자면,
네이버라는 글씨는 어떤 색으로 할지, 어디에 위치하게 할 지 등
꾸며주는 모든 것이 CSS와 관련이 깊습니다.
CSS를 사용하는 데는 3가지 방법이 있습니다.
style 속성을 이용하는 것과
style 태그를 만들어 이용하는 것,
그리고 마지막으로 새로 파일을 하나 만들어 이용하는 것이 있습니다.
1. style 속성 이용
꾸며주고 싶은 내용을 가진 태그에 style 속성을 넣어 이용하는 방법입니다.
우선 저는 폰트 색만 바꾸어 볼게요.!
<h1 style="color:aqua">우다다 코딩</h1>
aqua 색으로 변한 거 보이시죠?
더 나아가 색만 바꾸는 것이 아니라 비스듬하게 기울이는 기능도 넣고 싶다 하신다면,
;(세미콜론)을 color 끝나는 부분에 넣어 주시면 됩니다.
그러면 폰트의 색을 바꾼는 기능과 비스듬하게 기울이는 기능을 나누어 인식할 수 있어요.
<h1 style="color:aqua; font-style:italic;">우다다 코딩</h1>
2. style 태그 이용(선택자 이용하기)
이번에는 위의 내용을 style 태그를 통해 구현해볼 건데요:).
<head> 태그 안에 스타일 태그를 넣어
바꾸고 싶은 태그명을 적고 중괄호를 적은 뒤,
바꾸고 싶은 내용을 적으면 됩니다.
그리고 바꾸고 싶은 내용 뒤 ;(세미콜론)은 필수입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
color:aqua;
font-style:italic;
}
</style>
</head>
<body>
<h1>우다다 코딩</h1>
<h1>gogo</h1>
</body>
</html>
태그명으로 style에 넣어준 경우, 그 태그를 가진 모든 내용에 다 적용됩니다.
여러 태그에 동시에 넣어주고 싶을 때는 속성을 이용하는 것보다
이 방법이 훨씬 더 편하겠죠?
이때!!!
똑같은 h1이 있는데 '우다다 코딩'에는 color만,
'gogo'에는 font-style만 바꿔주고 싶으면 어떻게 해야 할까요?
이를 위해 우리는 html 태그의 id와 class 속성을 이용해줄 겁니다.
CSS 선택자라고도 하는데요.
말 그대로 특정 요소를 선택하여 스타일을 줄 수 있도록 해주는 것입니다.
여기서 특정 요소를 선택하게 해주는 것이 변수명으로 이루어지는데요.
여태 우리가 사용해봤었던 input의 type 속성 같은 아이들은
text, submit, password 등 정해진 변수들 중에 사용했어야 했습니다.
<input type="submit" value="이름을 바꾸어보자">
하지만 이번에 쓰일 id와 class의 경우 변수에 여러분이 원하는 대로 쓰실 수 있습니다.
id1,id2 부터해서 eunbi로 쓰셔도 아~~무 상관이 없어요.
<body>
<h1 id="id1" class="style_class">우다다 코딩</h1>
<h1 id="id2" class="style_class">gogo</h1>
</body>
이렇게 만든 변수를 가지고 <style> 태그에서 불러주시면 됩니다.
우선 id 속성의 경우 '#변수{}'라는 형태를 가지고 있습니다.
그리고 id 변수는 전체 코드에서 서로 중복되는 값을 가질 수 없습니다.
id1이라는 변수명을 사용했는데, 다음 코드에서 또 id1을 사용할 수는 없는 거죠.
우리가 어디 회원 가입할 때도 id는 중복되지 않는다고 하죠?
마찬가지라고 생각하며 외워주시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#id1{
color:aqua;
}
#id2{
font-style:italic;
}
</style>
</head>
<body>
<h1 id="id1">우다다 코딩</h1>
<h1 id="id2">gogo</h1>
</body>
</html>
Class 속성의 경우 '.변수{}'라는 형태를 가지고 있습니다.
그리고 변수는 전체 코드에서 서로 중복되는 값을 가질 수 있습니다.
class 1이라는 변수명을 사용했을 때, 다음 코드에서 또 class1을 사용할 수는 있는 거죠.
그래서 id는 특정 요소 하나에 변화를 주고 싶을 때,
class는 특정 요소의 묶음에 같은 변화를 주고 싶을 때 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.class1{
color:cadetblue;
}
</style>
</head>
<body>
<h1 id="id1" class="class1">우다다 코딩</h1>
<h1 id="id2" class="class1">gogo</h1>
</body>
</html>
그리고 class는 여러 개 변수를 동시에 가질 수도 있는데요.
변수명 뒤 한 칸 띄우고 다음 변수명을 입력하시면 됩니다.
<head>
<title>Document</title>
<style>
.class1{
color:cadetblue;
}
.class2{
color:red;
}
</style>
</head>
<body>
<h1 id="id1" class="class1 class2">우다다 코딩</h1>
<h1 id="id2" class="class1">gogo</h1>
</body>
어? 이때 class1 class2가 동시에 적었던 '우다다 코딩'은 class2만 적용된 것을 보실 수 있죠?
그 이유는 <style>태그에서 더 아래쪽에 있는 것이 우선순위가 되어 적용되기 때문입니다.
style 태그를 정리하다면,
선택자에는 총 세 가지 종류가 있다고 볼 수 있습니다.
id, class, 태그.
각 태그들의 특징은 위에서 살펴보았습니다.
자 그럼 여기서 세 개가 동시에 적용이 되면 어떻게 될 것인가??
선택자 우선순위를 따르게 됩니다.
id 속성이 가장 우선순위가 높고, 그다음이 class, 그 다음이 태그 선택자입니다.
그리고 같은 선택자 내에서는 더 밑에 있는 것이 더 우선순위가 되어 적용됩니다.
이 우선순위 관련해서는 달달 외우실 필요는 전혀 없습니다.
논리적으로 접근해보면 됩니다.
id는 단 하나만 올 수 있기 때문에 class 보다 조금 더 구체적이죠?
그리고 특정 요소에 class를 주는 것이 태그 선택자보다 조금 더 구체적이고요.
즉, '조금 더 구체적인 부분에 우선순위를 두었다'라고 생각하시면 됩니다.
2-1. css 파일 분리하기
css를 적용하는 여러 방법 중 마지막입니다.
css 내용을 html 파일에서 분리시키는 건데요.
분리시킨다는 점에서는 다르지만, id, class, 태그에 적용하는 방법 자체는 2와 똑같기 때문에
2-1이라고 표현했습니다.
그렇다면 왜 분리시켜야 하는지 궁금하실 수 있을 텐데요!
지금 저희가 하는 코드들은 길이가 길지도 않고 짧기 때문에
같이 해도 상관이 없습니다.
하지만 나중에 코드가 길어지고
코드가 1-2만 줄이 되었을 때 style도 길게 되면 보기에 엄청 복잡하겠죠?
또 여러 html 파일이 있을 때 공통적인 css를 사용해야 될 때 중복 코드를 제거할 수 있기 때문에
파일을 분리하는 것은 필요합니다.
우선 '.css'를 붙여 css 파일을 만들어줍니다.
그다음 style 태그에 있는 코드를 복사하여 css 파일에 붙여줍니다.
그다음에 <head> 태그 안에 있던 <style> 태그 내용들은 다 지운 후
<link rel="stylesheet" href="경로.css" type="text/css">요 아이를 넣어주면 됩니다.
href에 .css가 있는 경로를 써주면 잘 적용되는 것을 확인하실 수 있습니다.
이때 같은 폴더, 같은 위치에 있다면 파일명만 적어주면 되겠죠?
3. 마무리_css에서 제일 중요한 것
마지막으로 css에서 가장 중요한 부분을 말하고 이번 글을 마치려 합니다.
css에서 가장 중요한 것은
'구글 검색'입니다.
사실 어떤 코딩을 하든 구글이 참 중요하지만,
특히나 html css 관련해서는 더 그렇다고 볼 수 있습니다.
저는 css를 할 때,
폰트 색을 바꾸는 코드(color:색), 폰트를 기울이는 코드(fomt-style:italic) 등을
전혀 알고 있지 못하는 있는 경우가 많습니다.
왜냐하면 css 관련한 코드들은 정말 많은데,
그걸 일일이 다 외우기는 힘들기 때문이죠.
다만 '폰트 색을 바꾸고 싶다', '폰트를 기울이고 싶다'라는 생각이 있을 뿐입니다.
그 생각을 가지고 구글에 입력합니다.
그러면 수많은 똑똑이들이 방법을 다 알려주고 있습니다.
그걸 보고 적용시켜 보는 거죠.
그러니 이 글을 보신 분들이라면,
지금부터 각자 꾸미고 싶은 것을 생각한 다음 구글에 찾아보시면 됩니다.
다음에 제시하는 것들은 꼭 적용해봐 주세요.
폰트 굵게 하기, 폰트 사이즈 키우기, 오른쪽 정렬 등.!
'개발 > Web(html_css)' 카테고리의 다른 글
| Bootstrap 사용법 & Start bootstrap 템플릿 (0) | 2020.04.23 |
|---|---|
| 프론트엔드? 백엔드? 차이 (0) | 2020.04.22 |
| HTML 기본 태그 정리 (0) | 2020.04.17 |
| 웹 기초) HTML개념과 태그, 요소, 속성, 변수 (0) | 2020.04.11 |
| 웹 기초) HTML,CSS,Javascripts개념과 차이 (0) | 2020.04.11 |
댓글