목차
Internal CSS
이전 글에서는 in-line CSS에 대해서 적었다. HTML tag에 하나의 attribute로써 작용하도록 한 것이었는데, 실제 많이 사용되는 방법은 아니라고 한다. 여러 가지 이유가 있는데, 예를 들어 100개의 <p>가 있고 그 style을 일관적으로 바꾸고 싶을 때, in-line CSS를 사용하면 100개의 style을 바꿔야 한다. scalable 하지 않은 방법이라 잘 사용하지 않는다는 것. 그 대신에 지금 적을 Internal CSS를 사용한다고 한다.
Internal CSS는 CSS를 HTML의 <head></head>에 넣는다. tag의 종류를 적고 그 종류에 따라 일관적으로 style을 부여해줄 수 있다. 그렇기에 하나의 태그에 대한 스타일을 바꿔줄 때 간단하게 바꿔줄 수 있다는 장점이 있다.
다음은 Internal CSS에 대한 예시 코드이다.
<!DOCTYPE html>
<html>
<head>
<title>Learning Internal CSS</title>
<style>
h1 {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<h1>CSS is fun!</h1>
</body>
</html>
head 태그 안에 있는 style 태그가 CSS 코드가 들어갈 부분이다. 예시에서 보이다시피 다음과 같은 형태를 띄고 있음을 알 수 있다.
h1 {
font-size: 50px;
color: red;
}
하나씩 알아보자.
- Selector
- 가장 먼저 나오는 값으로 예시에서 h1의 위치에 있는 값이다. 어떠한 태그에 스타일을 입힐지 결정하는 요소이다.
- Property
- 스타일의 특성을 말하는데 저번에도 봤다시피 font-size, color와 같은 값을 말한다.
- Value
- 마찬가지로 저번에 나왔듯이 각 property가 가질 수 있는 값으로, 50px, red와 같은 값을 말한다.
- Declaration
- property와 value의 조합으로 이 단어를 쓰는 사람은 잘 없다고 한다.
- Declaration은 항상 "property: value;"의 형태를 띄어야 한다.
- Rule
- Selector, Property, value 그리고 Declaration으로 구성된 하나의 덩어리이다.
Selector 를 구할 때는 tag에서 <>를 빼고 attribute 없이 작성하면 된다.
External CSS
Internal CSS 를 사용함으로써 in-line CSS 가 가지는 한계점을 이겨냈지만, Internal CSS 에도 또 다른 한계가 있다. 예를 들어 여러 개의 html 파일이 있다면 그 페이지 각각의 스타일을 바꿔줘야 한다는 것이다. 100개의 파일에 같은 변화을 주려고 하면 100번의 modification이 있어야 한다는거다. 그 문제를 해결할 방법이 external CSS이다.
frontend가 필요한 프로젝트를 하다보면 많이 보게 되는게 CSS 스타일이 가득 담긴 파일 하나가 있다. 그 하나의 파일에 모든 스타일을 담는 것이 external CSS이다.
이를 활용할 때는 주의할 점이 있는데, 하나의 파일에 모든 다른 html 파일에 관여하는 스타일을 넣다보니 무언가를 변경하거나 삭제할 때는 매우 주의해야한다.
내가 2번 째 파일을 만들다가 어떠한 기능이 필요 없어 보이거나 변경이 필요하다고 해서 CSS 파일에 들어있는 코드를 그냥 바꿔버렸다가는, 그 스타일을 사용하는 다른 html 파일에서 엄청난 에러를 불러오고 결국 frontend가 망가질 수 있다. 무언가 다른 것이 필요하다면 그 html 파일에 해당하는 스타일을 추가하는 것으로 삭제하는 것과 변경하는 것을 대체할 수 있다.
이 정도면 왜 사용하는지는 충분히 설명한 것 같고, 실제 개발을 어떻게 하는지를 보자.
우선 강의에서는 CSS 폴더를 따로 만드는 것을 추천한다. 여러 개의 CSS 파일이 있을 때 more organized 되기 때문이다. 그리고 .css extension으로 파일을 만들어주자. 이름은 아무거나 해도 되지만 style, styles, style_sheet 같은 것을 많이 쓰는 듯하다.
파일 안에는 Internal CSS에서 style 태그 안에 넣어줬던 것과 같이 코드를 적어주면 된다. 그러면 CSS 파일은 작성 끝이다.
아마 여기까지 하고 page를 열어보면 적용이 안된 것을 확인할 수 있을 것이다. 그 이유는 html 파일이 어떤 css 파일을 적용해야 할지 모르기 때문이다. 새로 만든 CSS 파일을 html 파일에 씌우기 위해선 태그를 head 태그에 추가해야 한다. <link href="css/style.css" rel="stylesheet">를 추가하면 된다. html과 css를 연결해주는 링크 역할을 한다. href는 a 태그와 같이 어떤 url이나 file을 연결할 지에 대한 부분이고 rel은 그 href가 해당 html 파일과 어떠한 관계인지를 나타내준다. 이 태그를 추가 해준 뒤 다시 페이지를 열어보면 CSS 스타일이 적용된 것을 확인할 수 있을 것이다.
요약하자면,
- 새로운 css 파일을 만든다.
- Internal CSS에서 style 태그에 적은 코드와 같은 형태의 코드를 파일에 넣어준다.
- 그 style을 입힐 html 파일의 head 태그에 link 태그를 추가해준다.
- 페이지를 열어 스타일이 잘 입혔는지 확인한다.
이게 현재(강의 17)까지 들은 결과물이다. 지금 상태로는 external CSS를 사용할 경우 각각의 tag들에 차이 없이 모두 공통된 스타일이 적용된다. 다음 수업에서 그것을 각각이 개별적으로 스타일을 가질 수 있도록 구분하는 방법을 배운다고 하니 다음 기록을 참고해주면 되겠다!
이전 이야기:
[개발공부] HTML/CSS 독학하기 (1)
개념 우선 HTML 과 CSS가 무엇인지 정리해보자. HTML이란 Hyper Text Markup Language의 약자로 webpage에서 내용에 해당하는 부분을 담당한다고 보면 된다. 웹 사이트에서 텍스트, 제목, 문단 등에 해당하는
lifofharru.tistory.com
다음 이야기:
[개발공부] HTML/CSS 독학하기 (3)
Classes and IDs 저번에 마지막으로 잠깐 이야기를 하고 끝났었는데 오늘 배운 내용은 class와 id에 대한 내용이다. 각각의 태그 종류에 따라 스타일을 입히는 것을 넘어 자유롭게 스타일을 입힐 수 있
lifofharru.tistory.com