< Code diaries />

CSS - Syntax, CSS 어떻게 하는건지 살짝 봅시다잉~ 본문

CSS

CSS - Syntax, CSS 어떻게 하는건지 살짝 봅시다잉~

ejey 2024. 6. 8. 19:12

 

 

CSS(Cascading Style Sheet)

 

 

  • CSS는 HTML 웹문서를 스타일링 하기위해 만들어진 언어입니다.
  • Cascading은 '계단식'이라는 뜻인데, style의 선언문이 계속 겹쳐져 우선순위를 따르고 있는 모습을 표현 한 것 같습니다.

  • CSS를 HTML문서에 적용시키는 방법은 총 3가지 입니다.
    • Inline(인라인) 선언 방식 : 태그에 직접적으로 style이라는 속성(Attribute)을 이용하여 넣는 방법입니다. Javascript로 css를 제어할때에 인라인방식으로 적용됩니다. 
    • Internal(내부) 선언 방식 : <head>태그 내에 <style>태그 내에 적는 방식입니다.
    • External(외부) 선언 방식 : 별도의 css확장자를 가진 문서를 만들어 <head>태그 내에 <link>태그로 연결하여 사용하는 방식입니다. 일반적으로 프로젝트를 할 때에 가장 많이 사용하는 방식입니다.
CSS를 HTML에 적용시키는 3가지 방법을 따라해 보세요

 

Welcome to CODING HELL

CSS Syntax 

 

 

A. CSS 선언해보기

// HTML 코드

<h1 class="title">Hello World</h1>
<dl>
  <dt class="title">CSS</dt>
  <dd>Cascading Style Sheet</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

 

// CSS 코드

body {
  font-size:14px;
  font-family:sans-serif;
}

// 모든 h1태그 선택
h1 { font-size:20px; }

// title 클래스를 선언받은 태그만 선택
.title { 
  color:tomato;
}

// dl의 하위요소중에 title 클래스를 선언받은 태그만 선택
dl .title {
  background-color:gold;
}

 

아래에서 직접 해보세요

See the Pen CSS-syntax by Jey Lee (@Jey-Lee-the-sasster) on CodePen.

 

 

자, 이제 CSS 선언을 하실 줄 알게 되었습니다.

그럼 맨 위에 설명드린 것처럼 3가지 방식으로 HTML문서에 적용시켜 볼게요

B. 인라인(Inline) 스타일시트 방식

<h1 style="color:tomato;font-size:20px">Title</h1>

이렇게 HTML Tag에 직접적으로 css 선언문을 나열합니다. 이때 style 속성을 사용하는데, 이것은 HTML의 Attribute(속성)임을 잊지마세요. 

 

 

C. 내부 스타일시트(Internal) 방식

<head>
	...
    <style>
    	h1 { font-size:20px; }
        .title { color:tomato; font-size:12px; }
    </style>
</head>
<body>
	...
</body>

-  HTML의 <head>태그내에 <style>태그를 작성후 내부에 css를 선언할 수 있습니다.

 

D. 외부 스타일시트(External) 방식

<head>
	...
    <link rel="styleshet" href="./css/style.css">
</head>
<body>
	...
</body>

-  css폴더 아래에 style.css 파일로 만들어 HTML문서에 링크하는 방식입니다.

- 이 방법이 프로젝트를 할때에 가장 많이 쓰이는 방식이며, 하나의 css문서를 만들어 여러개의 HTML에 링크하여 공용으로 많이 사용합니다.

 

 

 

자, 오늘 여러분은 CSS 선언하는 기본적인 방법과 HTML문서에 적용하는 3가지 방법에 대해 알게 되셨습니다.
축하드립니다~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

반응형
저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

CSS Property - Text 글자관련 속성  (1) 2024.06.10
CSS Selectors - 가상(Pseudo) 클래스 2 - Link, form, :root등  (0) 2024.06.09
CSS Selectors - before, after  (0) 2024.06.09
CSS Selectors - 가상(Pseudo) 클래스 1 - child 와 siblings 선택  (0) 2024.06.09
CSS Selectors - 선택자 알아보기 1  (0) 2024.06.09
'CSS' Related Articles more