라벨이 네이버인 게시물 표시

[CSS] 웹사이트 기본적인 레이아웃 잡기

이미지
 CSS 기본적인 레이아웃 잡기 우리나라 사람이라면 모두 사용해봤을 네이버(naver)를 예로들어 레이아웃을 잡아보려고한다. 네이버를 기준으로 웹사이트의 기본적인 레이아웃을 잡을때 가장 먼저 div태그로 가로 행의 갯수를 잡는다.(사이트마다 상이하다.) 대충 딱 봤을때 3등분이 되어있다는 느낌이 강하게 느껴진다. (자세히 보지않아서 모르겠지만 더 세세하게 나눠져있을 수 있다.) 총 가로 3행으로 나눈것을 볼수있다. 이럴경우  <div>1</div> <div>2</div> <div>3</div> 와 같이 화면의 가로 너비 100%를 차지하는 div태그로 나눌수있다. 컨텐츠를 직접 작성하기는 어려워 컨텐츠대신 숫자만 대입했다. 그 후 자세히 보면 가로로 3등분 되어있다는 느낌이 확든다. 공백 | 컨텐츠 | 공백 공백 | 컨텐츠 | 공백 으로 되어있는데 이것은 따로 div태그로 나눴다기보다는 데이터들을 담고있는 div태그에 가로 너비(width)를 지정하여 가운데 정렬 시킨것이다.  가운데 정렬은 style 속성으로 margin: 0 auto; 를 작성하면 가운데 정렬이 된다. margin: 0 auto; 은 margin-top, margin-bottom 은 0, margin-right, margin-left 는 auto 이다. 이렇게 div태그로 가운데 정렬된 데이터를 자세히보면 컨텐츠사이에 여백이있고 2열로 나란히 정렬되어있다는 느낌이 든다. (개발자 도구로 확인하면 2열로 나뉜다.) 이것또한 div태그로 열을 지정해준것이다.  네이버에서 지정한 크기와는 다르지만 가운데 정렬한 최상위 div태그의 너비(width)가 1000px이라고 한다면 그 최상위 div태그 안에 작성되는 div들의 너비 100%는  1000px 이다. div태그는 기본적으로 display: block; 속성을 가지고있어서 기본적으로 2열이 아닌 2행이 만들어진다. 2열을 만들고자 한다면 2개의 div태그의 속성을 displa

네이버 검색 엔진 최적화(search engine optimization, SEO)

네이버 검색 엔진 최적화(search engine optimization, SEO) 검색엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 1. 검색엔진에 내 사이트 등록하기(네이버 웹마스터 도구) 2. 내 사이트 인증하기 3. 관련 문서 제출하기 4. SEO 검색 엔진 최적화하기 검색엔진을 크롤러라고 부른다. 이러한 크롤러가 각 사이트의 정보를 모두 수집, 검색하는데 이때 사이트의 정보를 모두 보여주지않고 숨기고 싶은 정보들이 있다면 robot.txt파일을 작성하면된다.  크롤러가 사이트에 방문하면 가장 먼저 robot.txt 파일에 접근하여 txt파일에 로봇을 허용한다는 내용이 있다면 크롤러가 정보에 접근하여 정보들을 가져오고 반대로 크롤러를 거부한다고 작성되어있으면 크롤러가 사이트에 접근하지 못하도록 한다.  또한 sitemap.xml이라는 파일을 제공할 수 있는데 이는 크롤러가 사이트에 접근했을 때 sitemap이라는 지도를 보고 사이트를 더 정확하고 효율적으로 탐색할 수 있게 만들어 준다. robot.txt 파일과 sitemap.xml을 크롤러가 접근하게 하기위해서는 폴더의 최상위에 둔다. 다른 내부 폴더에 넣을경우 크롤러가 해당 파일에 제대로 접근하기 어렵다.