[개발일지 2022.7.11] 실무 프로젝트 6일차

허제민·2022년 7월 11일
0

Project

목록 보기
6/34

1.학습한 내용

1)reset.css 적용

기존의 베이스가 되는 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;
}   

해당코드를 style.css 에 입력한뒤
홈페이지의 변화를 확인하게되었다.

2)폰트 적용


과제에서 주어진 폰트를 적용하게 되었다.

실제로 적용되는것을 확인하였다.

2.학습내용 중 어려웠던 점

reset.css 를 적용하게 되자 기존과 달라지는 부분들을 발견하여 수정하게 되었다.

3.해결방법

해당 부분의 클래스를 찾아서 css를 추가하면서 수정하게 되었다.

4.학습소감

reset.css 를 적용한뒤에 수정을 하게되면서, 이전에 설정하였던 부분이 충돌이 나는 부분이 생기게 되었다, 이러한 점을 통하여 이후에 작업을 하게되면 우선 reset.css를 통하여 기본 바탕을 설정하고 진행하는것이 좋을것이라고 생각한다.

profile
대구 AI 스쿨 2기 초급개발자 과정을 진행중인 허제민입니다.

0개의 댓글