목차
- 여백과 면적의 차이 - margin, padding
- 테이블 태그 다루기(table, thead, tbody, tr, th, td)
- *선택자로 html 기본 속성 죽이기
- Position의 위치속성 비교하기(absolute, relative, fixed)
- 어떻게 보여질까? Display속성(none, block, inline, flex)
1. 여백과 면적의 차이
(margin, padding)
2. 테이블 태그 다루기
(table, thead, tbody, tr, th, td)
3. *선택자로 html 기본 속성 죽이기
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<style>
* {
/* 실무에서는 아래처럼 기본설정 제거 후
디자인 한다. */
border-collapse: collapse;
/* html 기본 marginm, padding 제거 */
margin: 0px;
padding: 0px;
/* a태그 밑줄 제거 */
text-decoration: none;
color: black;
/* 목록태그 점 제거 */
list-style: none;
}
table {
/* border-bottom: 1px solid black;
border-right: 1px solid black; */
/* border는 테두리 */
border: 1px solid black;
/* 테두리가 분리(separated)
또는 상쇄(collapse)될 지 결정 */
/* 위의 *태그css에 넣었으므로 주석처리 */
/* border-collapse: collapse; */
}
/* tabale th 이렇게도 가능 */
table > thead > tr > th{
border: 1px solid gray;
}
table > tbody > tr > td {
border: 1px solid gray;
background: pink;
}
div {
background: pink;
/* span과 동일하게 padding 적용 */
/* 아래와 같이 작성하면
padding에 상하좌우 일괄적으로 10px 적용 */
padding: 10px;
margin-left: 50px;
margin-top: 100px;
}
/* 자식요소 중 첫번째만 css 적용 */
div > span:first-child {
background: red;
/* padding: 20px; */
padding-left: 50px;
padding-bottom: 50px;
padding-right: 50px;
}
div > span:last-child {
background: red;
padding: 20px;
}
div > span {
/* div는 그대로, span만 css 적용됨 */
background: greenyellow;
/* padding: 패딩을 입으면 덩치가 커진다 */
padding: 10px;
/* margin: 서로 간격을 멀리 떨어뜨림 */
margin: 40px;
}
</style>
<div>
<span>타모</span>
<span>디자인</span>
<span>입니다</span>
</div>
<!-- table은 표 만들기 -->
<table>
<thead>
<!-- tr은 가로줄 -->
<tr>
<!-- th는 제목 태그 -->
<th>이름</th>
<th>성별</th>
<th>나이</th>
<th>키</th>
</tr>
</thead>
<tbody>
<tr>
<!-- td는 내용 -->
<td>김타모</td>
<td>여성</td>
<td>29</td>
<td>160</td>
</tr>
<tr>
<td>아로니아</td>
<td>남성</td>
<td>29</td>
<td>170</td>
</tr>
</tbody>
</table>
</body>
</html>4. Position의 위치속성 비교하기
(absolute, relative, fixed)
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<style>
* {
border-collapse: collapse;
margin: 0px;
padding: 0px;
text-decoration: none;
color: black;
list-style: none;
}
.blankPosition {
width: 100%;
height: 400px;
background: gray;
}
.relativePosition {
width: 100%;
height: 300px;
background: pink;
}
.relativePosition > div {
padding: 50px;
background: red;
margin-top: 10px;
}
.relativePosition > div:first-child {
/* relative는 '여러 요소들과 관계된
현재위치'를 기준으로 움직임 */
position: relative;
top: -100px;
}
.absolutePostion {
width: 100%;
height: 300px;
background: violet;
}
.absolutePostion > div {
/* absolute는 '독립적으로 좌표만을
따르는' 기준으로 움직임 */
position: absolute;
right: 0px;
bottom: 0px;
width: 400px;
height: 100px;
background: blue;
}
.fixedPostion {
width: 100%;
height: 500px;
background: skyblue;
}
.fixedPostion > div {
/* fixed는 html문서가 아닌
'브라우저'를 기준으로 '고정'됨 */
position: fixed;
top: 0px;
left: 0px;
background: royalblue;
width: 100px;
height: 100px;
}
</style>
<!-- Positon -->
<div class="blankPosition">
<div>blank</div>
</div>
<div class="relativePosition">
<div>relative</div>
<div>relative</div>
</div>
<div class="absolutePostion">
<div>absolute</div>
</div>
<div class="fixedPostion">
<div>fixed</div>
</div>
</body>
</html>5. 어떻게 보여질까? Display속성
(none, block, inline, flex)
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<style>
* {
border-collapse: collapse;
margin: 0px;
padding: 0px;
text-decoration: none;
color: black;
list-style: none;
}
div > span {
display: block;
background: pink;
}
div > div {
/* display: inline; */
background: orange;
border: 1px solid white;
/* 자식요소에 flex: 1을 줌 */
flex: 1;
}
div > div:first-child {
/* div자식요소 div의 첫번째에 flex: 2를 줌 */
flex: 2;
}
.flexable {
/* 부모요소 css에 display: flex 넣음 */
display: flex;
}
</style>
<div>
<span>span</span>
<span>span</span>
</div>
<!-- div의 부모요소인 div에 class지정 -->
<div class="flexable">
<div>div</div>
<div>div</div>
<div>div</div>
</div>
</body>
</html>
안녕하세요!!