html 태그를 작성하는것 만으로는 웹페이지를 원하는 모양으로 웹페이지를 꾸미기가 어렵습니다. 그것을 도와주기 위해 존재하는것이 바로 css입니다. Cascading Style Sheet의 약자로 스타일시트라고도 흔히 부르는데 웹 코딩 얘기 할때 스타일이 어쩌구 하면 대충 다 css얘기라고 생각하시면 됩니다.(아마)
css의 대표적인 특징이라면 'cascading'의 의미에 있는 '위에서 아래로 내려온다'는 속성이 있습니다. 무슨 뜻이냐 하면 스타일시트에 적은 내용은 브라우저가 위에서부터 아래로 순서대로 읽어내려가기 때문에 위에서 적용된 스타일을 아래서 무효화시키고 변경시킬 수 있다는 뜻입니다.
예를들면 p 태그에 대한 스타일로 폰트 사이즈를 13px로 적었다고 합시다. 그리고 2번 라인에 똑같은 p에 대한 스타일로 폰트사이즈를 14px로 적는다면 이 중복되는 속성은 아래쪽에 있는 스타일, 즉 14px로 적용됩니다.
물론 이것은 언제나 절대적인것은 아닙니다. 왜냐구요? css에는 중요도 점수라는게 있기 때문입니다.
이 내용에 대해서는 다른 포스팅에서 자세히 다루기로 하고 먼저 스타일 기본 작성법에 대해 소개해보도록 하겠습니다.
요소에 스타일을 적용시키는 방법은 크게 세가지가 있는데요
1. 인라인 - 태그 내부에 직접 작성
예) <div style="border:1px solid #000;">내용</div>
사실상 css라고는 할수 없는 고대적부터 내려온 스타일 작성법입니다. 과거에는 <font size="2">내용</font> 같은 것도 있었지만 이제는 쓰이지 않고 style="스타일내용" 만 사용하게 되었습니다.
가장 높은 우선순위를 가지고있지만 페이지가 많아지고 내용이 길어질수록 작성과 관리가 굉장히 불편하기 때문에 특수한 경우가 아닌 이상 굳이 쓰지 않습니다.
만약 한 페이지에 div가 100개인데 그 div에 전부 border:1px solid #000; 속성을 주고싶다면? 상상만으로도 끔찍하고 기절할것 같죠
그래서 나온것이 임베딩 스타일입니다.
2. 임베딩 - <head></head> 안에 작성
예) <head>
<style>
div {border:1px solid #000;}
</style>
이걸로 한 페이지에 스타일을 지정하는데 무리가 없어졌죠. 하지만 여러 페이지에 동일한 스타일을 적용하고싶을 경우 그 내용을 여러번 적어야한다는 불편함이 여전히 존재합니다.
지금은 div에 대한 스타일 한개만 예시로 적어놨지만 스타일이 몇백개가 넘고 이걸 30개의 페이지에 적용했는데 적용한 스타일을 변경하고싶다... 복붙하면 되긴 하지만 정말 하기 싫어지죠
그래서! 나온것이 외부 스타일시트입니다.
3. 외부 스타일 - .css 파일에 작성하여 head에 불러옴
2와 궁극적으로 거의 같지만 별도의 .css 확장자를 가진 파일에(예를 들면 style.css)
@charset "utf-8";
div {border:1px solid #000;}
을 적고
<head>
<link rel="stylesheet" href="/style.css">
</head>
같은식으로 head 내부에 불러옵니다. 여러개의 스타일시트를 불러오려면 <link> 태그를 여러개 쓰면 됩니다. 참 쉽죠?
* css 파일은 @charset "utf-8"; 같이 언어셋을 불러오는것부터 시작합니다.
아마 웬만해선 거의 utf-8을 사용하겠지만 계정 설치시 설정한 언어셋에 맞는(euc-kr라던지) 언어를 적습니다.
이로써 작성한 스타일을 <link> 태그만 써서 필요한 내용만 불러오고 관리하기가 엄청나게 쉬워졌습니다.
css 파일을 필요에 따라 여러개 분리 작성해서 각 페이지에 적용할 스타일만 불러오면 정말 편하겠죠?
예시에서 보여드렸듯이 인라인 스타일에서는 태그 안에 style=""을 쓴 뒤 따옴표 안에 스타일을 작성하고
그 외에는 스타일을 적용할 요소를 쓰고 중괄호{} 안에 스타일을 작성합니다.
괄호 안에 적을 스타일 속성 작성법은 스타일 속성: 스타일 속성값; 입니다. 여러가지의 스타일을 적용하려면
적용할 요소(선택자) { 스타일속성1: 스타일속성값1; 스타일속성2: 스타일속성값2; } 같은 방식으로 이어서 작성합니다.
여기까지가 아주 기본적인 내용이고 좀더 자세한 css 문법에 대해서는 다음 포스팅에서 이어보도록 하겠습니다
'Info > 웹코딩의 기초' 카테고리의 다른 글
| [웹코딩의 기초] 웹.꾸.의 기본, css (2) id, class, 가상속성 (0) | 2022.09.07 |
|---|---|
| [웹코딩의기초] 모든 태그에는 뜻이 있다 (4) 특수 태그 (0) | 2021.05.06 |
| [웹코딩의 기초] 모든 태그에는 뜻이 있다 (3) 테이블 태그 (0) | 2021.05.06 |
| [웹코딩의 기초] 모든 태그에는 뜻이 있다 (2) 목록 태그 (0) | 2021.05.06 |
| [웹코딩의 기초] 모든 태그에는 뜻이 있다 (1) 영역태그 (0) | 2021.04.08 |
| [웹코딩의 기초] inline? block? 요소가 가지는 기본속성 - display (0) | 2021.03.11 |
| [웹코딩의 기초] (거의) 모든 태그에는 짝이 있다 (0) | 2021.02.15 |
| [웹코딩의 기초] 무슨 프로그램을 써야 할까? - NotePad++ (0) | 2021.01.05 |