웹퍼블리싱온라인

전체 글 (7)

검색엔진최적화에 도움이 되는 meta 태그

코딩 예제/HTML 조퍼블 2020. 5. 19. 07:16

meta 태그란? head 태그 안에는 여러 종류의 meta 태그가 있는데 문서 그 자체를 설명하는 태그로 키워드, 설명, 웹 페이지를 제작한 사람 등을 설정할 수 있습니다. 그중 가장 많이 쓰는 meta 태그 위주로 알아보겠습니다. 웹 사이트에서 대표하는 키워드를 쉼표를 통해서 나열하는 메타 태그입니다. 웹 사이트를 만든 사람 혹은 회사 등을 표현할 수 있는 메타 태그입니다. 검색엔진의 크롤링 및 색인 동작을 제어하는 메타 태그입니다. index는 현재 페이지를 검색에 색인 여부를 설정할 수 있고 follow는 연결된 페이지 허용 여부를 설정할 수 있습니다. 기본값은 index, follow이며 all로 대신할 수 있습니다. 이와 반대는 noindex, nofollow 입니다. 웹 사이트에 대한 설명을..

HTML 파비콘 적용하는 방법

코딩 예제/HTML 조퍼블 2020. 5. 18. 07:00

만들어야 하는 이유 파비콘은 웹 사이트에 접속했을 때 크롬, 사파리 등의 브라우저 상단 탭에 보이는 아이콘을 말합니다. 즐겨찾기를 등록할 때 사이트 옆에 아이콘으로 표시됩니다. 파비콘을 적용하면 웹 사이트의 브랜딩 및 성격을 나타낼 수 있습니다. '웹퍼블리싱온라인 블로그'의 경우 웹 사이트의 이미지를 표현했습니다. 또한, 즐겨찾기 목록에서 빠르게 찾을 수 있는 장점이 있습니다. 적용하는 방법 파비콘 적용은 별도의 폴더를 만들고 그 안에 아이콘(.ico) 파일의 형태로 넣으면 됩니다. 태그에 위와 같은 코드를 붙여놓으면 최종적으로 아래와 같이 브라우저 상단 탭에 보입니다. 'apple-touch-icon'은 애플의 iOS의 경우 사파리에서 웹 사이트의 링크를 바탕화면에 만들면 앱 아이콘이 만들어지는데 이것..

Reset CSS와 Normalize CSS가 필요한 이유

개발 정보 조퍼블 2020. 5. 17. 08:00

크롬, Edge 등의 브라우저에는 margin 값이 8px가 기본적으로 설정되어 있습니다. 이뿐만 아니라 태그에 border-collapse의 기본값인 separate가 설정되어 있어 테두리 사이에 가녁을 두어 비교적 부자스러운 디자인이 나타납니다. 이러한 부분을 없애기 위해 2가지의 방법으로 초기화할 수 있습니다. Reset CSS margin, table 등 디자인이 부자여느러운 것을 없애기 위해 Reset CSS 파일이 있습니다. 이는 브라우저의 스타일을 초기화하기 위해 사용하는 파일입니다. 크로스브라우징을 구현할 때 유용합니다. 대표적인 사이트로는 cssreset가 있습니다. Normalize CSS Reset CSS와 마찬가지로 초기화하는 파일이지만 HTML 요소의 기본 스타일을 브라우저 간 일..

신입이 갖춰야 할 웹 퍼블리셔 역량

개발 정보 조퍼블 2020. 5. 16. 08:00

웹 퍼블리셔란? 웹 퍼블리셔는 웹 사이트를 제작할 때 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 제작하는 사람을 말합니다. 실무에서는 디자이너와 개발자 사이에서 협의와 조율이 필요하므로 소통이 중요합니다. 디자이너의 디자인을 검토하면서 웹을 제작해야 하며 개발자와는 어떤 방식으로 코딩하면 기능 구현이 더 쉽게 할 수 있는지 협의해야 합니다. 웹 퍼블리셔는 다른 직무에 대해 전문가는 아니더라도 대화할 수 있는 수준까지는 될 수 있도록 노력해야 합니다. 언어 웹 퍼블리셔는 포토샵으로 디자인된 것을 웹에 표현하기 위해 코딩을 해야 합니다. 기본적으로는 HTML과 CSS 그리고 JavaScript 등의 언어를 하며 회사에 따라 더 많은 언어를 배울 수 있습니다. HTML과 CSS 이 두 개는 ..

CSS position 속성 이해하기

코딩 예제/CSS 조퍼블 2020. 5. 15. 07:00

개요 CSS position 속성은 문서 상에 요소를 어떻게 위치시킬지 정의합니다. 위치는 위, 아래, 왼쪽, 오른쪽을 설정할 수 있는데 각각 top, bottom, left, right로 설정할 수 있습니다. 사용법 position: static; 기본값으로 위치가 자동으로 배치되어 임의로 설정할 수 없습니다. position: relative; 원래 있던 위치를 기준으로 좌표를 지정합니다. static과의 차이점이 있다면 위치를 설정할 수 있다는 점입니다. position: absolute; 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. 이 속성값은 일반적인 흐름에 따르지 않습니다. 만약, 위 사진과 같이 상위 속성이 relative라면 기본 위치는 상단 왼쪽입니다. 이러한 속성값이 없다면 최상단..

너비에 맞게 box-sizing 사용하기

코딩 예제/CSS 조퍼블 2020. 5. 14. 07:00

필요한 이유 input 태그, div 태그 내에 CSS를 이용한 박스 형태 등을 사용한다면 box-sizing이 필요합니다. 왜냐하면, 이 속성을 설정하면 보다 정확하게 박스형태를 갖출 수 있기 때문입니다. 따라서 이 속성은 요소의 너비와 높이를 계산하는 방법을 지정하는 속성이라고 생각하시면 됩니다. 사용법 box-sizing: content-box; 콘텐츠 영역을 기준으로 크기를 정합니다. box-sizing: border-box; 테두리를 기준으로 크기를 정합니다. 예제 다음은 box-sizing 속성을 비교한 예제입니다. 테두리가 10px이고 넓이 500px과 높이 100px 그리고 padding 값 30px로 설정했을 때 각 속성값은 어떻게 변하는지 알아보겠습니다. See the Pen box-s..

HTML 반응형 뷰포트 사용법

코딩 예제/HTML 조퍼블 2020. 5. 13. 08:00

반응형 웹이란? '웹퍼블리싱온라인 블로그'를 포함한 대부분의 웹 사이트는 반응형을 지원합니다. 반응형 웹을 사용하면 사용자는 다양한 기기의 해상도에 맞춰 웹 사이트를 볼 수 있고 개발자는 뷰포트와 CSS 미디어쿼리를 사용하여 반응형 웹을 만들 수 있습니다. 빠른 개발 속도 반응형 웹 사이트 하나를 만들 때 웹과 앱을 분리하여 개발하는 것보다 데스크톱과 모바일을 한 번에 개발하는 것이 시간을 절약할 수 있습니다. 유지 보수 필요성 감소 웹과 앱을 유지 관리하려면 테스트와 지원이 필요합니다. 반대로 반응형 웹 사이트로 개발하면 유지 관리에 더 적은 시간을 투자하여 마케팅 및 콘텐츠 제작과 같은 더 중요한 것에 집중할 수 있는 시간이 확보됩니다. 모바일 트래픽 유입 모든 온라인 트래픽의 60% 이상이 모바일 ..

1

Copyright © 웹퍼블리싱온라인 All Rights Reserved

Designed by JB FACTORY

티스토리툴바