brunch

라이킷 86 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 고코더 Jul 07. 2021

CSS라는 옷을 입는 3가지 방법

인라인, 내부 스타일,외부 스타일3가지 입력 방식

옷을 입는 3가지 방법

출처 : falyon.com

백 투 더 퓨처(Back to the Future) 시리즈는 타임머신 장르의 한 획을 그었던 SF 영화입니다. 흥미진진한 두 번째 이야기에서는 인상적인 장면이 연출됩니다. 바로 자체 건조 시스템을 갖춘 최첨단 재킷이 등장합니다. 주인공 '마티 맥플라이'가 물에 젖자 공상 영화 속 옷은 묻었던 물기를 순식간에 건조해 버립니다. 어릴적 물풍선 여름 놀이가 유행하던 시절 간절히 갖고 싶었던 한벌의 아이템이었습니다. 그런데 2015년 실제로 그 일이 일어납니다. falyon 이란 회사는 모델명 'SDJ-02'를 공개합니다. 오히려 영화 속 옷보다 진보된 기능들이 들어가 있었습니다. 6,000mah 배터리를 내장한 이 재킷의 기능인 이렇습니다.

- 온도 제어 (쿨링 + 발열 + 건조 모드)

- USB 포트

- 스마트 폰 / 태블릿 용 대형 포켓

- 공기 증폭기

이렇게 옷을 입는 방법은 기술의 과학이 발전하고, 그 목적에 따라 다양하게 발전해갔습니다. 신축성이 좋고, 땀 흡수가 잘되는 소재가 개발되면서 운동복은 이전에 없던 최첨단 의류 산업이 되었습니다. 옷은 의견을 표출하기도 합니다. 티셔츠에 발언하고 싶은 글자를 넣어서 자신의 의견을 말하기도 합니다. 그렇게 티셔츠 한벌은 사회적 이슈를 만들어 내기도 합니다. 원가에 1,000배가 넘는 명품 브랜드 구매하여 자신의 부를 과시하기도 합니다. 이처럼 옷을 입는다는 개념은 점점 복잡해져 가는 거 같습니다.

CSS를 입는 방법도 점점 다양하게 발전해 갔습니다. 처음에는 필요한 곳에 그때마다. 가볍게 디자인을 씌워 사용하는 원시적인 방법을 사용하다. 페이지 내에 디자인을 스스로 만들어 사용하는 방법을 사용하거나. 전문가들이 모여서 최적화되고, 아름답게 만든 외부 디자인을 사용하기도 합니다. 패션만큼 복잡하지만, CSS가 사용하는 디자인은 패션과 다르게 여러 가지 기능을 아울러 사용할 수 있게 되었습니다. 그 3가지는 인라인, 내부 스타일, 외부 스타일입니다. 이 옷을 입는 방법을 알아보도록 하겠습니다.

인라인

인라인 방법은 스타일을 입혀주는 가장 원초적인 방법입니다. 패션으로 비유하자면 '액세서리'에 가깝다는 생각이 듭니다. 어떤 옷을 입어도 액세서리는 동일하게 노출되는 것처럼 이 방법도 짧은 문법으로 가장 우선순위로 적용됩니다. 하지만 문제는 액세서리가 너무 많아지면, 과하다는 생각이 드는 것처럼 이 방법을 쓰면 HTML이 복잡해지고, 유지보수가 힘들어지게 됩니다.

<p style='color:blue'> 인라인 스타일 </p>

태그 안에 style이라는 속성을 선언하고, 이곳에 디자인을 입혀서 사용합니다. 예제에서 p 태그 안에 글자를 파랗게 만드는 명령입니다. 짧은 태그에서는 가독성이 좋아 보입니다. 하지만 정말로 필요로 할 때 한정적으로 사용할 필요가 있습니다.

내부 스타일

내부 스타일은 HTML안에 CSS를 사용하는 방법입니다. 이 스타일의 장점은 HTML 문서 하나로 스타일시트까지 관리할 수 있는 측면이 있습니다. 굳이 비유하자면 기본 티나, 내의와 가깝습니다. 그날의 패션을 구축하기 전 기본적으로 입어야 할 옷을 입은 상태로 사용합니다. 하지만 정보와 디자인이 분리해야 하는 현대의 HTML 특성상 좋은 방법은 아니라고 생각합니다.

<style type="text/css">
    p {
        color:#ff0a00;
    }
</style>

<p> 내부 스타일 </p>

HTML 내부 안에 <style> 태그를 선언하고 그 안에 CSS 문법을 작성합니다. 이렇게 만들어진 페이지는 내부에서만 동작합니다. 만약 다른 곳에서 다시 사용하려면 그대로 복사해서 다른 페이지에 붙여 넣어 사용해야 하는 단점이 있습니다.

외부 스타일

외부 스타일은 CSS 파일을 분리한 방법입니다. 실제로 많이 사용하고 있는 방법입니다. 그리고 가장 보편적인 기술입니다. 전문가들이 옷을 만들어 판매하듯 CSS 개발자들이 HTML에 구애받지 않고 자유롭게 창작할 수 있게 만들어준 방법입니다. 이런 방식은 여러 페이지를 동시에 스타일을 적용할 수 있습니다. 반복적인 작업을 하지 않게 합니다. 패션으로 비유하면 '기성복'으로 비유할 수 있습니다.

<link rel="stylesheet" type="text/css" href="style.css" >
<p> 외부 스타일 </p>

HTML에서 배웠던 <style> 태그를 활용할 수 있는 방식입니다. 전문 디자이너를 모심으로 HTML이라는 뼈대를 세련되고 멋지게 꾸밀 수 있는 가장 좋은 방법입니다.

CSS를 잘 입는 방법

옷을 잘 입는 비법은 '많이 접하고 입어보는 방법'이라고 합니다. 옷을 잘 입는 친구 집에 가면 힙한 스타일부터 정장까지 다양하게 아이템을 구비하여 날마다 새롭게 자신을 단장하여 외출을 합니다. 다양한 시도 나만의 스타일을 만들고 패션을 알게 하는 비법이라고 합니다. 오늘 배워본 것처럼 CSS를 입는 방법은 다양합니다. 가장 필요한 방법은 분명 '외부 스타일'방식입니다. 하지만 제공되는 기능들을 충분히 인지 하였을 때 CSS를 잘 꾸밀 수 있는 비법입니다.