고정 헤더 영역
상세 컨텐츠
본문
1. CSS
그래서 css란 무엇인가? 다시 웹코딩을 집 짓는 과정에 비유해보자. 앞서 설명한 html은 집의 구조, 콘크리트와 철근 등을 결정하는 역할을 한다고 배웠다. 그러면 이제 집의 구조는 어느정도 완성이 됐으니, 그 다음에는 인테리어를 할 차례이다. 집의 구조를 통해 어디에 창문이 들어올 지 알았으니, 이제 이 창문을 구체적으로 만들어보자. 창문의 가로 길이는 얼마나 될 것이며, 세로는 얼마가 좋을까? 창문의 창틀은 무슨 색으로 하고 유리는 이중창으로 할까? 이 모든 디자인적 요소를 결정하는 친구가 바로 css이다.
아마 눈에 직관적으로 보이는게 좋고, 디자인적인 감각이 있다 싶으면 이런 css코딩 혹은 프론트엔드 코딩을 마음에 들어 하는 사람들이 많을 것이다.
2. id, class
지난 시간에 html에 대해서 설명할 때, html을 이루고 있는 요소들의 이름은 "태그"라고 한다는 것을 배웠다. 마찬가지로, css를 이루고 있는 요소들은 크게 id와 class로 나눌 수 있다. 이 id와 class는 html의 태그 안에 넣어서 이름처럼 지정해 준다.
<h1 id='id1' class="class1">publisher, 환</h1>위는 h1이라는 태그에 id와 class를 이용해서 이름을 붙여준 것인데, 각각 id는 id1, class는 class1이라고 이름붙였다.
#id: id는 css의 속성을 설명하는 큰 단위이다. 내 아이디는 항상 나만 쓸 수 있는 고유한 값인 것 처럼, 하나의 id는 페이지 내에서 한 번만 사용 가능하다. 다음과 같이 id명 앞에 #을 붙여서 사용한다.
#id1 {
color: red;
}위 코드는 id1이라는 id명을 가지고 있는 요소의 글씨 색을 빨강색으로 지정한다는 뜻이다.
.class: class는 css의 속성을 설명하는 조금 더 작은 단위이다. id보다 적용되는 우선 순위가 더 후순위이다. 그리고 id와는 다르게 페이지 내에서 같은 이름을 가지고 있는 class를 여러 번 사용할 수 있다. 다음과 같이 class명 앞에 .을 붙여서 사용한다.
.class1 {
font-size: 20px;
}위 코드는 class1이라는 class명을 가지고 있는 요소의 글자 크기를 20px로 지정한다는 뜻이다.
그럼 여기서 의문이 들 수 있다. 만약 id가 class보다 적용되는 순서가 더 앞순서라면 id와 class를 모두 가지고 있는 태그에 서로 반대되는 css가 적용되면 어떻게 될 것인가? 궁금하니 바로 알아보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id='id1' class="class1">publisher, 환</h1>
</body>
</html>위 코드의 h1에는 id1이라는 id와 class1이라는 class가 모두 붙어 있다. 만약 연결되는 css가 다음과 같으면 어떻게 될까?
#id1 {
color: red;
}
.class1 {
color: blue;
}결과는 다음과 같다.
publisher, 환
우선 순위를 받는 id가 역시 생각했던 대로 우선순위를 받는다. 서로 상충되지 않는 내용, 예를들어 색깔과 글자 크기를 id와 class가 각각 지정하고 있다면 내용이 모두 반영된다.
id와 class는 모두 각각의 쓰임이 있지만, 실제 현업에서는 class를 훨씬 더 많이 사용하고, 회사별 스타일에 따라서 아예 id를 사용하지 않는 경우도 있다고 한다. 나도 프로젝트를 하면서 거의 대부분 class만 사용했던 기억이 있다. 그 이유는, id는 앞서 설명한 대로 페이지 내에서 한 번밖에 사용을 할 수 없기 때문에 id를 여러 개 사용하면 개발자들에게 혼선을 줄 수 있고 내용이 상충될 수 있기 때문이다.
추가로, 굳이 id나 class를 넣지 않고 태그 자체에 css를 지정하는 방법도 있다. 예를 들어, body 태그 전체에 내가 검정색 배경을 넣고 글씨는 흰 색으로 표현하고 싶다고 하자. 그러면 다음과 같이 css를 추가하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 id='id1' class="class1">publisher, 환</h1>
</body>
</html>
결과는 위와 같이 나온다.
3. 인라인, 내부스타일, 외부스타일
그럼 이제 이 다음 고민은 보통 이렇다. css가 무엇인지도 알았고, html에 id와 class를 지정해서 css를 지정해주는 방법도 알았다. 그런데 css는 어디에 작성하지?
나는 이를 html과 css파일을 연결한다고 생각했다. 이 연결 방법에는 크게 3가지 방법이 있다.
ㄱ. 첫 번째는 inline (인라인) 방식이다. 말 그대로 라인 안에 넣어서 css를 표현하는 방법이다. 다음과 같이 사용할 수 있다.
<h1 style="color: red;">publisher, 환</h1>위 코드와 같이 html 태그의 안에 style=""이라는 요소를 넣어서 태그를 수식하면 된다. 굉장히 쉽고 강력하게 적용할 수 있다는 장점이 있다. 여기서 강력하게 적용한다는 뜻은, 여러 css와 html을 넣어서 웹 페이지를 만들다 보면 내가 뜻하지 않은 잘못된 서식들이 태그에 들어가기도 하고, 여러 서식들이 충돌을 일으키기도 한다. 그러면 이때 중요한 것이 서식들간의 우선순위인데, inline은 태그 안에 들어가서 서식을 넣는 방법이기 때문에 굉장히 높은 우선순위를 가진다.
하지만 장점만 있는 것은 아니다. 단점도 존재하는데, 귀찮다는 점이다. 예를 들어, 내가 버튼은 100개를 만든다고 해 보자. 그러면 나는 class="button1"이라는 클래스를 하나 만들어서 한 번만 디자인을 열심히 한다음에 버튼 100개에다가 class를 지정해서 한 번에 해결할 수 있다. 그런데 인라인은 class를 지정하는 것이 아닌, 태그에 하나하나 서식을 모두 넣는 방법이기 때문에 버튼 100개에다가 css를 하나하나 다 넣어줘야 한다. 그리고 css 속성을 한두개만 넣는 것이 아니기 때문에 나중에는 코드의 가독성이 나빠질 것이다.
따라서, 예상치 못한 오류로 인해서 인라인을 적용해 오류를 고치고 싶은 상황이 아니라면 인라인 방식은 사용하지 않는 것이 좋다.
ㄴ. 두 번째는 내부 스타일시트 방식이다. 이 역시도 이름이 어렵지 않은데, 내부에 스타일시트를 넣어서 css를 적용하는 방법이다. 여기서 스타일시트는 css를 의미하는데, 어디 내부에 css 스타일시트를 넣는다는 뜻일까? 정답은 바로 html의 head 태그 안에 넣는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id1 {
color: red;
}
.class1 {
font-size: 8px;
}
</style>
</head>
<body>
<h1 id='id1' class="class1">publisher, 환</h1>
</body>
</html>위 코드에서 보는 것 처럼 head 태그 안에 style이라는 태그를 넣고, 여기에 각각 id1과 class1에 해당하는 css를 추가했다.
이 방식의 장점 역시 쉽고 간편하다는 점이다. 하지만 단점도 있는데, html파일 안에 css파일까지 같이 넣다보니 문서의 길이가 매우 길어질 수 있다. 그리고 vscode등을 이용해서 작업을 하면 html이나 css는 각각에 해당하는 글자 색깔이나 자동완성 기능 등을 제공하는데, html 파일 안에 들어있는 css 코드는 이런 혜택을 받지 못한다. 또한, 웹페이지를 만들다 보면 비슷한 페이지를 여러 개 만들어야 하는 경우도 있는데, 그럴때마다 일일히 style을 배껴서 쓰기도 곤란한 노릇이다.
ㄷ. 마지막 세 번째는 외부 스타일시트 방식이다. 두 번째 방식은 html 문서 내부에 style 태그를 넣어서 css를 지정하는 방식이었다면, 세 번째는 외부에 별도의 css파일을 만들고, html과 css를 코드를 이용해서 연결하는 방식이다. 코드를 이용해서 넣는다는 말이 조금 어렵게 보이기는 하지만, 실제는 그렇지 않다. 단 한 줄이면 된다.
<link rel="stylesheet" href="./publisherhwan.css">위와 같은 코드를 head 태그 안에 넣어주면 된다. 물론 같은 tier(폴더 상의 같은 위치라고 보면 된다) 안에 publisherhwan.css라는 css파일이 있어야 된다.
이 방법은 큰 장점이 있는데, css파일을 별도로 만들어서 보관하는 만큼 이 문서의 편집이나 추가 등이 쉽고, 가독성이 좋다. 또, 하나의 css파일을 이용해서 여러 html 문서에 적용할 수도 있는 만큼 반복되는 작업을 피할 수도 있다. 하지만 단점도 있다. 웹사이트를 나중에 배포하게 될때 css파일이 잘 호환이 안되는 경우가 발생한다. 나도 최종 프로젝트의 배포를 앞두고 css파일과 관련된 문제로 인해서 고생을 해서 결국 두 번째 방식인 내부 스타일시트 방법으로 문제를 해결했던 경험이 있다.
4. reset.css
사실 이런 css를 다루면서 사람들이 가장 고민을 많이 하고, 어려움을 느끼는 부분은 다름아닌 위치에 관한 부분일 것이다. 버튼의 위치를 어디에 위치시킬 것인지, 입력창은 로고에서 얼마나 떨어져 있어야 하는지... 등과 같은 문제이다. 그런데 이 문제를 보기에 앞서서, 기본적으로 html의 태그들은 자신만의 공간을 가지고 있다는 것을 알아야 한다. 무슨 뜻이냐면, 예를 들어 h1 태그를 이용해서 내가 글씨를 쓴다고 하자. 나는 아무런 서식 지정을 하지 않았음에도 불구하고 h1태그에는 상하좌우에 조금씩의 여백이 기본적으로 존재한다.
위 그림을 보면, 나는 hello world라는 글자를 위 아래 글자와 딱붙여서 사용하고 싶거나, 여백을 지정하더라도 내가 생각한 이상적인 여백만을 남겨놓고 싶다. 하지만 이 h1 태그에는 기본적인 padding과 border, margin이 존재하기 때문에 이런 요소들을 내가 인위적으로 없애고 싶은 경우가 있을 수 있다.
이런 경우를 위해서 reset.css라는 css 파일이 존재한다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}보통 이렇게 생겼는데, 이것보다 더 길수도, 짧을수도 있다. html에서 사용하는 기본 태그들에 대해서 마진과 패딩, 보더 등을 모두 없앤 내용이다. 이 파일을 추가로 넣어서 html에 적용한다면 보다 더 깔끔하고 내 머리속과 부합하는 결과를 만들 수 있을 것이다. reset.css 파일은 이대로 구글에 검색해도 많은 예시가 나오니, 마음에 드는 파일을 찾아서 사용해도 된다.
'환 codes web > HTML, CSS' 카테고리의 다른 글
| 피로그래밍 14기: day2 오후 <BOOTSTRAP> (0) | 2021.01.10 |
|---|---|
| 피로그래밍 14기: day1 오후 <HTML> (0) | 2021.01.09 |
댓글 영역