서브라임 텍스트로 만든 첫 웹페이지2 (지끈-)

오늘은 쇼케이스, 뉴스레터, 각주 등 첫 화면의 중간-아래 부분을 분석해보려고 한다.

 

 

어제는 헤드, 헤더 부분을 분석해봤다. 사용할 때는 잘 몰랐던 아주 디테일한 과정까지 신경써서 생각해야 했다.

더 구체적으로 확인하고 싶다면 아래의 글을 참고!

https://dowhateveryouwant1661.tistory.com/28

서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-)

 

사진에 큰 메세지가 있는 부분이 'showcase'인데 이 부분과, 아래의 newsletter, 이 웹사이트의 세 가지 기능을 담고 있는 box와 맨 아래 각주 부분까지 분석해보려고 한다.

 

자, 그럼 지금부터 분석 시작!

 

2. 쇼케이스(showcase)

 

쇼케이스 html

어제 다룬 헤더(로고+메뉴) 아래 부분을 차지하고 있는 꽉찬 그림과 글이 있는 부분이 쇼케이스 부분이다.

(계속해서 서브라임 텍스트 3를 사용하고 있고) 새로운 레이아웃인 <section>을 지정한다. 쇼케이스를 하나의 큰 <section>으로 하고 텍스트를 넣어야 하니까 <div>를 설정한 후 위에 보이는 첫 줄의 큰 제목을 <h1>으로, 아래의 작은 글자를 <p>로 설정한다.  

쇼케이스는 다른 페이지에서는 사용되지 않고 이 부분에서만 사용되니까 id를 이용한다. <div>는 container라는 클래스를 설정할건데, 다른 웹페이지에서도 자주 사용할 거니까 class를 이용한다. 여기에 id와 class의 차이가 있다는 거!

 

 

CSS는 다음과 같다.

쇼케이스 CSS 설정

우선 ctrl+/를 눌러서 나만 알 수 있도록 하지만 깔끔하게 보기 쉽도록 코멘트를 달아주고(회색 글자부분),

<section>에 사진이 담길 거니까, #showcase로 높이(height)를 정하고, img 폴더에 담긴 사진의 파일을 url( )연결시킨다. 사진이 반복되지 않도록 no-repeat를 달아준다. -400px를 설정한 건 사진의 위쪽이 더 보이면 해서. 위로 땡기는 거.

 

다음으로는 Affordable~로 시작되는 큰 제목을 설정한다. 위쪽에서부터 100px떨어지도록 설정하고, 글자크기는 55px로,  아래서부터는 10px 떨어지도록 설정했다. 그 아래의 작은 설명 폰트로 10px로 설정한다.

 

 

3. 뉴스레터(newsletter)

다음으로는 뉴스레터 부분이다. 웹사이트의 정보를 계속 제공받을 사용자에게 이메일을 입력하도록 하는 섹션이다. 

 

뉴스레터 html

다른 새로운 영역을 <section>으로 지정하고, 글을 쓸 부분이 필요하므로 <div>를 지정한다. <h1>으로 구독을 권유하는 'Subscribe To Our Newletter'를 써주고, 이메일을 작성하고 '구독'버튼을 누를 수 있도록 <form>을 작성한다. <input>요소는 사용자가 데이터를 입력할 수 있는 공간을 제공하는데 <form>태그에 포함된다. placeholder 속성은 input에서 기대되는 값을 짧게 묘사한다. 여기서는 '이메일을 적으세요' 처럼. 다음으로 <button>요소는 클릭버튼을 생성한다. (그냥 이 섹션은 외워버리는 게 나을 듯...)

 

CSS는 다음과 같다.

뉴스레터 CSS 설정

뉴스레터에는 container클래스를 적용할거니까 헤더 부분이랑 같은 CSS가 적용될거고, 글자부분의 여백을 15px로 설정한다. '구독해주세요' 글자 부분은 전체 영역에서 왼쪽에 위치하도록 하고, '구독'버튼은 오른쪽에 위치하되 15px을 지니도록 설정한다. 이메일을 기입하는 하얀 부분의 여백, 높이 너비를 지정한다. 

 

 

4. 박스(boxes)

이번엔 박스 부분이다. 정확하게 말하면 '박스들'이겠다. 이 웹 사이트가 사용자에게 줄 수 있는 장점을 세 가지로 나눠서 설명하는 부분이다. HTML, CSS, Graphic Design을 잘한다고 세 박스로 나눠서 설명할건데, 세 개의 박스가 필요하고 각각에 이미지가 먼저 들어가고-제목-부가설명 방식으로 채우려고 한다. (이미지는 구글에서 성의없이 그냥 아무거나 선택했으므로 성의가 없어 보이긴 하지만 그냥 진행...)

 

 

박스 html

박스를 넣을 공간을 <section>으로 설정하고, 각각에 내용을 채울거니까 상자 3개에 공통적으로 container를 적용할 수 있도록 큰 <div>를 설정 후, 각각의 특징을 담을 박스를 또 <div>로 설정한다. 

각각의 박스는 이미 검색해 놓은 이미지를 링크시키고, <h3>로 제목을 붙이고 <p>로 부가설명을 추가한다. 

 

CSS는 다음과 같다.

박스 CSS

박스가 들어가는 <section>은 이 페이지에서만 사용되니까 id로 위쪽 여백을 20px을 설정한다. 그 안에 들어갈 세 개의 박스도 class를 이용해서 박스위치, 텍스트 위치, 너비, 여백을 설정한다. 이미지 너비도 90px로 설정한다.

 

 

5. 각주(footer)

드디어 각주... 어제보다는 분석하는 속도가 빨라진 거 같다. 더 익숙해져서 겠지?

각주는 사이트 이름, 저작권, 탐색메뉴 등을 담는 영역이다. 각주 레이아웃을 바로 이용한다. 텍스트 내용은 <p>로 바로 기입한다. 저작권 표시하는 동그라미 안에 C가 있는 마크는 &copy; 를 사용해서 입력한다.

 

각주 html

CSS는 다음과 같다.

각주 CSS

각주는 오렌지색으로 하고, 글자를 흰색으로, 중앙배열 할거니까 위와같이 설정한다.

각주는 간단해서 손쉽게 끝낼 수 있는 영역이다.

 

 

 

+느낀점

점점 태그, 요소 등이 익숙해지니까 보는 눈도 길러지는 거 같다. 역시 이 작업의 매력은 계속 숫자나 속성에 변화를 주면서 웹페이지에 나타나는 변화를 즉각적으로 확인할 수 있다는 점이다. 피드백이 빠르니 수정도 쉽고, 이론을 접하지 않더라도 어떤 변화가 생기는지 직접 내가 실행해보면서 체득한다는 점이 흥미롭다. 계속해서 멋진 레이아웃을 지닌 홈페이지들을 찾아보고 있는데, 나도 언젠가 그런 홈페이지를 만들 수 있는 날이 오겠지? 히히히