HTML Tag와 CSS 기초를 활용한 퍼블리싱

kwakky·2021년 1월 3일
0

CSS

목록 보기
1/1

HTML 시멘틱 tag를 사용하는 이유?

HTML tag에는 여러 종류가 있다. 가장 많이 사용하는 tag는 아마도 div가 있겠지만 검색엔진최적화(SEO)를 위해서 HTML tag에 시멘틱 tag를 사용하는 것이 좋다고 한다.

시멘틱 tag에 대해 알아보자

시멘틱 테그에는 위 사진과 같이 header, nav, section, article, aside, footer 등이 있다. 사용하는 위치나 방법은 위 사진을 보면 대략적이 방향을 알수 있다.

기준크기에 가운데 정렬 만들기

대략적으로 사용자의 화면에 맞게 퍼블리싱 작업을 하게되는데 현재 페이지는 PC버전에서 사용할 부분이고 전체 페이지 가로 길이가 1200px로 고정해서 작업하는걸로 지정되어 있다. 이렇게 된다면 1200px로 이루어진 부분만 가운데 정렬을 하고 싶을 것이다.

width: 1200px; margin: 0 auto;

위와 같이 css에 적용을 하면 내가 원하는 px을 고정으로 가운데 정렬해서 사용할 수 있다.

중복코드를 최소화하자

중복을 줄이자는건 너무 나도 당연한 이야기이지만 이전에 CSS에 기본기가 부족했을때는 전체적인 구조로 CSS를 다루지 않고 하나씩 하나씩 만들었다. 그래서 코딩 시간보다 CSS가 더 오래 걸렸던적이 있었다.
어떤 코딩도 그렇겠지만 일단 전체적인 구조를 파악하는것이 중요하다. 어떤 디자인을 받았다면 먼저 어떤 테그를 어떻게 쓸지부터 상상하며 적어 내려가는것이 좋다.

퍼블리싱 시작전에 봤던 유튜브 : https://www.youtube.com/watch?v=X91jsJyZofw

처음 퍼블리싱을 시작한다면 위에 있는 유튜브를 먼저 접한다면 디자인을 퍼블리싱 할때 구조를 파악하는 방법을 보다 쉽게 알 수 있을 것이다. 미리 이런 유뷰브를 봤었다면 좀 더 쉽고 빠르게 CSS에 대해 이해했을텐데라는 생각이 든다.

결론은 미리 구조를 파악하고 중복으로 사용할 CSS를 생각하고 적용해야한다. 아무 생각없이 짜면 반복 작업을 계속하게된다... 시간을 아끼자!

Flex를 활용하자


학원에서 진행한 프로젝트는 템플릿을 구매해서 진행했기 때문에 퍼블리싱에 대한 작업이 거의 없었다. 필요한 부분만 공부해서 진행했을뿐... 처음 제플린으로 받은 디자인은 회사 면접과제 제출용이었다. UI에 관련해서는 어떠한 라이브러리도 사용하지 않고 작업을 하는것이 미션이었다. UI 뿐만아니라 로직도 만들어야했기 때문에 꽤 많은 시간이 걸렸는데 CSS에 대한 기본기가 없었기 때문에 너무 많이 시간을 CSS에 쏟아부었다. CSS를 적용한 방법도 최악이었는데 오직 margin과 padding을 통해서 각각의 테그에 적용했었다. 지금 생각해보면 진짜 멍청한 짓이었다.
flex box에 대해 전혀 몰랐기때문에 정말 너무 힘들었던 과제였다.

flex는 부모 tag에서 사용하면 자식 tag를 정렬할때 아주 효율적으로 사용할수 있는 CSS이다.

위와 같은 구조의 디자인이 나온다면 어떻게 설계를 해야할까?
사진3개,글자부분3개로 나누어 2개의 item으로 구분할 수도 있고 사진1개, 글자1개로 3개의 item으로 구분해서 넣을 수도 있을 것이다.
이런 디자인의 경우에는 대부분 후자를 택할 것이다.

display: flex justify-content: space-between

위 CSS를 itme을 담고 있는 container에 적용한다면 한번에 처리가 가능 할 것이다. flex를 몰랐을 때 이 부분을 만들었다면 사진 하나를 넣고 marign을 넣어서 간격을 맞췄을 것이다... 다시 예전에 노가다로 CSS를 작업했던 생각을 하니 끔찍하다. flex box는 정말 다양한 방법의 적용 방법이 있기 때문에 위에 같이 가로 정렬 이외에도 column 형식으로 바꿔서 세로로 정렬도 가능하다.

마무리

CSS에 대해서는 기본적인것만 알고 있으면 된다고 하지만 개발에 첫발을 내딪고 있는 나와 같은 사람들이 있다면 일단 무작정 달려들기보다는 기본적인 강의를 들어보는걸 추천한다. 앞으로도 회사에서 받은 디자인을 적용하면서 유용하게 사용한 CSS 정보를 시리즈로 조금씩 정리해야겠다.

profile
Junior Software Developer

0개의 댓글