221108 화요일
CSS의 기본
CSS
- HTML : 웹문서 기본 골격
- CSS(Cascading Style Sheets) : 웹문서 디자인 구성
- 브라우저 기본 스타일
- 태그 스타일 지정(인라인 스타일)
<태그 style="속성:값;">- head안에 style 안에 스타일 지정 (내부 스타일 시트)
<head>
<style type="text/css">
태그대상{
속성: 값;
}
</style>
</head>- 파일에 style 스타일 지정 → 파일 가져와서 적용(외부 스타일 시트)
<link rel="stylesheet" href="파일이름">CSS 기본선택자 (대상선택)
- '*' 전체선택
*{
속성: 값;
}- 태그선택
태그{
속성: 값;
}- id=표시이름 #표시이름
<태그 id=표시이름>
#표시이름{
속성:값;
}- class=표시이름 .표시이름
<태그 class=표시이름>
.표시이름{
속성:값;
}5.같은 스타일 적용
태그1,태그2{
속성: 값;
}스타일 우선 순위
- 중요도
웹브라우저에 내용을 표시할 때 단순히 css 소스의 스타일만 적용되는 건 아니다.
아래 3가지 스타일을 함께 사용하는데, 그 중요도는 아래와 같다.
① 유저, 사용자가 스타일 지정 (사용자 설정 바꿈)
② 웹페이지 제작자 스타일 지정 (웹개발자 설정)
③ 브라우저 기본 스타일 지정 (브라우저 회사 설정)
- 케스케이딩 : CSS에서 C는 Cascading의 줄임말이며, 스타일 시트에서는 우선 순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다.
①스타일 우선순위 : 중요도와 적용 범위에 따라 우선수위 결정
②스타일 상속: 태그 포함관계에 따라 부모→자식 스타일 적용
- 스타일 적용범위(작은 범위가 우선, 마지막 우선)
① ! important
② 인라인 스타일(태그에 스타일 적용)
③ id 스타일
④ class 스타일
⑤ 태그 스타일
텍스트를 표현하는 다양한 스타일
글꼴
태그{
font-family: 글꼴이름;
} body{
/ 글자체 /
font-family: "돋움","굴림","궁서";
글자크기
태그{
font-size: 숫자 단위; --> ( 여기서 ctrl+spacebar 누르면 종류가 나옴!)
}-
글자크기 단위
① px : 픽셀
② pt : 포인트,
③ em : 대문자 M의 너비기준(1em)
④ ex : 소문자 x높이기준(1ex)
⑤ % : 백분률 -
키워드를 사용하여 글자 크기 지정하기
xx-small < x-small < small < medium < large < x-large < xx-large
글자스타일
태그{
font-style: 글씨스타일;
}/ 글자스타일 normal, italic 기울임/
font-style: italic;
글자 굵기
태그{
font-weight: 글자 굵기 종류나 숫자;
}- 숫자(100~900) : 100이 가장 가늘게, 900이 가장 굵게
/ 글자굵기 normal, bold 굵게, bolder 좀더 굵게 , lighter좀더 가늘게, 100~900/
font-weight: 100;
}
