Style 태그 : 적용할 css를 작성하는 태그
css 기본 선택자
css란?
Cascading Style Sheets 약자
HTML 같은 마크업 언어에 종속되어 레이아웃과 스타일을 정의하는 자유도 높은 마크업 언어
선택자란?
특정한 HTML 태그를 선택할 때 사용하는 기능으로
원하는 태그를 선택하여 스타일, 기능을 적용할 수 있음
@모든(전체) 선택자
HTML 문서 내 모든 태그를 선택하는 선택자
-> '*' 기호 사용
*{}
@태그 선택자
HTML 문서 내에 같은 태그를 모두 선택하는 선택자
p{}
@아이디 선택자
HTML 문서 내에 해당하는 아이디를 속성으로 가진 태그만 선택할 때 사용하는 선택자
#아이디값{}
# : 아이디를 나타내는 기호
@클래스 선택자
HTML 문서 내에 여러 태그를 한번에 지저하여 선택할 때 사용하는 선택자
@반응 선택자
사용자의 움직임에 따라 동작을 하는 선택자
-사용자가 클릭한 경우 : 선택자:active{설정 내용}
-사용자가 마우스를 태그 위에 올려두는 경우 : 선택자:hover{설정 내용}
@기본 속성 선택자
기본 선택자 뒤에 [속성=속성값]의 형식으로 작성
@자손 선택자와 후손 선택자
자손 선택자 : 선택자>자손선택자{설정내용}
-> 선택자의 바로 하위 레벨 요소(태그)를 지정
후손 선택자 : 선택자 후손선택자{설정내용}
-> 선택자의 모든 하위 레벨 요소 지정
@동 위 선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
-바로 뒤에 요소 하나 선택
선택자a + 선택자b{설정 내용}
-뒤에 있는 모든 요소 선택
선택자a ~ 선택자b{설정 내용}
@상태 선택자
입력양식의 상태에 따라 선택되는 선택자
-체크 상태 선택자
input태그선택자 : checked{설정내용}
@포커스 선택자
#inputId:focus, #inputPwd:focus{
background-color:컬러색;
@사용 가능 여부 선택자
-사용가능한 input태그 선택
input태그선택자:enabled{설정 내용}
-사용불가능 input태그 선택
input태그선택자:disabled{설정 내용}
@일반 구조 선택자
특정한 위치에 있는 태그 선택(위치로 구분)
#test1 p:first-child//첫번째
#test1 p:last-child//마지막
*선택하고자 하는 형제관계에 있는 태그가 가장 마지막에 있어야함
#test1 p:nth-child(2n)//앞에서 짝수
#test1 p:nth-last-child(4n)//뒤에서 4번째짝수
@형태 구조 선택자
특정한 위치에 있는 태그 선택(태그별로 구분)
#test2 p:first-of-type//첫번째
#test2 p:last-of-type//마지막
#test2 p:nth-of-type(2n)//앞에서 수열번째
#test2 p:nth-last-of-type(4n)//뒤에서 4번째
@부정 선택자
#test3 p:not(:nth-of-type(2n-1))
-------------------------------------------------------------------------------
선택자우선순위
기본적으로 CSS는 위에서 아래로 순서대로 적용되지만
같은 태그 여러 CSS가 설정된 경우에 우선순위를 따름
태그 선택자<클래스선택자<아이디선택자<인라인스타일<!important
---------------------------------------------------------------------------
글꼴관련스타일
font-family 속성 : 텍스트의 글꼴 지정 속성
선택자{ font-family: "글꼴이름", "2순위이름", ...}
@웹 폰트 사용하기
구글 웹폰트 제공 사이트 :
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<head>에 링크걸어두고 <style>창에 font-family:폰트명; 넣으면됨
@나머지 글꼴 스타일
font-size : 텍스트 크기변경
속성 : px, em, %
font-weight : 텍스트 두께 변경
속성 : bold, lighter, bolder
@font 속성@
위 작업들을 한번에 할수 있지만 가독성이 떨어짐
font : 크기/장평/ "글시체"
font: 기울기 두껍게 크기/장평 "글씨체"
-------------------------------------------------------------------------------------
텍스트 스타일
@ color 속성
텍스트 색상 지정
-16진수 숫자
color : #ff0000
-rgb값
color : rgb(255,0,0)
-rgb값 + 투명도
color : rgb(255,0,0,0.5)
@ text-decoration 속성 : 텍스트에 밑줄, 삭제선 등을 긋거나 없애는 속성
{text-decoration: none;} : 하이퍼링크밑줄지우기
{text-decoration: line-through;} : 삭제선
{text-decoration: underline;} : 밑줄
{text-decoration: overline;} : 윗줄
@text-shadow 속성
{text-shadow : 5px 5px gray}
----------------------------------------------------------------------------------
문단 스타일
@text-align 속성 : 정렬
center, left, right, justify
@line-height 속성 : 장평
px
-------------------------------------------------------------------------------------
목록 스타일
@ 불렛 모양 변경
#test1{ list-style-type : circle; }
@ 불렛 모양 없애기
#test2 { list-style-type : none; }
@ 불렛 기호 대신 이미지 삽입
#test3 { list-style-image : url("경로");}
-------------------------------------------------------------------------------------
배경 스타일
@ 페이지 전체 배경색 설정
body{background-color : 색상명}
@ 페이지 배경 이미지 설정
body{background-image : url(경로);}
@ 페이지 배경 크기 설정
body{background-size : 100% 100%;}
@ 페이지 배경 반복 여부 설정
body{background-repeat : no-repeat;}
@ 배경 이미지 위치
body{background-position : 50% 0%;} (가로 세로)
'study > CSS3' 카테고리의 다른 글
| 5_css3_(명령어정리) (0) | 2020.01.04 |
|---|---|
| 4_css3_(기본정리) (0) | 2020.01.03 |
| 3_css3_(웹문서 기본 구조 만들기, 가운데 정렬) (0) | 2019.12.18 |
| 2_css3_(레이아웃스타일,트랜지션) (0) | 2019.12.17 |