CSS
CSS(Cascading Style Sheets)
CSS(Cascading Style Sheets): html웹 문서의 스타일을 표현하는 언어로 HTML 코드로 작성 된 웹 요소들이 어떻게 표시되어야 할지를 정의한다.
CSS 구성 요소 : 선택자 (selector, CSS속성, CSS속성값)
CSS구조
화면 상의 HTML로 이루어진 요소에 대응하여 스타일 세트를 각각 적용한다.
CSS 선언 방법
inline 선언
각 html태그 내부에 직접 style 속성을 이용해서 선언한다.
<div style="border-bottom : solid 1px red></div>내부 스타일 선언
같은 html파일 내에 style 태그를 사용해서 태그 내부에 선언한다. 보통 head 태그 내에 style태그를 작성한다. 선택자라는 문법을 사용해서 문서 내의 요소를 선택하여 스타일을 지정한다.
<head>
<style>
body {
font-size : 10pt;
}
</style>
</head>
<body>
</body>외부 스타일 선언
내부 스타일 선언에 선언된 스타일 세트들을 외부 파일 (.css)에 선언 후 link태그로 html에 적용시킨다.
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>사실상 link태그의 type까지는 고정이다.
주석 사용
css 코드는 주석을 /**/로 사용한다.
/* 주석처리된 문장 */폰트 스타일 속성과 색상
글자와 관련된 스타일들
색 표현
hexcode, rgb, rgba
hexcode : 빛의 삼원색을 두 칸씩 16진수 6자리로 표현한 코드
000000 ~ ffffff
또한 10진수로도 표현 가능하다.
rgb(0, 0, 0) ~ rgb(255, 255, 255)
혹은 투명도를 표현하려면 rgba를 사용한다.
rgba(0, 0, 0, 0) ~ rgba(255, 255, 255, 1.0)
폰트의 크기와 단위
폰트
폰트는 폰트명을 직접 작성함으로써 지정한다. 하나의 글씨에 이름이 여러 단어로 이루어져 있다면 쌍따움표로 묶어주고 아니면 그냥 기술한다.
또한 가장 먼저 서술된 폰트가 없다면 그 뒤의 폰트가 적용되도록 설정한다. 내가 지정한 폰트가 다 없을 경우 알아서 선택하도록 serif, sans-serif, cursive, monospace 중 특성을 가진 폰트를 알아서 선택하도록 할 수 있다.
/* 1차 선택 2차 선택 3차 선택*/
font-family : "Times New Roman", Times, serif;접속하는 사용자의 컴퓨터에 특정 폰트가 없을 수 있기 때문에 1차 ,2차 ,3차 를 거쳐 적용한다.
크기의 단위
글씨나, 컨테이너의 크기를 결정할 때 기본단위는 px, pt, em, %가 있다.
px : 화면의 pixel 개수의 단위, 해상도에 따라 화면에 보이는 실제 크기가 다를 수 있다. (사용자의 모니터 해상도에 따라 크기가 달라진다.)
pt : 포인트 단위로 1포인트는 1/72 인치 기준으로 인쇄시에도 비슷한 크기로 인쇄된다.
em : 상대크기, 부모요소에서 기존에 사용된 크기에 비해 얼마의 비율의 크기로 결정할지 (1.0em = 100%)
% : 상대크기, 부모 요소의 컨테이너 크기에 비해 얼만큼의 크기를 차지할지 결정한다.
텍스트 스타일
문장, 문단과 관련된 스타일
text-alingn, text-indent, text-decoration
크기 적용
크기 속성
width : 너비 값
height : 높이 값
