HTML/CSS를 이용한 웹페이지 제작

송진수·2021년 6월 7일

자기소개 웹페이지를 만들어봅시다!

1주일간 익힌 HTML 태그, CSS 시트 작성법을 활용하여 간단한 웹페이지를 제작하여 깃허브를 통해 호스팅했다.

종이에 페이지 구성과 어떤 블록/인라인 요소가 들어갈지 대략적으로 구상하였다.

Atom 에디터를 사용하였다.

header, main, section, footer로 전체 페이지를 분할한 다음, 각 부분에 들어갈 요소들을 div, h1~h3, ul, p, img 등으로 표현했다.

HTML 내부에서는 디자인 요소들을 완전히 배제하고, 각 요소에는 CSS 선택자로 스타일 적용이 가능하도록 클래스 지정을 해주었다.

CSS 시트도 Atom 에디터로 작성하였으며, 미리 구상해놓은 레이아웃과 같이 표현되게끔 스타일 값을 조정하면서 편집했다.

Atom-Live-server 애드온을 설치하니 CSS 시트를 저장할 때마다 브라우저에서 자동으로 업데이트를 해주어 편집을 매우 편하게 할 수 있었다.

유용하게 활용했던 CSS 코드를 아래에 몇 개 정리하였다.

상단 바(헤더) 고정, 페이지 상단에 항상 표시하기

header {
position: fixed;
top: 0;
padding: 0;
width: 100%;
z-index: 1; /* 다른 요소들보다 앞으로 나오게 */
}

인라인 블록 요소 가운데 정렬

section {
text-align: center;
}
 section.col {
display: inline-block;
}

배경 이미지에 회색 필터 적용하기(:before 선택자 활용)

.background:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7)
}

GitHub 리포지토리에 작성한 HTML문서들과 CSS 시트를 업로드하고, Pages 서비스를 통해 호스팅하였다.

부족한 경험과 제한된 시간 내에 페이지를 만들다보니 놓친 부분들이 있어 정리하였다.

우선 페이지 레이아웃 구상 단계에서 디바이스별 출력 화면을 고려했어야 했다. 이는 메타 태그 뷰포트 선언으로 디바이스의 width를 인식하게 해야 하며, 해상도별 분기점을 만드는 개선도 가능하다.
초기화를 했어야 했다. 분명히 원하는 위치에 나오게 편집을 했는데도 블록들이 떨어져 있고, 여백 사이로 뒷부분이 뚫고 나와 보이는 등 하나하나 문제가 생기는 부분을 조정하다 시간을 많이 잡아먹었다. 결국 * {}로 직접 마진과 패딩을 초기화했다.

나중에 알게 되었지만, 유명한 reset 스타일을 검색해서 복붙하는 방법도 있다.

선택자 결합 활용, 단위 사용(px, vh/vw, %, em/rem 등)이 일관적이지 못했다. 그랬기 때문에 스타일 Cascading을 제대로 써먹진 못한 것 같다. 연습해볼 겸 여러가지 시도를 했기 때문이기도 하지만, 나중에 페이지를 유지보수한다고 가정할 때, 불편함이 이만저만이 아닐 것이다.

보초