Something good can work for you / CSS : 속성, 선택자

CSS : 속성, 선택자

부트캠프(END)/Web2022. 7. 7. 15:43

CSS : HTML 내용과 상관없이 디자인을 자유롭게 변경할 수 있다.

종류

1. 외부 CSS

→ (.css) 파일로 제작하여 모든 파일에 적용을 할 때

2. 내부 CSS

→ HTML 한 개의 파일 안에서만 적용된다. <style> 태그로 설정!

3. 인라인 CSS

→ 태그 한 개에 대해서 처리한다. ex) <h1 style=""></h1> 이런식으로

같은 태그의 같은 디자인속성을 다른 곳에서 제어하면 오버라이딩 된다.

사용법

<style type="text/css">
	tag_name{
     attribute:value;
     -- 이미 제작이 되어 있으면 값도 입력이 되어 있따.
     attribute:value;
     attribute:value;
    }
    </style>

CSS의 속성

1) 글꼴 관련

font-size : 글꼴 크기

font-family : 글꼴 종류

font-weight : 글꼴 굵기

2) 텍스트 관련

color : 글자 색상

text-decoration : 밑줄표시 → none, underline

white-space : 자동 줄바꿈 설정(pre-wrap)

3) 문자 관련

text-align : 정렬(left, right, center) *요즘은 <center>는 안 쓴다!

4) 목록 스타일

display : none(아무 표시 없음), list-item(표시 있음)

list-style-type : 참고

*선택자(Selector) : 특정 HTML 태그를 지정하는/선택해 주는 인자. 돔스크립트

선택자로 선택한 태그에 원하는 스타일을 적용하거나 기능을 부여할 수 있다.

태그 디자인은 CSS, 태그 이벤트(클릭, 키보드입력 등) 제어는 javascript!

HTML Selector 연습은 여기서 ▶ https://try.jsoup.org/

종류	형태	사용예
전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#id	h1#id
클래스 선택자	.class	h1.class
속성 선택자	선택자[속성=""]	input[type=submit]
후손 선택자	선택자 선택자	header h1
자손 선택자	선택자>선택자	header>h1
가상 선택자	선택자:액션

tag마다 구분을 위한 속성값을 준다 → class, id, name

class와 id는 Javascript와 CSS에서의 구분자로 활용하기위해서,

name은 Java에서 입력값을 받아오기 위해 많이 사용한다.

class는 중복 부여 및 하나의 태그에 여러 개 지정이 가능하고, id와 name은 중복이 불가능하다.

→ class명을 여러 개 부여함으로써 태그별로 공통된 디자인을 적용할 수 있다.

HTML, CSS, JS는 사용자가 보낸 값을 받거나 처리할 수 없다. → 그래서 Java가 필요합니다.

java로 값을 받아오기 위해서는 반드시 name 속성이 필요하다.(서버와 연결할 때 사용됨)

아이디, 클래스 선택자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	h2.yellow{ color:yellow; }
    	h2.cyan{ color:cyan; }
    	h2#red{ color:red; }
    	h2#green{ color:green; }
    	h2#blue{ color:blue; }
    </style>
  </head>
  <body>
    <table width=200px border=1>
        <tr align="center">
            <td> <h2 id="red">Red</h1>
                <h2 id="green">Green</h1>
                <h2 id="blue">Blue</h1>
          </td>
            <td> <h2 class="yellow">Yellow</h1>
                <h2 class="yellow">Yellow</h1>
                <h2 class="cyan">Cyan</h1>
                <h2 class="cyan">Cyan</h1>
          </td>
        </tr>
    </table>
  </body>
</html>

↓

속성 선택자

<!DOCTYPE html>
<html>
  <head>
  <!--  
  선택자[속성*=값] : 선택자의 속성이 값을 포함한다
  선택자[속성^=값] : 선택자의 속성이 값으로 시작한다.
  선택자[속성$=값] : 선택자의 속성이 값으로 끝난다
  -->
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	a{
    		display:block;
    		color:black;
    		text-decoration:none;
    	}
    	a[href*="daum"]{
    		color:red;
    	}
    	a[href^="https"]{
    		color:green;
    	}
    	a[href$="kr"]{
    		color:magenta;
    	}
    </style>
  </head>
  <body align=center> 
  	<a href="http://www.daum.net">Hello1</a>
  	<a href="https://www.naver.com">Hello1</a>
  	<a href="http://www.nate.com">Hello1</a>
  	<a href="http://www.google.co.kr">Hello1</a>
  	<a href="http://www.sist.co.kr">Hello1</a>
  </body>
</html>

↓

자손, 후손 선택자

특정 태그의 후손과 자손을 선택할 때 사용한다.

위 그림에서,

div 태그를 기준으로 바로 한 단계 아래에 있는 h1, h2, ul 태그를 자손이라고 하고,

div 태그 아래에 있는 모든 태그를 후손이라고 한다.

자손 선택자는 > 기호를 사용하여 바로 한 단계 하위에 있는 태그를 선택하게 된다.

section>p 와 같이 사용하고, 이 때 section의 자손인 p를 선택한다.

후손 선택자는 공백으로 구분하여 부모 태그의 하위에 있는 태그를 선택한다.

ul li 와 같이 사용하고, ul의 하위 관계에 있는 li들을 선택한다.

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <style type="text/css">
    	/*자손 태그*/
    	section > p{
    		color:red;
    	}
    	ul > li > p{
    		color:blue;
    	}
    	/*후손 태그*/
    	ul li{
    		color:green;
    	}
    	/*멀티 태그*/
    	header, p{
    		color:magenta;
    	}
    </style>
 </head>
 <body>
  <section>
   <header>
    <h1>예약방법 및 요금</h1>
   </header>
   <p>전화방법, 온라인방법?</p>
   <ul>
    <li>예약방법 
     <ul>
      <li>전화방법</li>
      <li>온라인</li>
     </ul></li>
    <li><p>확인</p></li>
   </ul>
  </section>
 </body>
</html>