css 기초
css란
선택자
html에 스타일(css)을 적용하기 위해 html의 특정한 요소를 선택하는 사인(sign)
속성: 값
속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 등 스타일을 지정할 때 사용
태그의 이해관계
태그가 구성 된 구조에 따라 관계가 설정 됨
부모, 자식, 형제 태그를 구분할 수 있어야 함
css 선언방식
태그에 직접 작성하기(인라인)
html에 직접 작성하는 방식으로 선택자가 필요 없음
같은 스타일도 매번 입력해야 하는 단점이 있음
html에 포함하기(내장)
<head></head>태그에 <style>태그로 css를 별도 작성
선택자 필요함
대부분 title태그 아래쪽에 모아서 작성함
태그가 여러 개 있어도 동시에 스타일 지정 가능
html 외부에서 불러오기
css문서를 작성해 스타일을 따로 보관
이 때 반드시 html문서에 css문서를 연결해서 사용해야함 ( <link rel="stylesheet href="css문서경로"> )
여러 개의 html문서에서 동일한 스타일 문서를 사용할 수 있음
css문서 내용은 style태그 작성과 요령이 동일함
css 선택자
태그로 찾기
선택자로 입력하는 부분에 적용하려는(찾으려는) 태그의 이름 입력
클래스/아이디로 찾기
선택자로 입력하는 부분에 적용하려는(찾으려는) 태그의 이름 입력
(id속성과 class속성이 이름표의 역할을 함)
*클래스/아이디 만들 때 주의할 점
반드시 알파벳으로 시작
대·소문자는 서로 다른 대상으로 인식 됨
띄어쓰기 금지
특수 문자는 -와 _만 사용가능
css 연결방식
@import 사용
css @import를 이용하여 외부 문서로 css를 불러와 적용하는 방식
link와 비슷하나 link는 html에 css를 가지고 오는 것이고, import는 css에 css를 가지고 오는 방식
주의사항
import: 직렬방식
link: 병렬방식
css 스타일 적용 우선순위
1. 원천 소스 중 사용자 스타일 시트가 가장 우선함
2. 선택자 우선순위를 계산하여 값이 높은 순서대로 적용함
3. 가장 마직막에 지정된 스타일을 우선적으로 적용함
스타일 적용방법에 따른 우선 순위
스타일속성 > 스타일태그 > css문서
스타일 작성 순서에 따른 우선 순위
나중에 작성된 스타일 > 먼저 작성된 스타일
셀렉터에 따른 우선 순위
자세히 작성된 셀렉터 > 덜 자세히 작성된 셀렉터
css 크기
width
요소의 가로 너비 지정
단위: px(pixels) 사용
height
요소의 세로 너비 지정
단위: px(pixels) 사용
font-size
요소 내용(text)의 글자 크기를 지정