<unifox 과제> [CSS] 예습

▶ css 선택자

 

선택자란 html을 사용한 파일에서 css 스타일을 적용할 요소를 뜻합니다.

 

아래와 같이 스타일이 반영되는 대상이 선택자입니다. (div)

div { color : red;}
선택자 {송석 : 속성값;}

 

<구분이 어려운 선택자>

다른 선택자의 비해 구분이 어려운 선택자들을 정리해보려 합니다.

종류는 아래와 같습니다.

 

● 자식 선택자 (>)

●하위 선택자(공백)

●인접 형제 선택자(+)

●일반 형제 선택자(~)

 

<자식 선택자와 하위 선택자>

먼저 자식 선택자와 하위 선택자는 calss 유무 이외에는 동일한 코드입니다.

하지만 동일한 코드라고 해서 같은 값을 주었을 때 같은 결과가 나오는 것은 아닙니다.

 

자식 선택자는 선택자 기준으로 들여 쓰기가 한번 차이나는 자식에게만 속상값을 주고

하위 선택자는 자신의 지식 요소 이외에 자식의 자식 요소에게도 속성값을 주기 때문에 다른 결과를 볼 수 있습니다.

 

<인접 형제 선택자와 일반 형제 선택자>

인접 형제 선택자는 형제 중 자신과 가장 가까이 있는 형제를 말합니다.

가장 가까이 있는 하나의 형제에게 스타일이 적용됩니다.

 

일반 형제 선택자는 자신과 형제인 모든 요소들을 말하는데

선택자보다 나중에 작성된 html코드에만 속성값이 적용되게 됩니다.

 

▶CSS Text 태그

 

1 글자와 단어의 스타일

 

1) color : 글자색 지정하기

(문단, 제목 등의 텍스트 글자색을 바꿀 때 사용합니다.)

 

2) text-decoration:텍스트 줄 표시하기/ 없애기

(하이퍼링크에 기본적으로 생성되는 밑줄을 없앨 때 많이 사용합니다.)

 

[속성값[

none:밑줄을 표시하지 않는다.

underline:밑줄을 표시한다

overline:영역 위로 선을 그린다.

line-through:취소선을 그린다.

ex)
<style>
a[text-dcoration;none;}
<style>
=a 태그로 하이퍼링크 부분의 밑줄 제거

3) text-transform : 텍스트 대소문자 변환하기

[속성값[

none:변환없음

capitalize:시작하는 첫 번째 글자를 대문자로 변환

uppercase:모든 글자를 대문자로 변환

lowercas:모든 글자를 소문자로 변환

full-width:가능한 모든 문자를 전각 문자로 변환

 

*전각문자란 : 고정 폭 영문자 너비의 두 배 정도 너비의 문자이며, 전각 문자 너비의 절반 정도 너비인 문자는 반각문자라고 합니다.

 

4) text-shadow:텍스토 그림자 효과

text-shadow:<가로거리> <세로거리> <번짐> <색상>

<가로거리>:그럼자의 가로거리, 오른쪽(+) 왼쪽(-)

<세로거리>:그림자의 번짐 정도. 모든 방향으로 퍼짐(+) 모든 방향으로 축소(-)

<색상>:그림자 색상 지정. 공백으로 구분해서 여러 가지 색상 지정 가능. 기본값은 현재 글자색.

 

ex) text shadow:3px 7px 0px black;

가로로 3px 세로로 7px 퍼짐 정도 0px 색상 검정의 그림자 생성.

 

5) white-space:공백 처리하기

텍스트 안에 포함된 공백을 한꺼번에 처리하는 택.

 

[속성값]

normal:여러 공백을 하나로 표시. 기본값.

 

nowrap:여러 공백 하나로 표시 줄 바꿈 없이 한 줄

pre-line:여러 공백 하나로 표시, 자동으로 줄 바꿈.

pre:여러 공백 그대로 표시, 줄바꿈 없이 한 줄로 표시

pre-wrap:여러 공백 그대로 표시 자동으로 줄 바꿈