css 기본 문법, 선택자
css는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등의 세 가지 종류가 있다.
● 내부 스타일시트
문서의 표현을 위한 명령들을 html 문서안에 스타일 태그로 기재
<head>
<style type= "text/css"> .............. 스타일 시작
</style> ............ 스타일 끝
</head>
● 외부스타일시트 : link
문서의 표현을 위한 명령들을 따로 css 파일로 저장하여 html문서에 파일명으로 연결해 준다.
<head>
<link rel="stylesheet" type="text/css" href="style.css"/> ...... 스타일 파일명
</head>
● 외부스타일시트 : @import
스타일 태그나 스타일 파일 안에 써준다.
주로 기본 css를 따로 작성하여 각각의 프로젝ㅌ으마다 넣어주어 기본을 따로 작성하지 않아도 된다.
css 가장 위 줄에 넣는다.
<head>
<style type= "text/css"> .............. 스타일 시작
@import url("reset.css");
</style> ............ 스타일 끝
</head>
● 인라인스타일시트
문서의 표현을 위한 명령들을 html 마크업 속성으로 직접 입력해 주는 방식
<body>
<p style= "color: red">shake shake</p>
<style type= "text/css"> .............. 스타일 시작
</style> .............. 스타일 끝
</head>
● id 선택자 : id로 붙인 이름을 가져다 쓰는 선택자 -----> #을 붙여 표기
● class 선택자 : class로 붙인 이름을 가져다 쓰는 선택자 -----> . 을 붙여 표기
● 전체 선택자 : 페이지의 모든 요소를 가리큰 선택자 -----> * 을 붙여 표기
● 자식선택자 : 현재 요소 내의 바로 아래 나오는 요소만을 가리키는 선택자
● 인접선택자 : 현재 요소 밖의 바로 뒤에 나오는 요소만을 가리키는 선택자
● 속성 선택자
h1{class} .............. class 속성이 있는 모든 h1
img{alt} .............. alt 속성이 있는 모든 이미지
*{title} .............. title 속성을 갖는 모든 요소
● 가상 클래스 선택자
a:link .............. 링크된 글자를 보고만 있을 때의 스타일 주는 선택자
a:visited .............. 링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우 스타일 주는 선택자
a:hover .............. 링크 걸린 글자에 마우스가 닿았을 경우 스타일 주는 선택자
a:active .............. 링크 걸린 글자가 활성되었을 때 스타일을 주는 선택자
a:focus .............. 링크 걸린 글자에 포커스가 생길 경우 스타일을 주는 선택자
모두 사용할 경우 위 표의 순서대로 기재해야 한다.
● 수도 클래스 선택자
:first-letter .............. 요소 첫 글자
:first-line .............. 요소 첫 줄
:first-child .............. 같은 요소 중 첫번째 요소
:last-child .............. 같은 요소 중 마지막 요소
:before .............. 요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소
:after .............. 요소의 맨 뒤에 배치하는 마크업에는 없은 가상 요소
● 종속선택자
타입선택자와 아이디(#)/클래스(.) 선택자가 결합된 형태
p.more a { color: red; } 클래스명이 more인 p 태그의 링크 a 색상을 변경함
● 하위선택자
한 선택자 내부에 존재하는 또 다른 선택자
.box li { padding: 5px 0; } ...... 클래스명이 box인 요소 내부의 li에 세로 여백을 준다.
● 그룹선택자
선택자들을 쉼표로 구분하여 여럿을 함께 기술하는 것
h1, p { border: 1px solid #000; } ....... h1과 p 요소에 1px짜리 검은 테두리를 준다.
'코딩배우기' 카테고리의 다른 글
| 2단 레이아웃 연습하기 (0) | 2018.05.18 |
|---|---|
| 로그인 폼 연습하기 (0) | 2018.05.17 |
| CSS3, box-shadow 예제 (0) | 2018.05.09 |
| float 속성 연습 (0) | 2018.05.06 |
| 테이블(Table) 표만드는 요소 (0) | 2018.05.05 |
