-
[소소한컴퓨터공부] CSS 쉽게 배우는 HTMLS & CSS & JavaScript소소한이야기 2021. 1. 9. 17:31728x90반응형
쉽게 배우는 HTMLS & CSS & JavaScript
최옥경 지음
CSS Cascading Style Sheet
CSS 정의
하콤 비움리가 1994년에 제안한 것으로 마크업 언어가 실제로 화면에 표시되는 방법을 기술한 언어다
마크업 언어가 웹 페이지 전체적인 구조를 담당한다면, CSS는 세부적으로 글꼴의 색상, 크기 등과 같은 요소를 꾸며주는 역할을 담당한다
반복되는 속성(태그의 특성을 정의할 수 있는 요소)을 지정해 주는 것, 즉 웹 페이지의 전반적인 스타일을 지정해 주는 것으로 문서 전체의 일관성과 통일성을 가져온다
CSS 구조
H1 { color:darkblue; }
하나 이상의 지정자와 하나 이상의 “속성:값”의 선언 블록으로 구성
지정자 : CSS를 적용할 범위를 지정할 때 사용한다
속성 : color, font-family 등이 속성, “;”을 이용해서 추가해 준다
값 : blue는 color의 값
속성
Color 글꼴 색 color: navy;
Font-size 글자 크기 font-size: 20pt;
Font-family 글꼴 font-family: 궁서체;
Font-style 글꼴 스타일 font-style: normal; , font-style: itlalic;
Font-weight 글꼴 두께 font-weight: bold;
100~900 사이의 숫자 또는 lighter (100), normal (400), bold (700), bolder (900) 설정
Background-color 배경 색 background-color: yellow;
Background-image 배경 이미지 background-image; url (imagebg1.gif);
Background-repeat 배경 이미지 반복 여부
Background-repeat: no-repeat; , background-repeat: repeat; , background-repeat: repeat-x;
Background-repeat: repeat-y;
Background-size 배경 이미지 크기(너비와 높이) background-size: 300px 300px; (너비와 높이 사이즈를 픽셀값으로 지정)
Background-size: 80% 80% (너비와 높이 사이즈를 백분율로 지정)
Background-size: cover; (웹브라우저 사이즈 안쪽에 위치하도록 배경 이미지 조정)
Background-position 배경 이미지 위치
Background-position: center; (left, top, center, bottom, right 등 사용 가능)
Background-position: 30px 30px; (띄어쓰기를 기준으로 x좌표, y좌표 지정 가능)
예.
style type=”text/css”
Bosy {
Background-image:url(../image/bg.jpg);
Background-repeat:no-repeat;
Background-position: center;
Background-size; 50% 50%;
}
/style
반복하여 자주 사용하는 색상, 글꼴 및 글꼴 타입을 관리하기 편하게 모아 놓은 것을 스타일시트라고 한다
style type=”text/css”
H1 { color:darkblue; font-family:고딕체; font-style: italic; }
H2 { color:blue; font-family:굴림체; font-style:bold; }
/style
Style 속성 이용하기: 특정한 태그에 한 번만 스타일을 적용할 때
Style 속성 이용하기: 특정한 id에 한 번만 스타일을 적용할 때
#h {color:darkblue; font-family: 고딕체; font-style:italic}
Style 속성 이용하기: 특정한 class에 스타일을 적용할 때
#h {color:darkblue; font-family: 고딕체; font-style:italic}
.h2 {color:red; font-family:궁서체; font-style:italic}
외부 스타일시트 연결하기
LINK rel=”stylesheet” type=”text/css” href=”style.css”}
<!doctype html>
728x90반응형'소소한이야기' 카테고리의 다른 글
[소소한책읽기] 제가 좀 숫자에 약해서 (0) 2021.01.28 [소소한책읽기] 아웃워드 마인드셋 (0) 2021.01.27 [소소한책읽기] 개인의 능력을 극대화하는 자기경영 (0) 2021.01.18 [소소한책읽기] 라플란드인의 노래 (0) 2021.01.09 [소소한책읽기] 하나님의 말씀 _ 성경, 정경, 외경 (0) 2021.01.03 [소소한책읽기] 우리는 주님의 것입니다, 키에르케고르의 기도 (0) 2021.01.02 [소소한책읽기] 맛있는 요리에는 과학이 있다 (0) 2020.12.28 [소소한책읽기] 농수산물품질관리법 및 시행령 (0) 2020.12.27