20240731 수업
프로젝트를 시작하면, 초기에 먼저 스타일시트를 초기화하고 시작하는 것이 좋다.
이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다.
예를 들면
내가 margin을 지정하지 않았는데도, 알아서 margin값이 들어있어서 내가 원하는대로 화면을 가득채우는 것이 불가능하다.
아래의 사진은 width를 100%로 주었음에도 불구하고 자세히보면 margin값으로 인해 화면을 가득채우지 못하고 있는 것을 볼 수 있다.
그래서 개발자가 의도한대로 디자인이 나오게 하기위해서는 이러한 설정을 다시 리셋해주는 과정을 거쳐야한다.
(프로젝트를 이미 많이 진행하고 난 뒤에 바꾸는 것은 더 어려우므로 프로젝트 초기에 먼저 설정한 뒤 시작하는 것이 좋다)
참고:https://hihiha2.tistory.com/154
css reset 초기세팅 (reset css사용법, normalize css사용법)
프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다. 이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다. 예를 들면 내가 margin을 지정
hihiha2.tistory.com
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css"/>
<style>
body {
box-sizing: border-box;
}
table, td{
border:1px solid black;
/* =)border-width,style,color */
border-collapse: collapse;
}
table
{
width: 978px;
margin: 0 auto;
/* 반복시 첫 시행되는 반복명령어만 적어도 됨. */
}
td {
text-align: center;
padding: 10px;
}
caption {
padding: 20px;
}
#div1
{
/* margin: top right botttom, left; */
margin: 20px auto 20px auto;
/* div를 가운데로 (div width 필수
width가 없으면 오른쪽 왼쪾 100%로 인식) */
width: 400px;
border:1px solid black;
text-align: center;
padding: 10px;
}
.rspan{
vertical-align: middle;/*수직 정렬*/
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<hr />
<table cellspacing="0">
<caption><h3>동창회비 납입내역</h3></caption>
<tr>
<td>이름</td>
<td>성별</td>
<td>주소</td>
<td>회비</td>
</tr>
<tr>
<td>최진혁</td>
<td>남</td>
<td rowspan="2" class="rspan">청주</td>
<td>10000</td>
</tr>
<tr>
<td>제시카</td>
<td>여</td>
<td>5000</td>
</tr>
<tr>
<td colspan="3">합계</td>
<td>15000</td>
</tr>
</table><b>이곳은 b입니다</b>
</body>
</html>
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
resetcss를 꼭넣어서 작업하는 경우 多
box-sizing: border-box:: 전체 넓이에 border, padding, margin size를 포함X width와 height 값에 padding과 border가 포함되게 한다
<caption>:: 요소는 표의 설명 또는 제목을 나타냄.
태그에 속성으로 바로 쓰는 건 요즘은스타일,밸류,로우스팬 a href정도 밖에 없음
<th>:: table header
<tr>:: table row
<td>:: table colum
<hr>:: horizontal ruler(수평선)
<cellspacing>:: 셀과 셀사이의 간격
'HTML|CSS' 카테고리의 다른 글
| [html/css] 로그인/회원가입 창 구현 (0) | 2024.08.02 |
|---|---|
| [html/css] Input type (0) | 2024.08.02 |
| [html/css] a 태그(문서or링크 연결),padding과 margin의 차이 (0) | 2024.08.01 |
| [html/css]이미지 태그(삽입),css적용 (0) | 2024.08.01 |
| [html/css] list작성 (0) | 2024.08.01 |