웹 퍼블리셔 설계 순서들

설계 순서

아래의 이미지는 웹 사이트의 일부분이다. HTML, CSS 어떤 순서로 제작할까? 고민하였다. 여러 페이지를 제작하며, 분석한 결과 경험을 쌓을 수 있었다.

2024년 현대해상 다이렉트 홈페이지 일부분 캡쳐

---

1. main.css 관련된 속성

HTML 마크업 후 디자인 관련된 CSS 스타일 속성 먼저 작성한다. 반응형 웹이나, 적응형 웹 등 유지 보수를 위한 방법으로 경험하였다.

2. layout.css 관련된 속성

디자인 관련된 속성을 작성하고 레이아웃을 맞춰준다. 반응형 웹에서 콘텐츠 영역이 밑으로 내려가는 레이아웃이면 편리하게 layout.css 파일에서 제어한다.

( 레이아웃 속성 선언 후 이미지 업로드 자리 )

3. 파일을 나누는 경험

main.css, layout.css 파일을 나누지 않고 작업한 결과 속성들이 섞여 엉망이었다. 이 경험을 통해 파일을 나누고 제작한 결과 작업 시간이 줄어들었고, 편리하게 제어할 수 있었던 경험이었다.

( 속성들이 섞여 엉망 된 이미지 업로드 처리 )

4. 파일을 나누지 않고 한다면?

CSS 선언하는 규칙이 있다. 네이버, 모질라 등 참고하여 제작할 수 있다.

( CSS 선언하는 규칙 이미지로 업로드 )