[css] 타이틀 코딩하기

안녕하세요. 플입니다.

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

저번 포스팅에 이어서 오늘은 css코딩을 해보겠습니다.

 

https://ssimplay.tistory.com/90

[html] 타이틀 코딩하기

저번 포스팅 링크를 걸어두겠습니다.

 

---

 1.  전체 디자인 확인하기

시안을 계속 참고해가며 진행하는 것은 중요합니다.

가야 하는 길의 지도와 같다고 생각해요.

 

html에서 코딩해준 대로 div, h3, p 태그에 디자인을 넣어줘야겠네요.

 

 

---

 2.  div

width:300px; height:300px;

div{ width:300px; height:300px; background:$main_color; text-align:center; margin:40px auto;
    padding:88px 0; box-sizing:border-box; }

일단 전체 코드를 보고 설명할게요.

 

사실 하나하나 살펴보면 어려운 부분은 없는데 이걸 한 번에 다 적으려고 하니까 어려운 기분이 들 거예요.

 

div{ width:300px; height:300px; }

우선 가로사이즈와 세로 사이즈를 정해줬습니다.

같은 값이니 정사각형 모양이죠. 아마 여기까지만 코딩을 하면 여백은 생긴 것 같은데 잘 모르겠다는 느낌이 들 겁니다.

 

div{ background:$main_color; }

그래서 잘 알아보도록 배경색을 추가해줍니다.

저는 색상을 변수처럼 사용해서 변수명을 적어준 것이고 컬러코드를 사용해도 상관없습니다.

 

div{ text-align:center; }

다음은 글자를 가운데 정렬로 맞춰줍니다.

이미지를 보시면 안쪽의 글자들이 가운데 정렬이 된 것을 알 수 있습니다.

 

div{ margin:40px auto; }

이제 양쪽에 마진을 auto로 설정해 화면 가운데로 타이틀을 가져옵니다.

 

마진 값 순서는 위 오른쪽 아래 왼쪽으로 적어주며 위-아래, 오른쪽-왼쪽이 같은 값이면 생략이 가능합니다.

여기서는 오른쪽과 왼쪽이 동일한 값이라 왼쪽 값을 생략했습니다.

 

위아래 마진을 준 것은 헤더와 타이틀 사이에, 그리고 타이틀과 콘텐츠 사이에 여백을 준 것입니다.

수치는 코딩을 하면서 조정합니다.

 

div{ padding:40px 0; box-sizing:border-box; }

아직 글자가 위쪽에 붙어있으니 위아래에 여백을 넣어줍니다.

이때 여백만큼 전체 사이즈가 늘어나면 안 되니까 box-sizing을 이용해서 전체 사이즈는 고정해줍니다.

 

 

 

---

 3.  h3

h3{ color:$sub_color; font-size:80px; }

타이틀의 큰 제목도 코딩을 해줍니다.

 

여기는 간단하게 색과 사이즈만 설정해줬습니다.

 

---

 4.  p

p{ color:#5ebee1; letter-spacing: -1px; font-size:24px; margin-top:-12px; } 

컬러와 사이즈는 위의 h3코딩과 동일하니 넘어갈게요.

 

letter-spacing을 이용해서 자간을 조정해줬습니다. -(마이너스) 수치이니 자간을 줄여줬다는 것을 알 수 있습니다.

마진 탑을 이용해 위쪽 마진을 조정해줬는데요. 여기도 마이너스를 사용해 위쪽 여백을 줄여줬습니다.

이렇게 마이너스로도 수치가 조절 가능하니 활용해보세요~

 

---

그럼 이만.

총총.