[html] 타이틀 코딩하기

안녕하세요. 플입니다.

오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다.

 

---

 1.  전체 디자인 확인하기 

우선 시안을 보고 전체 디자인을 확인합니다.

 

제 시안을 살펴보면 세 가지 특징을 알 수 있습니다.

 

첫 번째, 전체적으로 가운데 정렬이다.

두 번째, 큰 제목과 소제목이 있다.

세 번째, 배경이 있다.

 

기본 틀이 되는 html은 논리적으로 코딩하는 것이 중요함으로

세가지 특징을 생각하면서 코딩하도록 합니다. 

 

---

 2.  코드 구상하기

구상한 코드를 이미지화해봤습니다.

 

첫 번째로 배경을 넣어주려면 감싸주는 태그가 필요하겠죠. 

간단히 div로 감싸주기로 합니다.

감싸주는 태그는 여러 경우가 있지만 사이즈를 맞춰야 하니 block태그인 것으로 하는 것이 좋습니다.

 

두 번째로 큰 제목은 서브 페이지의 주제입니다. 제목 태그인 h태그로 진행합니다.

h3인 이유는 h1은 로고, h2는 내비게이션. 즉, h2는 메뉴이기 때문입니다.

바로 다음 큰 제목인 서브 페이지 제목은 h3가 적당합니다.

 

세 번째로 소제목은 p태그를 이용해 제목의 설명글임을 알려줍니다.

혹은 같이 제목으로 설정하고 싶다면 h4를 이용하거나

h3태그 안쪽에 넣고 span태그로 감싼 뒤 따로 디자인을 줘도 상관없습니다.

 

 

 

---

 3.  코드 작성

<div class="title_b">  
   <h3>Career</h3>
   <p>주요 경력 사항</p>
</div>

마지막으로 구상한 대로 코드를 작성합니다.

 

저는 타이틀 디자인이 두 가지라 class를 따로 지정해줬습니다.

이렇게 class를 지정해두면 나중에 css에서 편하게 작업할 수 있습니다.

 

구상한 대로 div태그로 h3와 p를 감싸는 모양으로 코딩했습니다.

 

이렇게 타이틀 글씨가 보인다면 코딩 성공입니다.

아직은 디자인이 들어가지 않아서 시안과 다르지만 html은 완성입니다.

---

그럼 이만.

총총.