[HTML/CSS] 간단한 웹페이지 만들기 - 2 <main>

이전에 네비게이션링크를 담당하는 웹페이지 상단인

<nav>태그를 만드는 데에 이어서  페이지에 주요 내용을

담당하는 <main>태그를 만들어 보자.

 

웹페이지의 상단을 만드는 부분에 대해 궁금하다면

 

간단한 웹페이지 만들기 -1 <nav> 를 보고오자.

 

 

---

[HTML]

<main> 전체 코드

 

위 코드는 <main>태그의 전체코드이고

보기 쉽도록 아래에서 부분적으로 나누어 설명하겠다.

---

 

HTML

 

우선, 앞서 말했듯이 <main>태그를 가장 부모로 사용하여 페이지에 주요 내용을 담았다.

그리고 소제목과 그에 대한 간단한 내용을 각각 <div>태그로 사용하였다.

 

 

 

 

위 HTML코드의 CSS 코드이다.

 

디자인 부분을 제외하고, 내용을 페이지의 중앙에

맞추기 위해 두 div 클래스에 text-align을 적용하였다.

 

 

 

 

 

---

[HTML]

 

웹페이지 <main>안에 가격표 박스가

나와있는 부분에 대한 코드이다.

 

<section>태그와 <article>태그를 t사용하였다

그 안에는 4개의 <div>태그로 나누어서

각각의 클래스를 설정해놓았다.

 

그리고 'dollar' 클래스에

같은 div안에 있는 내용이지만

줄바꿈이 되지 않고, 각각의 디자인 차이를

주기 위해서 <span>태그를 사용했다.

 

가격표에 대한 내용은

<ul>, <li>태그를 사용했고

 

가장 하단에는 페이지 이동과

포인팅 효과를 위해 <a>태그를 사용했다.

 

이와 같은 방법으로

총 3개의 가격표 박스를 생성했다.

 

그리고 CSS에서 active를 적용시키기 위해

2번째와 3번째 박스의 enter클래스에는

enter 뒤에 active를 넣어주었다.

(이유는 아래 CSS코드 부분에서 설명하겠다.)

.

[CSS]

 

 

 

 

 

이전에 <nav>태그에서 사용했던 것과

같이 flex를 사용하였다.

 

배치 방법에는 float도 있고 position도 있지만

개인적으로 flex가 가장 손에 잘 익는 것 같다.

 

각 부분마다 margin과 padding을 적용시키면서

일정한 간격들을 맞춰주었다.

 

그리고 <li>태그를 사용한 곳에

list-style을 none으로 설정하였다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

각각의 enter 클래스에 hover를 사용하여

포인팅효과를 주었다.

 

하지만 2번째와 3번째 enter 클래스에는

html코드에서 active를 넣어주었었는데

 

아래 영상을 보면 active를 넣은 enter클래스는

active를 넣지 않은 첫번 째와 다르다는 것을 알 수 있다.

 

active가 들어간 클래스는

쉽게 말해 enter 클래스가 hover가 된 상태인

즉, 해당 클래스가 활성화가 된 상태를 말한다

 

그래서 오히려 hover가 되어있을 때 처럼

보이는 효과가 나타나는 것이다.

 

---

 

 

2편은 웹페이지 안에서 <main>태그에 대한 부분을 만들어 보았다.

전체적인 <div>태그들은 flex로 전부 배치를 하였고,

부분적으로 text-align을 사용했다.

 

그리고 2, 3번째 enter 클래스에는 클래스 안에 active를 사용했는데

active 클래스는 기존 클래스에서 hover 효과를 보여주는

'활성화' 상태로 만들어준다는 점을 이해하자

 

웹 페이지를 만들어 보니

디자인을 제외하고는 배치를 하는 부분만

연습한다면 얼마든지

일반 웹페이지들의 구도는

충분하 재현할 수 있을 것이다.