728x90
CSS 관련하여 첫 포스팅입니다.
CSS의 기본부터 차근차근 알아보겠습니다. 이번 포스팅에서는 선택자에 대한 포스팅입니다.
다음과 같은 레이아웃을 만드는데는 div를 이용하여 크기를 지정하고 안에 글자를 쓴 것입니다.
바로 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style>
/*
id 선택자 : 요소 한개만 선택 '#' 키워드
class 선택자 : 요소 여러개 선택가능 '.' 키워드
*/
#red {
color: #FF0000;
}
#blue {
color:#0000FF;
}
#green {
color:#00FF00;
}
.box{
/*
border : 가장자리
border 속성 값 : 선의두께, 선의모양, 선의색상
*/
margin:20px;
padding: 50px;
border:1px solid black;
width: 200px; height: 100px;
}
</style>
</head>
<body>
<div id="red" class="box">빨강</div>
<div id="blue" class="box">파랑</div>
<div id="green" class="box">녹색</div>
</body>
</html>
선택자는 1. id 선택자 , 2. class 선택자, 3. 요소 선택자로 나누어져 있습니다.
id 선택자는 요소 한개만 선택이 가능하고 ' # '이라는 키워드를 사용합니다. id는 중복이 불가능 합니다! 반면에
class 선택자는 중복이 가능하고 키워드는 ' . ' 이라는 키워드를 사용합니다.
요소 선택자는 그 요소를 style 안에 기재하면 됩니다.
기초 부분이니 쉽게 이해가 가능하실겁니다.
반응형