HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 싶었다 그래서 갑자기 선택해본 실습 예정 작품은 아래와 같다
이 실습을 진행하면서 하게 될 작업들은 다음과 같다
모양 최대한 근접하게 만들기
링크들은 미 구현할 예정
반응형으로 만들어버릴 예정
1. 구역 나누기(devide whole page)
우선, 웹페이지를 구현하기 위해 형식상이지만 구역을 나누려고 한다 <div> tag를 통해 header, content, footer로 나누어 구현하겠다 눈으로 대략 재었을 때 약 30% 정도면 되겠다 싶어서 다음과 같이 나눴다 header 20% content 50% footer 30% 코드를 보며 감을 잡아보는 것도 괜찮은 방법이다
View Codes main.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">input about header</div>
<div id="content">input about content</div>
<div id="footer"><b>we are going to make footer</b></div>
</body>
</html>