[웹프로그래밍] 7. CSS 셀렉터와 스타일 속성

셀렉터와 스타일 속성

기본 셀럭터와 셀렉터마다 HTML 요소에 접근하는 방법

 

CSS 디버깅하고 테스트하는 좋은 방법

: 크롬의 검사기능

 

1. 셀렉터

스타일을 적용하는 대상을 지정하는 방법

태그, 아이디, 셀렉터를 사용

 

태그에서 사용하는 id 속성은 문서내 유일한 값으로 중복되지 않는다.

클래스는 미리 정의하고 그 클래스 속성으로 스타일을 지정한다.

 

셀렉터	예	설명
.class	.inro	html 태그에서 intro인 클래스로 된 모든 태그 영역
#id	#banner	html 태그에서 banner인 id로 된 태그 영역
*	*	문서 내 모든 요소를 선택
태그	p	문서 내 모든 <p> 태그 영역 선택
태그, 태그	div, p	모든 <div>와 <p> 태그 영역 선택
태그 태그	div p	<div> 태그 안에 있는 모든 <p> 태그 영역 선택

---

2. 기본 셀렉터

 

(1) 태그 셀렉터

• 태그 이름을 요소로 선택해 문서내 임의의 태그를 선택자로 사용한다.
• 같은 디자인 속성을 가지는 태그들을 ,로 나열해 일괄적용한다.
• 중복되는 태그가 존재해
  -> 각각의 디자인 적용이 어렵다.

p{
text-align:center;
color:red;
}
h1, h2, h3, h4{color:blue;}

 

태그의 특정 타입 속성에만 디자인 적용

-> 태그 셀렉터에 속성을 함께 사용

input[type=text]{
background-color:blue;
color:white;
}

-> 같은 태그지만 속성이 다른 태그에 특정 속성에 대해 css 정의

 

(2) id 셀렉터

• HTML 요소의 id 속성을 사용해 특정 요소를 선택
• id는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택 하는 데 사용

#id_name {color:blue;}
___
<div id="id_name">
...
</div>

한 파일에서 한 개만 존재하는 유일한 값이어야 한다

-> 재활용 불가

 

(3) class 셀렉터

• 클래스 셀렉터는 특정 클래스 속성이 있는 요소를 선택
• .class name 형식
• class로 디자인을 먼저 정해놓고 해당 클래스를 지정해 사용
•  

.class_name{color:blue;}
p.class_name2{color:red;}

___
<div class="class_name1">
...
</div>

p.class_name2 -> 태그와 조합된 클래스이며 p태그에서만 적용

 

-> 재활용이 가능한 보편적인 방법

---

3. 기본 셀렉터 조합

 

(1) 동시지정 [and, all]

 

h1, h2{...}
.box, .note{...}

-> h1, h2에 동일 속성 지정

-> box, note 클래스에 동일 속성 지정

 

(2) 태그와 클래스 결합 [클래스의 특정태그에 적용]

.header {color:red;}
h1.header {color:blue;}
h2.header {color:green;}

-> header 클래스의 모든 태그 : 붉은색

-> h1 : 파란색, h2 : 녹색

 

(3) 기본 셀렉터 조합 사용 예

.header {color: red;}
div.header {color:blue;}
h1, h2 {color:green;}

<p class="header"> hello</p> -> 붉은색 출력
<div> hello </div> -> 기본색 출력
<div class="header">world</div> -> 파란색 출력
<div><h1>hello</h1></div> -> 녹색 출력
<div class="header"><h1>world</h1></div> -> 녹색 출력
<h2>hello world</h2> -> 녹색 출력

-> css를 적용하면 어떤 출력이 나올지 예측할 수 있어야 한다.

 

---

4. 속성 활용하기

• css 속성은 의미를 짐작 가능한 간단한 영어로 구성
• 개발 도구에서 지원하는 코드완성 기능을 사용
• 모든 css 속성을 한번에 학습하기는 어렵기 때문에 활용하는 방법 측면으로 학습

(1) 텍스트 속성

• color : 글자색 지정
• text-align : 주어진 영역에서 글자의 정렬 방식 지정 (left / right / center)
• text-align : justify의 경우 양쪽 정렬

(2) 폰트 속성 [설치된 폰트와 상관없이 폰트 적용은 web font]

• font-family
• font-style
• font-size
• font-weight
• font-variant

 

(3) 정렬 속성

• text-align :  요소 내 텍스트의 정렬
• certical-align : 인라인 혹은 테이블 셀에서 수직 정렬

(4) 링크 속성

• a:link : 방문할 적 없는 기본 링크
• a:visited : 방문한 링크
• a:hover : 마우스가 링크 위에 올라갔을 때
• a:active : 링크를 클릭 했을 때

    <style>
        a:link{
            color: red;
            text-decoration:none;
        }
        a:visited{
            color:blue;
            text-decoration: none;
        }
        a:hover{
            color:hotpink;
            text-decoration: underline;
        }
        a:active{
            background-color: blue;
            text-decoration: underline;
        }
    </style>

(5) 컬러 속성

• CSS color : 색상이름, hex코드, rgb, hsl
• hsl : 색조, 채도, 밝기
• 투명도 : rgba, hsla를 사용해 0~1사이의 숫자로

#text1 {color: red;}
#text2 {color: ##FF0000;}
#text3 {color : reg(255,0,0);}

#text1 {color : rgba{255,99,71,0.5)}
#text2 {color : hsla(9,100%, 64%, 0.5)}

(6) 배경 속성

• background-color : 글자색 지정
• background-image : 배경이미지 지정
• background-repeat : 이미지 반복
• background-position : 이미지의 위치 지정
• background-attachment : 이미지 스크롤이나 고정 지정

body{
    background-image:url("back_img.png");
    background-repeat:no-repeat;
    background-position:right top;
    background-attachment: fixed;
}