💻 Web/-- HTML | CSS

CSS 벼락치기 1 - 기초 구성(시트) , CSS적용 방법 , 셀렉터 (선택자, Selector)

* CSS : Cascading Style Sheet

HTML의 외관과 관련되어있다. 폰트의 색, 배경색, 출력 위치, 레이아웃 등 HTML을 꾸미는 언어입니다.

div { color : red ; font-size : 20px ;}

div : 셀렉터(선택자) 라고 부릅니다. CSS가 적용될 HTML의 요소를 선택합니다.

color , font-size : 프로퍼티(property) 라고 부른다. 속성이라고 생각하면 됩니다.

red, 20px : 값 (value)입니다.

* CSS 문법 규칙

1. CSS3 스타일 시트는 { } 중괄호를 이용합니다. 그리고 대.소문자의 구분이 없습니다.

2. 프로퍼티:값 뒤에는 ;(세미콜론)을 붙여 분리시켜주어야 합니다.

3. 셀렉터와 같은 모든 HTML 태그에는 스타일 시트가 적용됩니다.

*CSS 적용 방법

1. Inline Style Sheet :

HTML 태그에 style속성을 만들어 CSS코드를 넣는 방법입니다.

<p style="color : red"> 빨간불 </p>
<p> 지금 이 단락에는 적용되지 않습니다.</p>

위코드에서는 해당 p 태그에만 CSS가 적용됩니다.

2. Internal Style Sheet :

HTML 문서의 <head>내부에 <style> CSS코드 </style>을 삽입하는 방법입니다.

<head>
  <style>
body { background-color : blue;}
h3 {color:purple;}
  </style>
</head>  

 <body>
   <h3>CSS</h3>
 </body>

위 코드를 입력하면 body부분은 파랗게, h3은 보라색으로 적용됩니다.

3. Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다.

index.html 이라는 파일이 있고, 이 파일에 적용시킬 CSS코드를 만든다고 가정하면, style.css파일을 하나 더 생성합니다.

다음 style.css에 CSS코드를 작성해줍니다. (이때 <style> 태그는 필요 없습니다. 그냥 CSS선택자, 프로퍼티, 값만 입력하여 작성하면 됩니다.)

그리고 index.html의 head부분에 다음과 같은 방법으로 연결시켜주면 됩니다.

1. link 태그 사용하기

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

link 태그는 <head>내부에 작성하며, 종료태그는 없습니다. 그리고 여러번 사용하여 다수의 css파일을 가져 올 수 있습니다.

2. @import 사용하기

<style>
    @import url(style.css);
    @import "style2.css";
</style>

두가지 파일을 불러오는 코드입니다. 형태는 다르지만(괄호와 따옴표 여부가 다르지만) 기능은 같습니다.

* CSS 적용 우선순위

위에서 3가지의 CSS 적용 방법을 소개했습니다. 이때 만야 같은 셀렉터(선택자)에 3가지 방법을 모두 사용하여 스타일시트를 적용한다면 충돌이 발생합니다. 따라서 이런 경우에는 overriding(덮어쓰기)방법으로 우선순위에 따라 스타일 시트가 적용됩니다.

1. inline style sheet(html태그 내부) 2. internar style sheet(<style>태그) 3. linking style sheet(외부 css파일)

그럼 어떠한 p에 대하여 다음 3가지 방법으로 color를 설정하면

*외부파일
p{color:mistyrose;}

*HTML head태그 내부
<style> p{color:blue;}

*HTML 본문 
<p style="color : red">

<p>의 색은 우선순위에 따라서 red로 설정됩니다.

*셀렉터 Selector (선택자)

태그 이름 선택자

태그 이름을 셀렉터로 사용합니다. 여러가지 태그를 선택할 경우, 콤마로 구분됩니다.

h1,h3,li { color :brown;}

클래스 선택자

html의 클래스 속성으로 지정 가능합니다. 셀렉터의 맨 앞에 마침표 (.)를 붙입니다.

==============html파일==================

<body>
<h1 class = "큰제목"> 코로나 바이러스! </h1>
<h2 class = "소제목"> 확진자 증가 </h2>
</body>

위처럼 class 속성을 사용해준뒤, CSS파일에서 다음처럼 작성합니다.

==============CSS파일===============

.소제목{background : mistyrose;}

id 선택자

class 셀렉터와 비슷합니다. 마침표 대신 "#"을 붙여서 사용하면 됩니다.

==============html파일==================

<body>
<h1 class = "큰제목" id = "first"> 코로나 바이러스! </h1>
<h2 class = "소제목"> 확진자 증가 </h2>
</body>

#first{background : mistyrose;}

선택자의 상속

  ================html파일====================
  <body>
    <h1 id = "index_1"><a href="index.html">WEB</a></h1>
    
<ol>
  <li><a href="1.html"> <strong> HTML </strong> </a></li>
  <li><a href="2.html">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>
</ol>


</body>

직계 자식일때는 '>'를 사용합니다. 위 코드의 <ol>태그의 직계 자식은 <li>태그입니다.

이러한 경우에는

ol>li {color : red;}

이렇게 CSS를 사용하며

<ol>태그의 자식 <li>의 내부에 또 <strong>이라는 자손이 있습니다. 이러한 경우에는 직계자식이 아니므로 나열하는 형식으로 사용하면 됩니다. (콤마를 사용하면 안됩니다.)

ol strong{color : blue;}

전체 선택자

별모양 " * " 을 사용하여 html전체에 CSS를 적용 할 수도 있습니다.

* {color : red;}

가상 클래스 셀렉터 (peseudo-class selector)

특정 상황이 발생하면, 적용되는 셀렉터입니다. 이미 정의되어있는 클래스이므로 잘 활용하면 코드를 효과적으로 줄일 수 있습니다.

셀렉터:사용할 가상 샐렉터 { 프로퍼티 : 값;} 의 형태로 사용합니다.

(콜론 앞뒤의 공백은 허용되지 않습니다.)

p:hover {backgroud-color : red; font-size : 40px;}

수십가지의 가상 클래스 셀렉터가 있지만, 위 코드의 hover는 마우스를 위에 올리면 동작합니다. <p> 단락에 마우스를 올리면 배경색이 red, 폰트사이즈가 40px로 확대됩니다.

'💻 Web > -- HTML | CSS' 카테고리의 다른 글

CSS 벼락치기 2 - 텍스트, 색 , 폰트 , 박스 (0)	2020.03.22
HTML - web form , 폼 , input (0)	2020.03.19
HTML 벼락치기 3 - 앵커(anchor) , iframe (0)	2020.03.19

Contents

새소식

인기 검색어