웹개발기초 5주차

<span> 텍스트

 ex) span { color : blue; font-size : 20px; }

CSS3 스타일 시트 구성

1.셀렉터(selector) tag, ID, class

ex) span

1)태그 이름 셀렉터

ex) h3, li { color : brown; }

2)id 셀렉터 <-유일한 태그에 css 설정

- #으로 시작

ex) #list { background : brown; }

3)class 셀렉터 <-여러 태그(집합)에 css 설정

- .으로 시작

.warning { color : red; }

body.main { background : red; }

 

2.프로퍼티(property)

ex) color

3.값(value)

ex) blue

4.주석문(comment)

5.대소문자 구분X

 

CSS3스타일 시트 만들기

1.<style>...</style>태그 작성(head 내)

2.style 속성에 시트 작성 (태그 내 style)

ex) <p style = "color : magenta; font-size :30px "> </p>

3.스타일 시트 별도 작성(*.css)

<link>, @import로 불러 사용

<link href="mystyle.css" type="text/css" rel="stylesheet"> <-선호(관리,속도)

@import url(mystyle.css);

 

스타일 상속

<p style="color:green">하이 //부모

<em style="font-size:25px">자식</em> //자식 

</p>

p태그는 em의 부모 태그

 

스타일은 여러 번 사용이 가능한데

우선순위가 존재한다.

style  속성 > style 태그 > external.css > 브라우저 디폴트 스타일

태그가 겹칠 경우 우선순위따라 오버라이딩

겹치지 않는 경우 모두 합침

 

CSS 태그

- background-color 배경색

- color 텍스트 색

- margin-left 왼쪽 공간 비우기

- margin-right 오른쪽 공간 비우기

- text-align : center 문자 정렬

 

셀렉터 조합

1.자식 셀렉터 <- >로 구분

div > strong { color : dodgerblue; }

=> div의 직계 자식인 strong에 적용되는 스타일 시트

2. 자손 셀렉터 <-스페이스 바로 구분

ul strong { color : red; }

=> ul의 자손 strong에 적용되는 스타일 시트

 

전체 셀렉터

ex) * { color : green } <- *(와일드 문자)를 사용하여 모든 태그 적용

속성 셀렉터

-HTML 태그의 특정 속성에 값이 일치할 경우 스타일 제공

ex) input[type=text] {color : red; }

 

가상 클래스(pseudo-class) 셀렉터 : 어떤 조건이나 상황에서 스타일 적용하도록 만든 셀렉터

ex) a:visited {color :green;} <-콜론사용 (방문한 링크 텍스트 색 green 출력)

 

CSS3 에서의 색 표현

1) 16진수 00~FF ex) div { color : #8A2BE2; }

2) 10진수 코드 RGB()로 표현 ex) div { color : rgb(138,43,226); }

3) 색 이름으로 표현 ex) div { color : blueviolet; }

 

색 관련 프로퍼티

1. color : 색 (글자)

2. background-color : 색 (배경)

3. border-color : 색 (테두리)

 

텍스트 꾸미는 CSS3 스타일 시트

1.text-indent : <length>|<percentage>; (들여쓰기) ex) text-indent : 3em (3글자)

2.text-align : left|right|center|justift(양쪽); (정렬)

3.text-decoration : none|underline|overline|line-through; (텍스트 꾸미기)

 

css3의 표준 단위

1.em 배수(현재의 배수)

2.% 퍼센트

3.px 픽셀 수

4.cm 센티미터

5.mm 밀리미터

6.in 인치

7.pt 포인터

8.pc 피카

9.deg 각도

 

폰트 제어 CSS3 프로퍼티

1.폰트 스타일(font-style) 1.normal 2.italic 3.oblique

2.폰트 굵기(font-weight) 1.100~900 2.normal(400) 3.bold(700)

3.폰트 크기(font-size) 1.40px, 80% 2.small, medium, large, smaller, larger 3. em->rem(root element)

em은 현재 폰트의 배수 rem은 원래 폰트 사이즈를 기준으로 배수

4.폰트 패밀리(font-family) font-family : Arial, "Times new Roman", Serif:

Arial로 지정하는데 폰트가 없으면 Times new Roman을 그 마저 없으면 Serif로 폰트 지정

 

폰트의 단축 프로퍼티 font

font : font-style font-weight font-size font-family 콤마 없이 스페이스로 구분 font size,family 외 생략가능

 

CSS3의 박스 모델

- 각 HTML 태그 요소를 하나의 박스로 다룸

1. 여백 margin (박스 맨 밖)

2. 테두리 border (패딩 외부 테두리)

3. 패딩 padding (콘텐츠를 둘러싸는 내부 여백)

4. 콘텐츠 contents (HTML 태그의 텍스트나 이미지가 출력)

 

박스모델

p{ border : 3px dotted blue; }

 

둥근 모서리 테두리 만들기

border-radius : 50px;

border-radius : 0px 20px 40px 60px <-시계방향 순으로 적용

 

이미지 테두리 만들기

border-image : url("border.png") 30 round;

round : edge 이미지 반복 배치 테투리 길이만큼

repeat : edge 이미지 반복 배치

stretch : edge 이미지 테두리 길이만큼 늘여 배치

 

배경 다루기

- background-color, background-image (둘 다 지정되면 배경 이미지가 출력되지 않는 곳에 배경색 출력)

배경 이미지 위치 : background-position : center center (좌우 상하)

배경 이미지 반복 출력 : background-repeat : repeat-y (repeat-x는 좌우 반복)

background 단축 프로퍼티

- background : color image position/size repeat_origin (color, image 둘 중 하나 필수)

 

시각적 효과 : 텍스트 그림자 text-shadow

text-shadow : h-shadow v-shadow blur-radius color|none

h-shadow : 원본텍스트와의 수평 거리 h-shadow : 수직거리 <-필수

blur-radius : 흐릿한 그림자 만들기 (번지는 길이) <- 선택

color : 색

none : 그림자 효과 없음

 

마우스 커서 제어 : cursor

cursor : value