CSS
CSS 는 Cascading Style Sheets 의 약자로 웹페이지를 꾸미려고 작성하는 코드이다.
CSS 는 HTML 처럼 프로그래밍 언이도 아니고 마크업 언어도 아닌 Style sheet 언어이다.
CSS 구조
body { color: red; font-size: 30px; }
body : 셀렉터(Selector)
{ } : 선언블록 (Declaration block)
color: red; : 선언 (Declaration)
color : 속성명 (Property)
red : 속성값 (Property Value)
CSS → HTML 적용방법
HTML 에 CSS 를 적용시키는 방법은 3가지가 있다.
1. Inline Style Sheet
HTML 태그의 style 속성에 CSS 코드를 넣는 방법이다.
ex) <p style="color: blue">My New Car</p>이 방법은 꾸미는데 한계가 있고 재사용이 불가능하다는 단점이 있다.
2. Internal Style Sheet
HTML 문서 안의 안에 CSS 코드를 넣는 방법이다.
<style> h1 { color: blue; } </style>이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나
또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다.
3. LInking Style Sheet
별도의 CSS 파일을 만들고 HTML 에 link 태그를 이용하여 CSS 파일을 불러오는 방법이다.
<link rel="stylesheet" href="index.css" />h1 { color: red; }분리를 통해 깔끔하게 유지보수를 쉽게 할 수 있다는 장점을 가지고 있다.
id 와 class 의 차이
id 와 class 셀렉터는 특정 요소를 대상으로 스타일을 적용하기 위함이다.
id
- ' # ' 으로 선택
- 한 문서에 단 하나의 요소에만 스타일 사용가능
- id 가 class 보다 우선순위가 높다
class
- ' . ' 으로 선택
- 한 문서에 여러번 사용가능
절대단위 & 상대단위
수치를 정하는 속성의 크기는 상대단위와 절대단위로 구분된다.
절대단위
규격이 정해져 있는 단위를 의미하며, 출력장치의 물리적 속성을 아는 경우 효율적이다.
- 절대단위에는 in, cm, mm, pt, pc 등등이 있다.
- 1pc = 12pt
- 1in = 2.54cm
상대단위
고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 단위를 의미하며
다양한 플랫폼이 등장한 지금 그 플랫폼 간의 호환성을 유지하는데 유리하다.
- em : 상위 요소 크기의 몇 배인지로 크기를 정한다.
- ex : 소문자 x 의 높이를 1로 한다.
- px : pixel 표시장치(모니터)에 다라서 상대적인 크기를 가짐.
- % : 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
CSS 박스 모델
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표한한다.
하나의 박스는 네 부븐(영역)으로 이루어져 있고 각 영역을 contents 영역, padding 영역, border 영역, margin 영역이라 부른다.
margin
네 방향 바깥 여백 영역을 설정한다.
- margin: 1em;
한 개의 값은 모든 네 면의 여백을 설정 - margin: 5% auto;
두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 좌우 여백을 설정한다. - margin: 1em auto 2em;
세 개의 값을 지정하면 천 번째는 위, 두 번째는 좌우, 세 번째는 아래 여백을 설정한다. - margin: 2px 1em 0 auto;
네 게의 값을 지정하면 각각 상우하좌 순서(시계방향)로 여백을 지정한다.
padding
네 방향 안쪽 여백 영역을 설정한다. (margin 과 값 설정 동일)
box-sizing
box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
CSS 박스 모델의 기본값에서 지정한 너비와 높이는 요소의 컨텐츠 박스 크기에만 적용된다.
요소에 border 이나 padding 값이 있으면 그 값이 너비와 높이에 더해저 화면에 나타난다.
따라서 크기를 설정할 때, 원하는 크기를 얻으려면 border, padding 값을 고려해야 한다.
box-sizimg 속성을 사용해 이 방식을 바꿀 수 있다.
content-box
- CSS 표준이 정의한 초기 기본값. width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않는다.
.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px
border-box
- width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않는다.
.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px
CSS 자주 쓰는 속성
color
글자의 색상을 설정한다.
ex) color: red; color: #555555; color: #961f1f;
font
글자의 폰트를 설정한다.
- font-weight : 텍스트 굵기를 설정한다.
ex) font-weight: bold; // 굵게 font-weight: normal; // 일반 굵기 font-weight: bolder; // 가장 굵게
- font-style : 텍스트 기울임을 설정한다.
ex) font-style: italic;
- font-family : 글씨체를 설정한다.
ex) font-family: "Nanum Gothic";
border
텍스트 및 블록의 외부에 선을 그릴 때 사용한다.
구조 : border: font-width font-style font-color;ex) border: 1px solid #ccc; // 굵기(1px) 선스타일(실선) 색상(#ccc)
- font-style 에 들어갈 수 있는 값
- solid : 실선
- dashed: 일반 점선
- dotted: dashed 보다 좁은 점선
- double: 두 줄로 구성된선 (3px 이상 굵기부터 표현됨)
- groove: 그림자 적용된 선
- inset: 그림자 적용된 선 (안쪽)
- outset: 그림자 적용된 선 (바깥쪽)
- ridge: 튀어나온 느낌의 선 (2px 이상 굵기부터 표현됨)
background
블록이나 텍스트의 배경을 지정할 때 사용한다.
다양한 속성을 한꺼번에 적용시킬 수 있다.
하지만 적용된 옵션의 가독성 향상을 위해 속성을 개별적으로 지정해 주는 것이 좋다.// 01. 한번에 적용 // .class { background: url(./image/sdfasdfasdf.jpg) no-repeat 50% 50% } // 02. 개별적으로 적용 // .class { background-image: url(./image/sdfasdfasdf.jpg); background-repeat: no-repeat; background-position: 50% 50%; }
- background 내부 속성
- background-color: 배경색 지정
- background-image: 배경이미지 지정
- background-position-x: 배경이미지의 가로 위치 지정
- background-position-y: 배경이미지의 세로 위치 지정
- background-repeat-x: 배경이미지의 가로 반복여부 지정
- background-repeat-y: 배경이미지의 세로 반복여부 지정
