DevSSOM

CSS - CSS 개념과 연동 방법 본문

HTML, CSS

CSS - CSS 개념과 연동 방법

데브쏨 2021. 7. 9. 17:41
반응형

CSS란?

: Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어. 정보(HTML)와 디자인(CSS)이 분리되서, 문서의 레이아웃과 스타일을 정의함.

 

선택자 { 속성 : 속성값; }
  • 선택자 : 디자인을 적용할 HTML 태그의 이름을 넣어주면 됨.
  • 속성 : 어떤 디자인을 적용할지.
  • 속성값 : 어떤 역할을 수행할지 구체적으로 써줘. 세미콜론(;) 입력은 필수.
h1 {  /* 속성 : 속성값 */
  font-size: 20px;             /* 폰트 사이즈 */
  font-family: sans-serif;     /* 글꼴 */
  color: blue;                 /* 폰트 색깔 */
  background-color: yellow;    /* 배경색 */
  text-align: center;          /* 텍스트 정렬 */
}

 

 

CSS 연동 방법 세 가지

1. Inline Style Sheet

HTML 태그 안에다가 style이라는 속성을 입력해서 다이렉트로 속성과 속성값을 입력.

<h1 style="color: red;"> coding 101 </h1>

2. Internal Style Sheet

<style>이라고 하는 태그를 <head>태그 안에다가 넣어준 다음에 선택자를 지정하고, 중괄호 안에다가 속성과 속성값을 넣어서 입력하는 방식. 

<head>
<style>
  h1 { background-color: yellow; }
</style>
</head>

3. External Style Sheet

.css라고 하는 확장 파일을 따로 만들어서 이 파일 안에다 css 언어를 입력한 다음에 html파일과 css파일을 링크 연결방식으로 연동. link 태그로 불러오기. 가장 큰 장점은 html과 css를 각각의 문서 안에서 따로 관리해서 상대적으로 가독성이 높고 유지보수가 쉬움

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

 

728x90
반응형
저작자표시

'HTML, CSS' 카테고리의 다른 글

CSS - 캐스케이딩  (0) 2021.07.11
CSS - 속성의 상속, 부모 자식 관계  (0) 2021.07.10
CSS - 선택자  (0) 2021.07.10
HTML - 태그의 두 가지 성격 (Block 요소와 Inline 요소)  (0) 2021.07.08
HTML - 구조를 잡을 때 사용하는 태그  (0) 2021.07.07
HTML - <a>태그로 링크 입력하기  (0) 2021.07.06
HTML - 문서를 구성하는 태그  (0) 2021.07.05
'HTML, CSS' 관련 글 more
댓글