/* 셀렉터 { 프로퍼티 : 값; 프로퍼티 : 값;} */
span{ color:blue; font-size:20px;}- 셀렉터, 프로퍼티, 값은 모두 대소문자 구분하지 않는다.
CSS 스타일 시트 작성하는 방법
- <style> </style>태그에 스타일 시트 작성 : head에서만 가능. 여러번 작성 가능. 문서 전체에 적용
- style 속성에 스타일 시트 작성 : 해당 태그에만 스타일이 적용
- 스타일 시트를 별도 파일로 작성하고 <link>, @import 이용해 사용: .css라는 확장자를 가진 파일. 중복 작성 해소.
<head>
<link href="이름.css" type="text/css" rel="stylesheet">
<style>
@import url(이름.css);
</style>
</head>
CSS규칙
- CSS스타일은 부모 요소에서 상속됨
- 스타일 합치기와 오버라이딩: 겹치면 가장 우선수위가 높은 스타일인 style 속성에 지정된 설정이 적용됨
셀렉터: p{내용;}
- 태그 이름
- id 속성이나 class 속성의 값: 셀렉터 이름 앞에 점(.)이 있으면 class 속성으로만 지정 가능. 셀랙터 속성이 id인경우 앞에 #붙여 지정 가능
body.main{}
#list{}
<body class="main">
<ul id="list>- 여러 셀렉터 조합
자식 셀렉터
div > strong{color:dodgerblue;}
자손 셀렉터
div > div > strong {color:dodgerblue;}
전체 셀렉터
*{color:dodgerblue;}
속성 셀렉터: 특정 속성에 대해 값이 일치하는 태그에만 스타일 적용
input[type=text]{color:dodgerblue;}
가상 클래스 셀렉터: 어떤 상황이 발생시에만 적용되도록 css 표준에 의해 만들어짐 셀렉터.
방문한 후부터 a 링크 텍스트 색 변경
a:visited{color:dodgerblue;}
li위에 마우스 올라오면 색 변경
li:hover{color:dodgerblue;}색
- #rrggbb: 16진수 코드로 표현
- rgb(138, 43,226): 10진수 코드와 rgb()로 표현
- red: 색 이름으로 표현
텍스트
- 들여쓰기 text-indent:length, percentage
- 정렬 text-align: left, right, center, justify
- 꾸미기 text-decoration: none, underline, overline, line-through
CSS표준단위
- em 배수
- px 픽셀수
- in 인치
- pt 포인터
- pc 피카소
- deg 각도
폰트
- Monospace: 모든 글자의 폭이 동일한 폰트
- font-family: 폰트 1, 폰트2, 폰트3 ; >> 나열된 순서대로 우선순위
박스모델
- 각 html 태그 요소를 하나의 박스로 보고 html태그를 박스로 다루는 체계
- 콘텐츠
- 패딩: 콘텐츠를 직접 둘러싼 내부 여백
- border: 테두리
- margin(여백): 박스의 맨 바깥 영역
- 고급 테두리 꾸미기: border-radius:50px;
'학교수업 > 웹 프로그래밍' 카테고리의 다른 글
| 5. CSS 고급활용 (0) | 2022.06.07 |
|---|---|
| 4. CSS (0) | 2022.06.06 |
| 웹 프로그래밍 중간고사 복원 (0) | 2022.04.25 |
| ch3. html 문서 구조화와 웹 폼 (0) | 2022.04.20 |
| ch1. 웹 프로그래밍과 HTML5 개요 (0) | 2022.04.19 |
