프론트 기법

개요

프론트를 공부하며 필요한 트릭과 기법을 정리하지 않았더니 다 잊어버렸다.
이번 기회에 하나씩 정리해보려한다.

파비콘

대부분의 브라우저는 루트 경로에 favicon.ico라는 이름의 파일을 파비콘으로 인식하여 사용한다. 만약 높은 해상도의 파비콘을 사용하고싶은 경우 css파일을 등록하듯이 link태그의 속성을 icon으로 사용하여 등록하면 된다.

작업 방식

왼쪽 위에서부터 오른쪽 아래로 내려간다. 그러니 헤더를 가장 먼저, 푸터를 가장 나중으로 작업한다.

헤더 시작

• 코드가 길어진다면 어디가 어떤 부분인지 알아보기 힘들기 때문에 코드상에 공간을 확보하고 태그를 통해 명시하는 것이 좋다.

로고를 클릭했을 때 메인 페이지로 이동하는 경우가 많다. 그래서 다음과 같이 작성할 수 있다.

<a>
  <img />
</a>

색상

완전 검은색, 완전 빨간색과 같은 색상은 답답한 느낌과 촌스러운 느낌을 주니 색이 섞인 색을 사용한다.

• #333
• #656565
• #000
• #e5e5e5
• #2c2a29

글자 크기

브라우저가 16px로 시작하지 않는 경우도 있을 수 있으니 body태그에 명시적으로 16px를 사용하는 방법이 있다.

inner

웹 페이지를 돌아다니다보면 내용이 전체 뷰포트를 채우지 않고 좌우에 어느정도 여백이 있는 경우를 볼 수 있다. 이런 레이아웃을 구현하고 싶을 경우 별도의 스타일을 작성한다. width값을 적절히 설정한 다음 마진 값을 0 auto로 선언하면 중앙정렬된다.

재사용성을 위해 .inner와 같이 클래스를 선언하고 다른 선택자와 붙여 사용하면 좋다.

이미지

이미지 태그는 인라인 태그로 베이스 라인 밑으로 공간이 생길 수 있다. 이렇게 원하지 않는 동작이 생길 경우 display를 블록으로 바꿔주어 해결할 수 있다.

배치

어떤 요소를 어느 위치에 놓고싶다면 position속성을 생각한다.

position 앱솔루트, top, bottom을 0으로 설정하고 margin 위아래를 auto로 설정하면 부모요소를 기준으로 중앙 정렬된다. 높이 값이 있어야한다.

원리는 가장 상단과 가장 하단을 기준으로 배치되어있기 때문에 margin auto를 통해 브라우저가 자동으로 중앙으로 모아주는 것이다. 이를 위해서는 브라우저가 위치를 계산하기 위해 높이값이 필요하다.

같은 원리로 좌우 정렬도 가능하다.

메뉴

• 클릭할 수 있는 요소는 클릭할 수 있는 부분을 명확하게해서 UX적으로 이점을 얻을 수 있다.
• a태그는 인라인요소기 때문에 높이값을 가질 수 없다. 따라서 display를 블록으로 바꾸고 padding을 사용하는 방법이 있다.
• 메뉴 구분선의 경우 가상요소 선택자로 구현할 수 있다.

  content: "";
  display: block;
  width : 1px;
  height: 1px;
  background-color : black;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  

  이렇게 하면 된다. 근데 첫 번째 요소나 마지막 요소에도 구분선이 들어가는 것을 막으려면 :first-child::before와 같이 선택하여 display:none으로 변경해주면 보이지않게된다.

말풍선 효과

사이트를 돌아다니다보면 아이콘을 클릭했을 때 아이콘에서 말풍선처럼 숨겨진 내용이 나오는 경우를 볼 수 있다.
기본 레이아웃은 부모요소 -> ul과 li태그로 구성되며 부모 요소를 클릭했을 때 나타나는 요소를 적절한 위치에 배치하기 위해서 position속성을 사용한다.

컨테이너의 내부에 작은 크기의 div요소를 하나 선언하고 이를 배치 속성을 이용해서 적절한 위치에 옮긴다.
그리고 가상 요소를 사용해서 말풍선 부분에 옮겨놓고 rotate함수를 이용해서 회전시킨다.
그런 다음 위에서 선언한 작은 크기의 div의 overflow 속성을 hidden으로 바꾼다. 그럼 말풍선과 같이 보이게된다.