<CSS 박스 모델이란?>

: 문서의 영역을 나타내는 개념으로서 총 4가지의 요소로 구성된다.

• content: 내용물을 담는다.
• padding: 내용물(content)을 포장한다. ⇒ 부풀린다.
• border: padding의 경계를 말한다.
• margin: border 밖의 여백을 의미한다.

1. index.html 작성

   

• 기본 골격 작성: html:5
• <input type=”text”>: 입력 창 생성
• <button>: “Google 검색”과 I’m Feeling Lucky” 버튼 생성
• <div>: 입력창과 버튼을 다른 줄에 배치시킨다.
• <link rel="stylesheet" href="style.css">: style.css와 연결

1. style.css 작성

   

• 색깔에 해당하는 숫자는 RGB 값을 16진수로 표현한 것이다.

1. 직접 만든 Google 페이지