CSS를 HTML에 적용하는 방법 3가지
- 외부문서(*.css)를 HTML문서에 포함시키는 방법
<head>
<link rel = "stylesheet" type = "text/css" href="mystyle.css">
</head>- HTML문서에 <style>태그안에 스타일을 정의
<head>
<style>
body{backgrond-color:line;}
h1{
color:maroon;
}
</style>
</head>- 태그안에 스타일을 정의
<h1 style="color:blue;margin-left:30px">This is a heading</h1>
Style의 우선순위 : 상위에 있는 모델의 CSS의 영향을 받지만, 중복되는 경우에는 하위의 모델일수록 우선순위가 높다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{color:green}
</style>
</head>
<body>
<h1 style="color:blue">HELLO</h1>
</body>
</html>
h1{color:red} => h1{color:red !important} //important를 통해서 우선순위를 설정하는 것이 가능하다.
Style의 상속 (inherit & initial)
- 자손의 태그는 조상태그의 속성을 물려받는다.(inherit)
<div style="color: green">
<h1>Hello</h1>
</div>- 속성의 값을 initial로 지정하면, 속성의 기본값이 적용된다.
<div style="color: green">
<h1 style="color:initial">Hello</h1>
</div>
Style의 기본값 : 태그마다 기본적인 속성값을 보유하고 있다.
CSS에 color지정하는 방법 : hsl()은 HSL, rgb()는 RGB, rgba()는 RGB에 alpha(투명도) 추가된것이다.
/* red with opacity 0.3은 불투명도 의미 */
#p1 {background-color:rgba(255,0,0,0.3);}
/* light green */
#p2 {background-color:hsl(120,100%, 75%);}
/* dark green with opacity */
#p3 {background-color: hsla(120,100%,25%,0.3);}
/* red with opacity - opacity를 따로 분리 */
#p4 {background-color:rgb(255,0,0);opacity:0.6;}
CSS의 단위
- 숫자(크기, 길이)를 값으로 갖는 속성에 사용될 수 있는 단위가 필요
- 값과 단위 사이에는 공백이 올 수 없다.(10px, 2em)
em, ex, % : 규격에 따른 가변길이
cm, rmm, in, px, pt : 고정길이
CSS Selector : 스타일을 적용할 요소들을 선택하는데 사용되는 패턴
h1 {color : blue; font-size:12px;}h1이 selector를 의미한다.
Padding : 위, 오른쪽, 아래, 왼쪽 순으로 경계에 개별적 사용가능하다. top -> R -> bottom -> L
- padding-top : 위쪽 패딩
- padding-right : 오른쪽 패딩
- padding-bottom : 아랫쪽 패딩
- padding-lefr : 왼쪽패딩
Borders : 위, 아래, 왼쪽, 오른쪽 경계에 개별적 적용가능
- border-style : 경계선의 종류( solid, dotted, double, groove, ....)
- border-width : 경계선의 두께
- border-color : 경계선의 색깔
- border-radius : 경계선의 모서리 반경(둥근 모서리)
Margins : 위, 아래, 왼쪽, 오른쪽 경계에 개별적 적용가능
- margin-top : 위쪽마진
- margin-right : 오른쪽 마진
- margin-bottom : 아래쪽 마진
- margin-left : 왼쪽마진
Margin의 붕괴(Margin collapse)
- 위 아래로 인접한 요소간의 bottom, top마진이 하나로 합쳐진다.( 둘 중에 큰 값으로 합쳐지며, 좌우마진은 합쳐지는 경우 없다)
폭과 높이 : 컨텐츠 영역의 폭과 높이를 지정
- width : 컨텐츠 영역의 폭 (100%이면 브라우져의 전체 폭을 차지)
- height : 컨텐츠 영역의 높이
- max-width : 컨텐츠 영역의 최대 폭(브라우져 늘려리더라도 그 이상 늘어나지 않는다)
- max-height : 컨텐츠 영역의 최대 높이
- min-width : 컨텐츠 영역의 최소 높이(브라우져 줄이면 스크롤바 생김)
- min-height : 컨텐츠 영역의 최소 높이
※auto설정시 원래 사이즈로 보인다.
Box Model
Outline : Border에 바깥 테두리를 투가해서 요소를 돋보이게 할 때 사용
- outline-width
- outline-style
- outline-color
댓글