CSS는 HTML 문서의 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다.
CSS로 작성된 코드를 스타일 시트라 부른다.
셀렉터와 태그
셀렉터: CSS 스타일 시트의 이름이나 규칙
스타일 시트 블록
: CSS3 스타일 시트는 중괄호{ }를 이용해 작성
프로퍼티와 값
: 각 스타일은 '프로퍼티: 값'의 쌍으로 표현되며 세미콜론(;)으로 구성
대소문자 구분 없음
: 셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않음
<link>태그 이용
: <head>에서만 사용 가능하고 종료 태그가 없음.
<link rel="stylesheet" href="style.css" />
CSS3 스타일은 부모 태그로부터 상속된다
<p style = "color:green">안녕하세요 <em style = "font-size:25px">자식입니다</em> </p>
위의 코드에서 <em>태그는 <p> 태그의 자식이다. <em>태그는 글자 크기를 25px로 출력되지만 부모의 스타일 요소를 상속받아 글자색이 green 색으로 출력된다.
HTML 전체 태그에 적용시키고 싶은 스타일이 있다면 body태그에 작성하면 된다.
박스 모델
padding
: 콘텐츠를 직접 둘러싸고 있는 여백
div { padding-top: 20px; padding-right: 10px; padding-bottom: 50px; padding-left: 30px; }
padding 영역을 위와 같이 각각 표시해줄 수 있지만 모든 padding 속성을 한 줄로 표현 가능하다.
div.pad4 { padding: 20px 50px 30px 50px; } div.pad3 { padding: 20px 50px 30px; }
border
: padding 외부의 외곽선
: 직선이나 점선 혹은 이미지로 입힐 수 있음
margin
: 박스의 맨 바깥 영역
: 테두리 바깥 공간으로 아래 위 인접한 태그와 만나는 공간
width
: 크기 관련 프로퍼티
: 콘텐츠의 너비를 나타냄
height
: 박스 크기 제어하는 프로퍼티
: 콘텐츠의 높이를 나타냄
배경
background-color
body{ background-color: black; }
background-image
body{ background-image: url("image.png"); }
폰트
font-family
: 구체적인 폰트 이름 지정
: 폰트가 브라우저에서 지원되지 않을 경우를 대비해 여러개의 폰트를 지정하여 나열된 순서대로 폰트가 선택되도록 함.
font-family: Arial, "Times New Roman", Serif;
만약 폰트 이름에 공백이 있다면 " "로 묶어 표현한다.
font-size
: 글자 크기를 지정하는 프로퍼티
font-style
: 폰트 스타일을 나타내어 normal, italic, oblique 중 하나를 지정할 수 있음.
font-weight
: 글자 굵기를 지정하는 프로퍼티
: 100 ~ 900사이 값으로 표현 가능
: 혹은 normal(400), bold(700), bolder, lighter로 표현 가능
font
: 폰트 지정하는 단축 프로퍼티
: font-style, font-weight, font-size, font-family순서로 설정
color
: 글자 색 지정
색상명
: red, blue 등 약 140가지의 브라우저에 미리 정의된 색상 이름으로 표현
RGB 값
: rgb(red, green, blue) 형식으로 색 표현
: red, gree, blue 변수는 0~255 사이의 정수 입력하거나 백분율 값으로 표현
RGBA 값
: rgb에서 불투명도를 지정하는 속성이 추가된 표현
: rgba(red, green, blue, alpha)로 alpha는 0.0(투명) ~ 1.0(불투명)으로 표현
HEX 값
: #RRGGBB 형식의 16진수 색상 값으로 표현
: 16진수는 00 ~ FF사이 값으로 표현
[CSS] 가장 기본적인 사용
CSS는 HTML 문서의 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다.
CSS로 작성된 코드를 스타일 시트라 부른다.
스타일 시트 구성
셀렉터와 태그
셀렉터: CSS 스타일 시트의 이름이나 규칙
스타일 시트 블록
: CSS3 스타일 시트는 중괄호{ }를 이용해 작성
프로퍼티와 값
: 각 스타일은 '프로퍼티: 값'의 쌍으로 표현되며 세미콜론(;)으로 구성
대소문자 구분 없음
: 셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않음
HTML에서 CSS 파일 불러오기
<link>태그 이용
: <head>에서만 사용 가능하고 종료 태그가 없음.
CSS3 규칙
CSS3 스타일은 부모 태그로부터 상속된다
위의 코드에서 <em>태그는 <p> 태그의 자식이다. <em>태그는 글자 크기를 25px로 출력되지만 부모의 스타일 요소를 상속받아 글자색이 green 색으로 출력된다.
HTML 전체 태그에 적용시키고 싶은 스타일이 있다면 body태그에 작성하면 된다.
CSS 프로퍼티 예시
박스 모델
padding
: 콘텐츠를 직접 둘러싸고 있는 여백
padding 영역을 위와 같이 각각 표시해줄 수 있지만 모든 padding 속성을 한 줄로 표현 가능하다.
border
: padding 외부의 외곽선
: 직선이나 점선 혹은 이미지로 입힐 수 있음
: width style color;
: 3px solid black;
: none, hidden, dotted, solid, ridge 등
: 3px, 10px 등
border-top-style
border-top-width
border-top-color
margin
: 박스의 맨 바깥 영역
: 테두리 바깥 공간으로 아래 위 인접한 태그와 만나는 공간
width
: 크기 관련 프로퍼티
: 콘텐츠의 너비를 나타냄
height
: 박스 크기 제어하는 프로퍼티
: 콘텐츠의 높이를 나타냄
배경
background-color
background-image
폰트
font-family
: 구체적인 폰트 이름 지정
: 폰트가 브라우저에서 지원되지 않을 경우를 대비해 여러개의 폰트를 지정하여 나열된 순서대로 폰트가 선택되도록 함.
만약 폰트 이름에 공백이 있다면 " "로 묶어 표현한다.
font-size
: 글자 크기를 지정하는 프로퍼티
font-style
: 폰트 스타일을 나타내어 normal, italic, oblique 중 하나를 지정할 수 있음.
font-weight
: 글자 굵기를 지정하는 프로퍼티
: 100 ~ 900사이 값으로 표현 가능
: 혹은 normal(400), bold(700), bolder, lighter로 표현 가능
font
: 폰트 지정하는 단축 프로퍼티
: font-style, font-weight, font-size, font-family순서로 설정
color
: 글자 색 지정
CSS에서 색상 표현
색상명
: red, blue 등 약 140가지의 브라우저에 미리 정의된 색상 이름으로 표현
RGB 값
: rgb(red, green, blue) 형식으로 색 표현
: red, gree, blue 변수는 0~255 사이의 정수 입력하거나 백분율 값으로 표현
RGBA 값
: rgb에서 불투명도를 지정하는 속성이 추가된 표현
: rgba(red, green, blue, alpha)로 alpha는 0.0(투명) ~ 1.0(불투명)으로 표현
HEX 값
: #RRGGBB 형식의 16진수 색상 값으로 표현
: 16진수는 00 ~ FF사이 값으로 표현
'Front-End > CSS' 카테고리의 다른 글