나만의 개발노트

230414(금) [WEB2 JS] _ 9~11강 CSS 기초 본문

카테고리 없음

230414(금) [WEB2 JS] _ 9~11강 CSS 기초

노트포미 2023. 4. 17. 17:42

https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf  

 

WEB2-JavaScript

 

www.youtube.com

[9강] CSS 기초 : style 속성

- CSS는 디자인할 때 사용할 수 있는 언어이다.

- style 속성(property) 안에는 CSS가 온다.

<body>
	<h1 style="color:powderblue;background-color:coral">TestSentence</h1>
</body>

 *style 속성이 여러가지일 경우, ";"으로 구분하여 나열하면 됨

*속성 입력 방법은 "css background color property"와 같은방법으로 검색하면 됨

[10강] CSS 기초 : style 태그

- style 속성보다 효율적인 방법

- <div>, <span>의 태그를 사용하여 표현 (의미와 기능이 없는 태그)

*<div>은 개행O
 <span>은 개행X

<body>
	<p>
    	<span style="font-weight:bold;">Far</span> <span style="font-weight:bold;">far</span> away, 
        behind the word mountains, 
        <span style="font-weight:bold;">far</span> from the countries Vokalia and Consonantia, 
        there live the blind texts.
    </p>
</body>

 

-> class를 지정하면,한번에 style을 변경할 수 있음

*class이름은 <style> 안에서 ".(classname)"으로 표시한다

<head> //꼭 head태그 인 것은 아님
	<style>
    	.farClass{
        	font-weight:bold;
        }
    </style>
</head>
<body>
	<p>
    	<span class="farClass">Far</span> <span class="farClass">far</span> away, 
        behind the word mountains, 
        <span class="farClass">far</span> from the countries Vokalia and Consonantia, 
        there live the blind texts.
    </p>
</body>

[11강] CSS 기초 : 선택자

- 선택자 : 특정 요소들을 선택해서 스타일을 적용할 수 있게 해주는 것

 

- 선택자의 3종류

   1. 태그 선택자(Type Selector)

       : 웹페이지 내의 모든 동일태그에 광범위하게 적용가능
        ex) <div>, <span>

       표현 :  (태그이름){ ... }

 

   2. 클래스 선택자(Class Selector)

        : 그룹핑하여 적용

        ex) <span class="farClass">

        표현 :  .(클래스이름){ ... }

 

   3. ID 선택자(ID Selector)

       : 중복되지 않는 선택자로, 한 가지 대상을 식별할 때 사용

        ex) <p id="farId">

        표현 :  #(ID이름){ ... }

 

- 선택자 우선순위 : ID 선택자 > 클래스 선택자 > 태그 선택자 

                              (좁은범위 --------------------------> 넓은범위)

 

<head>
	<style>
    	span{
        	color:green;
        }
    	.farClass{
        	color:blue;
        }
        #farId{
        	color:red;
        }
    </style>
</head>
<body>
	<p>
    	<span id="farId" class="farClass">Far</span> //선택자 우선순위에 의해 red
        <span class="farClass">far</span> away, //선택자 우선순위에 의해 blue
        behind the word mountains, 
        <span>far</span> from the countries Vokalia and Consonantia, //선택자 우선순위에 의해 green
        there live the blind texts.
    </p>
</body>

<결과>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.