퍼블리싱에 대한 팁 정리

최근 회사를 다니면서 홈페이지 리뉴얼을 진행하게 되어 퍼블리싱에 대해 배워가고 있다.

 

공유하면 괜찮을 것 같다는 생각이 들어 적어보려고 한다.

 

1. 반응형을 고려해야 한다.

최근 홈페이지들은 변화하는 브라우저의 해상도에 맞게 화면의 내용이 바뀌게 된다. 

학원에서는 반응형이 마냥 어려운 것으로만 알고 있었는데 막상해보니 그렇지는 않았다. 

 

CSS에는 @media라는 어노테이션이 있는데 

device의 width, height 혹은 viewport의 width, height를 체크하여 지정된 해상도와 맞을 경우 @media {} 안에 있는 css를 적용시킨다. 

 

@media type은 아래와 같다.

 

Value	Description
all	기본설정값, 모든 device에 적용
print	프린터에만 적용
screen	컴퓨터, 태블릿, 스마트폰 화면에 적용
speech	스크린리더 "reads" 페이지에 적용

 

웹 개발자 입장에서는 screen만 사용하면 되기 때문에 나는 screen만 사용했다.

 

사용하는 방법은 아래와 같다. 

@media only screen and (max-width 767px){}

스크린 해상도가 767px 이하면 해당 css를 적용하겠다는 의미다.

 

 

2. width, height는 %로 잡아라. 

화면 해상도마다 크기가 다르게 잡혀야 하는 div들의 경우에는 px로 잡아서 작업을 해도 되지만 내 경험상 %로 잡을 경우 각 @media query css마다 width, height를 여러번 조정할 필요가 없었다. 

 

다만, 반드시 px로 지정을 해서 css를 작업해야하는 경우도 있다. 

예를 들면 나의 경우 각 div를 감싸는 wrapper 클래스를 만드는데 이 클래스의 css를 각 @media query마다 px로 지정하고 하위에 div는 %로 잡아서 퍼블리싱을 한다.

 

 

3. !important는 되도록이면 사용하지 마라.

!important는 css의 속성을 반드시 적용하라는 강조 표현인데, important는 보통 js 플러그인들에 css가 맘에 들지 않을 경우 사용하는 것이 바람직하다. 

!important를 남용하게 되면 @media query css마다 다 지정을 해줘야하기 때문에 코드가 길어질 뿐만 아니라 부분적으로 !important가 지정되지 않을 css 속성이 있을 경우 퍼블리싱하면서 스트레스를 받을 수 있다. 

 

 

4. font-size, line-height는 각 @media query에서 알맞게 지정을 해야한다.

font-size, line-height는 반응형 퍼블리싱을 하면 항상 검수 항목중에 제일 많이 나오는 부분일 것이다.  해상도마다 적당한 font-size, line-height를 입력하여 검수 때 스트레스를 덜 받도록 하자.

 

 

5. 되도록이면 각각의 tag는 div로 감싸자

div태그로 감싸면 해당 영역을 %로 지정시에 안에 내용들도 같이 변화하기 때문에 반응형을 작업할 때 용이하다.

 

 

6. style은 항상 css로 설정하는 습관을 들이도록 하자.

내가 퍼블리싱을 하면서 항상 실수하는 것 중에 하나가 html 태그 안에 style을 직접 지정을 하는 것이다. 이는 편할 수 있지만 반응형에서 변화하는 해상도에 따라 style을 바꿔줄 수 없다. 나중에 고생하기 싫다면 모든 style은 css로...

 

 

7. 크로스 브라우징을 할 경우 반드시 css 속성이 적용되는지 확인하자.

나는 개발자도구를 이용하여 css를 수정하여 화면을 확인한 다음에 퍼블리싱을 하는데 크롬에서는 잘 나오던 것들이 익스플로러에서는 속성이 지정이 안되어 이상하게 나오는 경우가 있다. 

 

예를 들면 아래와 같다.

position: initial

width: unset

더 많은데 생각나는 건 이것 뿐이다..

 

그렇기 때문에 https://www.w3schools.com/ 같은 css를 자세히 설명하는 사이트에 들어가서 지원되는 css 속성인지 확인을 해봐야 한다. 

 

 

8. css 상속관계를 이용하라.

css는 기본적으로 상속구조이기 때문에 하위 css가 상위 css 속성을 물려받는다.

 

예를 들면 (. -> 클래스, # ->아이디)

.a

.a .b{ font-size:20px;}

.a .b #c{ height: 30px;}

 

.b는 .a의 속성을 물려받아 이되고, 

#c는 .b의 속성을 물려받아 이된다.

 

 

9. 가운데 정렬은 margin:0 auto를 활용하자

text의 경우 text-align:center를 이용하여 가운데 정렬을 하면 되지만

div의 경우에는 text가 아니기 때문에 text-align:center가 적용이 안된다. 

 

이 때, margin:0 auto; 속성을 이용하면 좌우 여백을 동일하게 동적으로 알아서 잡아주는데 조건이 있다.

- css에 width가 지정이 되어 있어야한다.

- display:inline-block이 설정되어 있을 경우 margin:0 auto는 적용되지 않는다.

 

예시 

.div

 

 

10. 한줄 text의 경우에는 span을 text가 여러줄인 경우에는 p태그를 사용하자

 

 

11. padding과 margin을 적절하게 사용하자

width의 경우에는 %로 잡아버리고 나면 나머지는 알아서 적용되어 상관없지만 height의 경우 고정값으로 지정이 되어있지 않다면 해당 태그 영역안에 있는 내용물에 의해 height가 지정이 된다. height는 동적으로 잡으라고 초반에 설명을 했고 나는 auto로 지정해 놓는 것을 추천하다. 그렇다면 위 아래 여백은 어떻게 주는 것이 좋은가? 

바로 padding과 margin을 이용해야 한다. 

 

padding의 경우 태그의 안쪽의 여백을 주며, margin의 경우 태그의 바깥쪽의 여백을 주므로 유의해서 사용하면 된다. 

 

 

12. position:relative, position:absolute 활용하기

position의 경우 default 속성이 static이다. 이 속성은 태그에 의해 배치되는 위치에 나타내겠다는 의미이다. 

 

하지만 배치되는 위치가 디자인시안과 맞지 않을 경우 absolute를 이용하여 배치를 해야할 경우가 발생하는데 이때 absolute로 지정한 태그의 바깥을 relative로 지정된 div로 감쌀경우 기본적으로 absolute로 움직일 수 있는 영역은 바깥의 tag의 width, height로 이루어진 사각형 영역이다. (-값 혹은 100% 가 넘어가는 수치를 기입시에는 벗어날 수 있다.)

 

참고: http://developer-syubrofo.tistory.com/58?category=789102

 

 

이글을 읽는 여러분에게 조금이라도 도움이 되길 바란다.