첫 과제는 상단의 preview처럼 내 프로필 페이지를 만드는 것이었다.
구성 요소는 동일하게 하되, 내용은 수정할 수 있다.
전체적으로 한 번 강사님과 풀이해보는 시간이 있었고,
과제 제출은 그로부터 이틀 후였다.
처음에 직접 코드를 작성할 때는 HTML로 마크업 먼저 하고나서
CSS로 스타일을 입혀줬다.
어찌저찌 프리뷰와 비슷하게 구현은 할 수 있었다.
코드가 엉망일뿐이다 ㅎㅎ.
강사님과 풀이를 함께 하면서 '아~!'하고 깨닫는 순간이 엄청 많았다.
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header</header>
<main>Contents</main>
<footer>footer</footer>
</body>
</html>
1. 최소한의 마크업 후 레이아웃 작업하기
워드 작성하듯이 콘텐츠 먼저 다 작성하지 말고,
HTML은 기본 골격만 만들고, CSS로 레이아웃 구성을 잡는다.
이런 식으로 기본 골격부터 만든 후에
CSS에서 요소마다 background color를 넣어서 각 요소가 차지하는 영역을 확인하는 팁을 주셨다.
요소마다 차지하는 영역을 생각하면서 작업하기가 어려웠는데,
배경 색이나 테두리를 주면서 확인해 볼 생각을 못했다!
2. 레이아웃은 큰 덩어리부터 정한다.
과제 프리뷰의 경우는 크게 <div>, <header>, <main>, <footer>로 나눠볼 수 있고,
<main>은 다시 <section>로 구성할 수 있다.
사실 이 부분도 잘 몰랐다. ㅎㅎ
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>name</h1>
<p>contents</p>
</header>
<main>
<section>
section 1
</section>
<section>
section 2
</section>
</main>
<footer>footer</footer>
</body>
</html>
3. 콘텐츠는 천천히 채워가며 스타일을 수정한다.
왼쪽은 실습과 코드 풀이 강의를 거친 후, 대부분의 코드가 수정된거고,
오른쪽은 혼자 다시 만들고 과제로 제출한 상태이다.
이미지라서 안보이지만 섹션 부분에 마우스 hover하면 글자 색상이 바뀌는 것도 구현되어있다.
최대한 모범 코드를 보지 않고 해보려고 했다.
내가 작성해놓고도 어떤 식으로 동작하는지 잘 이해가 안되는 부분은
값을 수정해가면서 눈으로 확인하려고 노력했다.
시간을 제일 소비한 부분은
잘못 작성 한 코드를 찾는 것이었다.
예를 들면 class를 calss라고 써두거나, 선택자 작성 순서를 이상하게 쓴 것이었다.
처음부터 끝까지 스스로 해보니까
내가 어떤 부분을 확실하게 이해하지 못했는지 알 수 있었다.
그래도 정말 재미있다! 아직은..!
'TECHIT 멋쟁이사자처럼 > 프론트엔드 스쿨' 카테고리의 다른 글
| [과제]이벤트 페이지 만들기 (1) | 2023.12.28 |
|---|---|
| [프론트엔드스쿨 9기]3주차 후기 (0) | 2023.12.26 |
| [과제]My Favorite Food (1) | 2023.12.20 |
| [프론트엔드스쿨 9기]2주차 후기 (1) | 2023.12.17 |
| [프론트엔드스쿨 9기]1주차 후기 (0) | 2023.12.10 |
