1. CSS로 이력서 꾸미기
1) css 파일 생성
2) HTML 파일의 <head> 섹션에 아래와 같이 CSS 파일 연결
<!DOCTYPE html> <!--문서 유형 선언-->
<html>
<head>
<meta carset="UTF-8"/> <!--Character set-->
<link rel="stylesheet" href="style.css"/> <!--css 파일 연결-->
<title>홍길동의 이력서</title>
</head>3) CSS 파일에 아래와 같이 내용 작성하여 배경이 검정색으로 표시되는지 확인
body {
background-color: black;
}
4) 오른쪽 창 Line Preview에서 링크 복사
5) 구글 크롬 열어서 복사한 링크 붙여넣기
1.1 예시 화면
1) 기본 스타일 적용:
body {
margin: 20px;
background-color: white;
}
header{
background-color: #5053b3;
color: white;
padding: 10px 0;
text-align: center;
}
h1 {
margin: 10px 0;
}
2) 개발자 도구를 통해 실시간 스타일 수정:
개발자 도구를 사용하여 실시간으로 CSS 스타일을 수정할 수 있다. 하지만 이러한 수정은 저장되지 않으며, 새로고침 시 원래 상태로 돌아온다.
body {
margin: 0;
}
element.style {
background-color: black;
}
element.style {
display: flex;
}
element.style {
display: flex;
flex-direction: column;
}
element.style {
display: flex;
flex-direction: column;
gap: 10px
}
3) 최종 스타일 적용 후:
body {
margin: 0; /* 기본 마진 제거 */
background-color: white; /* 배경색 설정 */
}
header {
background-color: #5053b3; /* 헤더 배경색 */
color: white; /* 헤더 텍스트 색상 */
padding: 10px 0; /* 패딩 설정 */
text-align: center; /* 텍스트 중앙 정렬 */
}
h1 {
margin: 10px 0; /* 기본 마진 설정 */
}
main {
display: flex; /* 플렉스 박스 사용 */
flex-direction: column; /* 컬럼 방향으로 정렬 */
gap: 10px; /* 요소 간의 간격 설정 */
background-color: white; /* 배경색 설정 */
margin: 20px; /* 외부 여백 설정 */
padding: 20px; /* 내부 여백 설정 */
border-radius: 8px; /* 테두리 둥글게 설정 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 그림자 설정 */
}
h2 {
background-color: rgb(65, 65, 65); /* 배경색 설정 */
color: white; /* 텍스트 색상 */
padding: 10px; /* 패딩 설정 */
margin: 0; /* 마진 제거 */
}
거북선통통통통