[HTML/CSS] CSS 기초
HTML문서 내에서 CSS의 위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
태그명 {
속성명: 속성값;
속성명: 속성값;
...
}
</style>
</head>
<body>
</body>
</html>
일반적으로 CSS 속성영역은 <head>태그 안, <title>태그 아래에 쓴다.
<style></style>태그 안에 원하는 CSS 코드를 작성하면 된다.
태그명 {} 안에 들어갈 속성이 하나인 경우, 코드 뒤에 ; (세미콜론)을 붙이지 않는 것이 더 맞는 문법이다.
color: pink;
color: rgb(198, 231, 103);
color: #C6E767;
background-color:gray;
속성의 우선순위
서로 속성값이 중복으로 들어갈 경우, 우선순위대로 들어간다.
<style>
(1) !important가 적용된 것
p {
color: #FFFFFF !important;
}
(2) 가장 마지막에 적용된 것
(3) 와일드카드(*) 로 적용된 것
* {
color: orange;
}
(4) id > class > class 정의된 순서대로
</style>
여러가지 활용방법
ㅁ 주석처리 /* */
<style>
/* CSS 안에서 주석처리는 이렇게 쓴다. */
</style>
ㅁ 여러 가지 태그에 한꺼번에 속성부여 가능
<style>
p, h3 {
color: gray;
}
</style>
ㅁ 클래스 속성 class="value" . * grouping이 목적
: 여러번 중복해 사용할 수 있으므로 무언가 표준안을 만들 때 id보다 더 많이 사용된다.
<style>
.name1 {
color: green;
}
.name2 {
color: blue;
}
</style>
<body>
<p class="name"> 클래스 속성 사용예시 - 초록색으로 글자가 표시됨 </p>
<p> 이 구역은 글자색이 초록색으로 적용되지 않는다.</p>
<p class="name name2"> 두 가지 클래스 동시적용 가능 </p>
</body>
class 선택자는 한 문서 안에서 여러번 사용할 수 있다.
<div class ="abc">
<p clas="abc">
혹은 하나의 class에 여러 값을 넣을 수도 있다.
<div class="abc xyz">
ㅁ 아이디 속성 id = "value" # * 딱 한 개씩 존재
<style>
#name {
color: aqua;
}
</style>
<body>
<p id="name"> 아이디 속성 사용예시 </p>
</body>
div의 위치 속성 position
div는 position 속성으로 위치를 조절할 수 있다.
ㅁ position의 속성값
static -- (default) 다른 데이터들과 겹치지 않게 순차적으로 출력 > left: 50px과 같은 속성이 먹히지 않는다.
absolute -- 고정된 위치를 기준으로 (default: left top = (0,0))
relative -- 상대적인 위치를 기준 "원래 static이었을 때 있어야 할 위치가 기준!!!!"
fixed -- 열려있는 창을 기준. 기본적으로 absolute의 형태를 취하지만, 스크롤을 따라 위치가 따라오는 것을 볼 수 있다.
또한 요소의 위치가 창 영역을 벗어나 있으면 스크롤이 생기지 않고 요소가 보이지 않는다.(absolute는 스크롤이 생기며 위치를 확인할 수 있다)
ㅁ 기타 속성값
z-index -- 먼저 만들어진 요소부터 1, 2, 3, ... 순으로 숫자를 부여, z축으로 인덱스에 맞게 쌓아준다. 1이 가장 바닥, 큰 숫자일수록 위쪽으로 올라옴. (cf. 반드시 맨 위에 있어야 하는 요소인 경우, z-index:1000 과 같이 엄청 큰 수를 부여하면 간편하게 위로 올릴 수 있음.)
ㅁ 부모요소가 있을 때 위치값
만약 다른 부모요소 아래 속해있는 <div>에 위치속성이 먹여지는 경우, 전체 창의 위치가 아닌 '부모요소를 기준으로' 위치가 지정된다.
div 영역의 간격, 테두리
padding : div 내에서 요소와 테두리의 거리
margin : 요소와 요소의 거리
border : 테두리
<style>
div {
width: 300px;
padding: 10px;
text-align: center;
border-style: solid;
border-color: blue;
border-width: 5px;
}
</style>
border-style : solid(실선), dotted(점선)
border-width : 테두리 두께