'코딩 예제' 카테고리의 글 목록

코딩 예제 (5)

검색엔진최적화에 도움이 되는 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의 경우 사파리에서 웹 사이트의 링크를 바탕화면에 만들면 앱 아이콘이 만들어지는데 이것..

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

티스토리툴바