오랜만에 포스팅을 하네요~
지난시간 CSS 꾸미는 방법은 3가지가 있다고 했었죠?
1. 각 요소에 직접 적용하는 CSS가 있습니다.
이 방법은 웹 표준의 방법에서 보면 그리 좋은 방법은 아닙니다. HTML안에 하나씩 일일히 적용해야 하는 불편함이 있지만 특별하게 페이지 혹은 게시판을 만들 때 유용하게 사용될 때가 있습니다.
아래와 같은 예제를 하나 만들었습니다.
html보다 조금 복잡해보이죠?
<body> </body> 사이에 집어 넣은 이 예제는 <p> 태그를 사용했습니다. p는 paragraph의 약자로 <p></p> 사이 글자색인 파란색과 배경을 노란색으로 하였습니다.
<span></span>은 Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)"인데, 그 자체로는 아무 역할도 하지 않고, 문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.
DIV 태그의 역할과도 비슷하지만, DIV 태그는 사각형 박스 모양으로 구역을 지정하고, SPAN은 한 문장 단위입니다. 웹페이지 중에서, 어떤 태그도 달려 있지 않은 곳에, 뭔가를 지정하기 위해서는 SPAN 태그를 사용하면 됩니다. 다시 본론으로 돌아오면, font-size를 사용해서 폰트 크기를 변경해라 라는 뜻입니다.
결과를 보면 아래와 같습니다.
파일 예제 다운받기 :
css_0.html
2. style요소를 활용한 방법
<body></body> 내에 CSS를 섞어서 쓰면 헷갈리고 불편할때가 있습니다. 이럴때는 <head></head>사이에 따로 모아 놓는 방법이 있습니다.
그 방법은 아래와 같습니다.
1번의 방법보다 <body></body>부분의 작업이 좀 편해지겠죠? 그런데 head부분에
<style type="text/css">이 있네요? 이것은 <head></head>내에서 CSS를 사용한다고 정의를 해 놓은거예요. p{}와 p span{} 사이에는 1번에서 했던 소스가 있을거예요 대충 감이 오시죠?
<body></body> 내에 <p></p>로 감싼 부분은 파란색 글씨, 배경은 노란색이고 <span></span>으로 감싼 부분은 폰트가 24예요. 결과는 1번과 같습니다.
파일 예제 다운받기 :css_1.html
3. 외부 파일로 만들어서 연결하는 방법
제일 많이 사용하는 방법이고 관리하기도 편한 방법입니다. 2번의 <style> 부분을 따로 빼내서 .css 파일로 만들어서 HTML에서 불러오는 방법이예요.
1,2번과는 약간 다른 방법인데 외부 파일을 불러오기 위해서는 link라는 속성을 써야 합니다.
'rel' 속성은 현재 문서와의 관계를 나타내는 속성이고 'href'를 이용해서 CSS 파일의 경로를 지정합니다.
외부의 CSS 파일 내용은 아래와 같습니다.
간단하죠?
2번의 내용을 그대로 복사해오면 되요 @charset "utf-8";은 문자 코드셋으로 지정을 안하시면 문자가 깨져서 나올때도 있어요.
이렇게 하면 <p>나 <p span>만 바꿔주면 적용된 파일을 하나하나 바꿀 필요없이 한번에 바꿀 수 있는 정말 도움이 되는 방법이예요~
1,2번보다는 3번으로 공부하시는게 많은 도움이 되실꺼에요
다음 시간에는 CSS 문법 을 하나하나 배워보겠습니다
'프로그래밍 > CSS3' 카테고리의 다른 글
| Box Model (0) | 2020.01.08 |
|---|---|
| CSS Syntax (0) | 2020.01.07 |
| CSS란? (0) | 2015.08.16 |
