HTML,CSS로 자기소개서 만들기
기본 구상
크게 두가지 섹션으로 나눠져야 함
<article class="profile">
.
.
.
</article>
//첫번째 섹션
<article class="detail">
.
.
.
</article>
//두번째 섹션기본 설정
body에서 본격적으로 코드짜기 전
기본적인 틀 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아기사자 자기소개</title>
<link rel="stylesheet" href="week1.css" />
</head>☞ HTML에 CSS를 연동
첫번째 섹션
<body>
<main>
<article class="profile">
<figure>
<img src="https://www.inu.ac.kr/sites/inu/images/sub/sub_06/character02.png" />
</figure>
<section>
<h2>김남윤</h2>
<p class="part">Frontend</p>
<p>기초부터 차근차근 배워가는 개발자가 <br>되겠습니다!</p>
</section>
</article>☞ main안에 article로 첫번째 섹션을 만들어줌
두번째 섹션과 이름이 구분되어야 CSS에서 카드형태로 만들기 편함
→ class명 profile로 설정
두번째 섹션
<article class="detail">
<section>
.
.
.
<h3>연락처</h3>
<ul>
<li>
.
.
.
</li>
</ul>
<h3>관심기술</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
</article>
</main>☞ 첫번째와 마찬가지로 class명 선언
구역을 나눴으니 이제 화면에 카드형태로 두 부분을 나누기
카드형태 만들기
.profile {
background: white;
border-radius: 20px;
padding: 20px;
width: 300px;
margin-bottom: 80px;
}
background << 카드외부와 내부를 다른색으로
border-radius << 둥근형태로 만들기
margin-bottom << 밑에 카드색션과 거리
어려웠던 부분
사진처럼 세개의 문장의 간격이 벌어져있는데
예시에선 붙어있어 계속 시도해봐도 간격이 줄지 않았다...
<section class="intro">
<h2>김남윤</h2>
<p class="part">Frontend</p>
<p>멋쟁이사자처럼</p>
</section>intro에 margin을 0으로 설정해도 간격은 그대로였다
why?
→intro에 margin을 걸면 intro 박스 전체의 바깥여백이 줄어듦
즉 ,내부요소들의 간격은 그대로
☞ 해결방법
.intro h2 {
margin: 2px;
}
.intro p {
margin: 2px;
}
intro 내부의 h2와 p에 margin을 사용하면
내부요소들의 간격이 줄어듦
느낀점
과제로 자기소개서를 만들고 결과화면을 보는데 내가 직접 짠 코드들이 화면에 바로바로 보여지는 만족감을 느낀게 가장 큰 것 같다.
처음 강의를 들으면서 만든 화면엔 글자밖에 없어
내가 생각한 화면을 만드는 건
지금의 내 실력과 괴리감이 느껴졌었는데,
이번 과제를 하면서 열심히 하다보면
금방 만들 수 있을 것 같다는 자신감도 얻었다😁
