내일배움캠프 2일차 : 기초 html과 CSS를 활용한 웹페이지 제작

팀 미니프로젝트를 진행중이다. 간단한 팀 소개 웹페이지를 제작하는것인데 어제 SA작성과 Git hub테스트를 완료하였고 오늘부터 본격적으로 웹페이지 제작을 시작했다. 아직 사전강의로 제공되었던 웹개발 관련 강의를 다 듣지 못한 팀원들도 있고 나도 완벽하지 않기에 강의를 다시 들으며 프로젝트 내 내가 맡은 부분을 만들어나갔다.

 

내가 맡은 부분 : 메인 페이지의 html과 CSS

 

어떻게 보면 가장 쉬울 수 있는 부분이지만 기초부터 활용하며 실력을 차근차근 키워나가고싶은 생각이 들어 이 부분을 맡게되었다.

하지만 막상 강의 들을때와 다르게 와이어프레임의 구성으로 만들려니 쉽지 않았다. 간단하게 XD로 만들어낸 와이어프레임을 실제 개발을 통해 구현해내는 것은 생각보다 복잡한 일이었다. 간단한 사각형에 글씨 넣는 것도 생각하는 구성대로 만들려니 하나하나 손이 안가는 것이 없었다. 강의에서 알려준 태그만으로는 원하는 그림을 만들어내기 어려워 따로 찾아본 태그들을 정리해보려한다.

 

- 사격형 두개를 나란히 배열

 이런식으로 팀 소개와 팀 규칙 솔리드 두개가 웹에 나란히 보여져야 하는데 나는 이 방법을 알지 못했다. 그래서 바로 구글 검색을 통해 내가 활용할 수 있는 방법을 찾아보았다. 여러가지 방법이 있었는데 내가 채택한 코드는 이것이다

 

<div style="display: inline-block">

     A영역

</div>

<div style="display: inline-block">

     B영역

</div>

 

'inline-block'을 활용한 것인데 display 속성이 inline으로 설정되어 한 줄에 다른 영역을 보여줄 수 있었다.

사각형 두개는 나란히 배열을 하였는데 안쪽 텍스트를 입력하는게 문제였다. 글자간 간격 글씨 크기와 같은 미세한 것들을 조절하는게 블로그를 쓰는것처럼 딸깍한다고 되는 것이 아니었다. 

 

- 줄바꿈

나는 모든 텍스트를 문단으로 묶거나 제목으로 하나씩 묶는 방법 말고 연속으로 작은글씨를 쉽게 나열하기 원했다. 이를 실현시켜주는 태그는 <br>이다.

<br>은 break의 약자로 html작업을 하며 줄바꿈을 원하는 곳에 넣어주면 된다. 다른 태그와 다르게 </br>이런식으로 따로 닫아주지 않아도된다는 특징이 있다.

 

- 열 나눔

열을 나누는 태그는 <p></p>태그가 있다. 사실 이것은 강의에서 사용했는데 활용할 생각을 하지 못했었다. 역시 강의는 보고 따라하기만 하기보단 활용이 어떻게 될지 아는것이 중요하다고 느꼈다. 나는 제목과 아래 내용의 글씨간 거리를 주기 위해 사용했다.

 

이 외에도

글씨를 굵게 만들기 위한 <strong></strong>

폰트 사이즈 조정을 위한 style=“font-size: 7”

이러한 자잘한 태그와 코드들을 찾아보았다.

 

우선 오늘 만든 결과물이다.

수정이되겠지만 특히 CSS에서 margin과 padding 그리고 정렬과 같은 것들을 제대로 복습할 수 있는 기회였다. 처음이다보니 코드를 조금 복잡하고 난잡하게 들어간 것 같은데 앞으로 열심히 공부해서 더 깔끔하고 다양한 코드를 구현해보고 싶다.

 

이것 외에 나머지 시간동안 사전강의는 들었지만 부족하다고 생각한 JQuery와 Fetch를 공부했는데 기억을 더듬으며 최대한 혼자서하려니 에러가 많이 났다. 완성코드를 보며 어디가 잘못됐는지 확인하는데 생각보다 많은 시간이 소요됐는데 너무 당연한 것을 빠트린 경우가 잦아서 처음부터 꼼꼼하게 코딩을 하는 버릇을 들여야겠다는 생각이 들었다.