[CSS] display속성- id, class /margin, padding 태그
display 속성의 CSS 임베디드로 나타내어 본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 에 대해서 알아본다. CSS 임베디드로 나타내어 본다.</title>
<style type="text/css">
div#div4 { /* div 태그인데, id = div4 인 것 ==> 특정 div 태그를 준다. class는 중복되는 값으로 준다.*/
border: solid 1px blue;
width: 50%;
height: 500px;
/* width: 50%; 는 본인 화면기준 50%를 의미한다. height는 %r(퍼센트)가 없다. */
}
span.food1 { /* span 태그인데, class = food1 인 것 ==> 특정 span 태그를 준다. */
display:inline; /* span 태그는 default 가 inline 방식이므로 생략해도 된다. */
border: solid 1px purple;
width: 100px;
height: 300px;
}
label[for="female"] { /* []: 속성값을 넣어준다. ==> label 태그 안의 for="female" 속성만 적용시킨다. */
padding-left: 50px;
}
input[type="checkbox"] { /* []: 속성값을 넣어준다. ==> intput 태그 안의 type="checkbox" 속성만 적용시킨다. */
box-shadow: 0 0 0 1px red;
margin-right: 30px;
}
</style>
</head>
<body>
<div id="div4">DIV 4 블럭요소(block element)은 width 및 height 가 적용된다.</div>
<span class="food1">짜장면1</span>
<span class="food1">탕수육1</span>
<span class="food1">팔보채1</span>
<!-- display:inline; 은 가로형태로 보여주는 것이고, 또한 width 및 height 적용이 안된다. -->
<ul>
<li>
<label class="title">성별</label>
<label for="male">남자</label> <!-- for: 남자 에 커서를 놓으면 id="male" 로 커서가 이동한다. -->
<input id="male" type="radio" name="gender" /> <!-- radio: 여러개 중 1개의 ○ 만 선택가능함. for(male) 과 name(gender) 이 동일해야 선택가능함. -->
<label for="female">여자</label>
<input id="female" type="radio" name="gender" />
</li>
<li>
<label class="title">취미</label>
<label for="game">게임</label><input id="game" type="checkbox" name="gender" />
<label for="movie">영화감상</label><input id="movie" type="checkbox" name="gender" />
<label for="writing">글쓰기</label><input id="writing" type="checkbox" name="gender" />
<label for="music">음악감상</label><input id="music" type="checkbox" name="gender" />
<!-- radio: 단일선택. checkbox: 다중선택 -->
</li>
</ul>
</body>
</html>1. id / class 속성
<태그> 안에 id/ class 를 붙여 css 속성을 직접 적용시킬 수 있다.
일반적으로 id는 고유한 값, classs는 중복가능한 값을 준다.
해당 태그 뒤에 id는 # class는 . for은 [ ]로 연결하여 나타낸다.
- div#div4 - div 태그 중 id 속성이 div4인 태그를 나타낸다.
- span.food1 - span 태그 중 class 속성이 food1인 태그를 나타낸다.
예제로 메인페이지 틀을 만들어본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지 만들기 연습</title>
<link rel="stylesheet" href="mainPage.css">
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="side" class="customDisplay">Side</div>
<div id="contents" class="customDisplay">Contents</div>
<div id="footer">Footer</div>
<!-- Side 와 Contents는 id 는 다르지만, class 가 동일하다. -->
</div>
</body>
</html>
@charset "UTF-8";
body {
font-family: Arial, "MS Trebuchet", sans-serif; /* Arial 이 없으면, "MS Trebuchet" 없으면, sans-serif 폰트로 적용된다. */
border: solid 0px gray;
/* === 여백설정 === */
/* == margin 은 바깥여백 이다. == */
/* margin: 100px 100px 50px 20px; /* 상 우 하 좌 시계방향 */
/* margin: 100px 50px; /* 상하 100px 이고 우좌 50px 인 것이다. */
/* margin: 100px; /* 상우하좌 모두 100px 인 것이다. */
margin: 0; /* 상우하좌 모두 0px 인 것이다. 즉, 바깥여백을 모두 없는 것으로 하겠다. */
/* == padding 은 내부(안쪽)여백 이다. == */
/* padding: 100px 100px 50px 20px; /* 상 우 하 좌 시계방향 */
/* padding: 100px 50px; /* 상하 100px 이고 우좌 50px 인 것이다. */
/* padding: 100px; /* 상우하좌 모두 100px 인 것이다. */
padding: 0; /* 상우하좌 모두 0px 인 것이다. 즉, 내부(안쪽)여백을 모두 없는 것으로 하겠다. */
}
div#container {
border: solid 0px navy;
width: 80%; /* 전체에서 80%만 쓰고 있다. */
margin: 20px auto; /* 상하가 20px 이고 우좌는 전체의 80% 안에서 자동으로 가운데 맞춰준다. */
}
div#header {
border: solid 0px red;
height: 100px;
margin-top: 50px; /* margin: 50px 0 0 0; 와 동일한 것이다. */
background-color: #ccc; /* #ccc 은 #cccccc; 와 동일한 것이다. */
}
div#side {
border: solid 0px blue;
width: 30%;
background-color: #888;
}
div#contents {
border: solid 0px yellow;
width: 69.20%;
background-color: #eee;
}
div.customDisplay {
display: inline-block;
height: 400px;
}
div#footer {
border: solid 0px green;
height: 80px;
background-color: #ddd;
}3. margin 속성
여백을 설정하는 속성 중 하나로, margin 은 바깥여백을 설정한다.
margin: 100px 100px 50px 20px; - 순서대로 상 우 하 좌 시계방향으로 나타낸다.
margin: 100px 50px; - 상하 100px 이고 우좌 50px 인 것이다.
margin: 100px; - 상우하좌 모두 100px 인 것이다.
margin: 0; - 상우하좌 모두 0px 인 것이다. 즉, 바깥여백을 모두 없는 것으로 한다.
4. padding 속성
여백을 설정하는 속성 중 하나로, padding 은 내부(안쪽)여백을 설정한다.
padding: 100px 100px 50px 20px; - 순서대로 상 우 하 좌 시계방향으로 나타낸다.
padding: 100px 50px; - 상하 100px 이고 우좌 50px 인 것이다.
padding: 100px; - 상우하좌 모두 100px 인 것이다.
padding: 0; - 상우하좌 모두 0px 인 것이다. 즉, 내부(안쪽)여백을 모두 없는 것으로 한다.
해당 코드는 아래와 같이 나타낸다.
