1. [말랑말랑 컴퓨터] 카테고리 글 중에서 가장 도움이 되었던 글 주소를 적어주세요. 2. [Y&S의 관심사] 카테고리 글 중에서 가장 공감이 되었던 글 주소를 적어주세요. 3. [말랑말랑 컴퓨터] 카테고리(엑셀, 한글, 웹디자인, 포토샵 등)에 포스팅했으면 하는 주제를
기존 고유의 성질이 바뀌어 버린다. 예를들어 한칸을 다 차지해야 직성이 풀리는 성질인 블럭박스가
float을 줌과 동시에 플롯박스 성질로 변하여부분으로 들어가 다른것과 함께 배치될 수 있는것이다.
일단 이론적인 플롯의 사용법은 간단하다.
띄워서 왼쪽으로 배치
float:left;
띄워서 오른쪽으로 배치 float:right;
left 나 right 말고도 none 이나 inherit 가 있으나 많이 사용하지 않으므로 일단 패스.
자, 그럼 플롯이 실제 어떻게 사용되는지를 보자.
이미지와 나열된 글이 있고 이미지에 float:left를 줘서 이미지 우측에 글을 배치시키려고 한다. 이때 이 이미지가 어떻게 떠서 이동하는지 눈에는 보이지 않지만 아주 천천히 그 경로를 보자면 아래와 같다.
1.이미지가 공중으로 뜬다. 2.문장이 이미지 밑으로 들어간다. 3.문장의 블럭박스는 그대로 있는 상태에서 텍스트들을 감싼 라인박스만 이미지영역만큼 우측으로 밀려난다. (만일 이를 직접 확인하기 위해 p에(블럭박스) 실제로 border를 넣어보면 이미지 밑에부터 테두리가 쳐진다.)
위에서는 이해를 돕기위해 중간부터 테두리를 넣었지만
테두리를 치지 않더라도 보이지 않는 가상의 선들이 위와같이 존재한다고 생각하면 된다.
실제로 문장부분에 테두리가 필요해 p에 스타일을 준다면 당연히 테두리는 이미지 아래까지 기어들어갈 것이고, p에 문장의 가로값을 지정하려 width값을 주었는데
들어가있는 이미지 크기보다 width값이 작다면 p안에 들어있는 텍스트는 이미지 밑으로 다시 밀려난다.
float은 옆으로 배치하는거라고 했고 분명 float을 사용했는데 왜 옆으로 배치되지 않는 것인지...
테두리가 어째서 내 의도대로 안쳐지는지... 위의 개념을 확실히 알고있지 않으면 도대체 왜? 이런 현상이 벌어지는지 자체를 알 수 없는것이다.
블럭요소 p는 가로값을 주지않으면 항상 100를 차지한다. 때문에 이미지 옆으로 밀려나있는 라인박스 때문에 글들이 이미지 옆에서 나오다가 이미지가 끝나는 순간 다시 전체영역인 블럭박스로 돌아가 이미지 아래쪽으로 글이 흘러내리는 것이다. 이는 이미지를 상단 우측이나 좌측에 글과 함께 배치시킨 네이버 뉴스글 같은데서 볼 수 있다.
실전
아래는 이미지대신 200x200 사이즈의 박스하나를 만들고 빨간테두리를 친 후 클래스네임 photo로 지정해 float:left 를,문장에는 파란 테두리를 치고 가로값 500픽셀을 주었다.
그럼 결과는 아래와 같은 모습이 된다.
분명 문장에 테두리를 주어도 이미지 아래까지 들어가 있는걸 알 수 있다.
이 때, 가로값 500px은 이미지를 포함한 파란테두리 값이다.
글이 길어지면 물론 빨간 박스 아래까지 내려가고,
문장 <p>의 width값만 500에서 150px로 바꾼다면 이미지200px보다 작기 때문에 아래로 내려간다.
그럼 글이 길어져도 이미지 아래의 영역을 침범하지 않고 이미지 옆쪽으로 나란히 나오게 하려면 어떻게 해야할까?
INT(ROW(A1)/3) => INT 함수는 가까운 정수를 구하는 함수이므로 0이 구해진다.
여기서 잠깐~!!
식을 A4 셀에 복사할 것이므로 A4셀에는 식이 'INT(ROW(A4)/3)' 식으로 변경되어 들어간다.
(왜냐? 상대참조니까~)
결국 A4셀에는 위의 식으로는 1이 구해진다.
같은 방법으로 A7, A11... 셀에는 각각 2, 3...이 구해지므로,
결국 다음 고객번호에 해당하는 고객의 주소가 입력된다.
2) 고객번호+INT(ROW(A1)/3) ??
INT(ROW(A1)/3)의 값이 0이므로 고객번호가 1이라면 1+0 값이 구해진다.
2) VLOOKUP(고객번호+INT(ROW(A1)/3),주소목록,6,0) ??
1번 고객부터 라벨을 만들기 위해 고객번호에 1을 입력한 경우 'VLOOKUP(1,주소목록,6,0)' 식으로 생각할 수 있다. 결국~~~!!
VLOOKUP(1,주소목록,6,0) => 주소목록 범위에서 고객번호가 '1'인 데이터의 6번째 열(주소)의 값을 구해온다.
VLOOKUP(고객번호+INT(ROW(A1)/3),주소목록,2,0) => 위와 같은 데이터의 2번째 열(이름)의 값을 구해온다.
VLOOKUP(고객번호+INT(ROW(A1)/3),주소목록,5,0) => 위와 같은 데이터의 5번째 열(우편번호)의 값을 구해온다.
여기서 잠깐~!!
아래와 같이 오류가 나는 이유는 고객번호를 아직 입력하지 않았으므로 'VLOOKUP(0,주소목록,6,0)' 식으로 간략화되어 고객번호가 0인 고객을 찾게 되는데, 데이터에서 고객번호가 0인 데이터가 없으므로 값을 찾을 수 없어 오류표시가 보여진다. 어짜피 고객번호를 입력하면 데이터가 제대로 표시된다.
이어서 오른쪽 상단의 라벨 부분에 아래와 같은 함수식을 각각 작성해보자.
C1 셀 =VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,6,0) C2 셀 =VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,2,0) C3 셀 =VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,5,0)
함수식 설명
VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,6,0) ??
1번 고객부터 라벨을 만들기 위해 고객번호에 1을 입력한 경우 'VLOOKUP(9,주소목록,6,0)' 식으로 생각할 수 있다. 결국~~~!!
VLOOKUP(9,주소목록,6,0) => 주소목록 범위에서 고객번호가 '9'인 데이터의 6번째 열(주소)의 값을 구해온다.
VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,2,0) => 위와 같은 데이터의 2번째 열(이름)의 값을 구해온다.
VLOOKUP(고객번호+INT(ROW(A1)/3)+8,주소목록,5,0) => 위와 같은 데이터의 5번째 열(우편번호)의 값을 구해온다.
여기서 잠깐~!!
아래와 같이 값이 표시되는 이유는 고객번호를 입력하지 않아도 'VLOOKUP(8,주소목록,6,0)'이므로 고객번호가 8인 데이터가 자동으로 입력되기 때문이다. 어짜피 고객번호를 입력하면 값은 변하게 된다.
3. 함수식 복사하기
주소라벨에 함수식을 모두 채우기 위해 함수식을 작성한 [A1:D3] 셀까지 범위지정한 후 하단에 각각 붙여넣는다.
4. 고객번호 입력하기
F3 셀에 1을 입력하면 고객번호가 1인 고객부터 16인 고객까지 주소와 이름, 우편번호가 자동으로 채워진다.
블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 기본개념을 정확히 알아야
뒤에 나올 'float'을 이해하는데 한결 수월해진다.
이것들이 어떠한 형태로 이루어져있는지 보자면,
위와 같이 하나의 문장에는 보이지 않는 인라인박스들이 무수히 존재한다. 만일 인라인박스에 부분부분 어떠한 스타일을 주려면 span같은 인라인 태그를 삽입하여
그 부분을 지정해 사용하는 것이다. 그러니까 결국 <span>이 빠져있는 각각의 단어들은 선택만 할 수 없을뿐 전부 인라인박스인 것.
그리고 이런 인라인요소들을 감싸는 라인박스가 있으며 또다시 라인박스를 감싸는 블럭박스가 존재한다.
실제 라인이 그려져있지 않더라도 문장 하나하나가 이런식으로 이루어져있다고 머릿속으로 생각할 것.
그럼 여기서중요한 블럭박스에 사용되는 블럭요소와 인라인박스에 사용되는 인라인요소의 차이를 보자.
*블럭요소*
<p>태그나 <div>와 같은 블럭요소는 화면 한줄의 100%를 자기의 영역으로 가진다. 때문에 width값을 별도로 지정해주지 않으면 브라우저의 창을 줄이던 늘리던 끝까지 꽉차게 보여지는 것이다. 자리를 전부 차지해버리는 블럭요소들은 이러한 성질때문에 width값을 별도로 주지 않을 시
다른 것의 옆에 배치될 수 없다. (자신이 한줄을 다 차지해야 하므로...)
이때, div는 특히 모든것을 아우르는 맡형같은 존재이다. div > p 이렇기 때문에 같은 블럭요소라도 <p>안에 <div>를 자식으로 넣을 수 없다.
*인라인요소*
<span>같은 인라인요소들은 width값과 height값을 줄 수 없고,
padding과 margine의 값은 인라인 글줄인 옆으로만 적용되며
위,아래의 간격은 듣지 않느다. (line-height 로만 문장의 위아래 공간을 지정할 수 있다.)
이때, 인라인요소 중 예외적으로 이미지<img> 태그만 width값과 height값을 지정해 줄 수 있으며 만일 이미지를 블럭요소인 <div>로 감싼다면 이미지가 한칸을 전부 차지하여 이미지 옆에 글씨를 배치시킬 수 없는 것이다.
실제로 해보면 아래와 같다.
<div>안에 50x50사이즈의 이미지 하나와 텍스트를 넣으면
인라인요소인 이미지<img> 옆으로텍스트가 들어가고, 남는 텍스트는 아래로 흘러내린다.
'여름방학'부분에 인라인 요소인<span>을 넣어 파란색의 점선을 그어보면 글자 양 옆으로의 '20px' 패딩은
적용되지만 위 아래로의 패딩은 먹지않아 글 높이 간격이 벌어지지 않았다.
게다가 width값 '300px', height값 '300px' 역시 아무런 영향을 미치지 않았다.
(파란색 점선은 padding값만 적용 되었을 뿐이다.)
여기서 이미지에다 블럭요소인 <div>로 감싸주고 스타일로 파란색 테두리를 쳤더니
이미지 옆에 있던 텍스트들이 아래쪽으로 밀려났다.
게다가 파란테두리 라인은 자신이 차지할 수 있는 영역만큼 전체를 꽉 채웠다.
(빨간색 바깥쪽 테두리와의 간격은 빨간색에 10만큼 패딩을 주었기 때문)
만일 여기에 이미지와 텍스트들을 감쌌던 <div>대신 같은 블럭요소인 <p>를 넣는다면 어떻게 될까?
<p>안에 이미지를 감싼 <div>가 들어갔더니 아래처럼 <p>가 <div>를 감당하지 못하고
스타일만 바깥쪽으로 빠져버렸다.
그럼 여기서 한가지 의문.
인라인박스와 블럭박스는 알았다쳐도 인라인박스 요소들로 이루어진 가상의 라인박스라는 개념은 왜 필요할까?이는 뒤에 float에서 알아보자.
어제 네이버에도 블로그 분석기인 애널리틱스가 있다는 걸 알고 냉큼 찾아가 우리 블로그에 소스를 심고 구글 애널리틱스와 비교해보았다.
둘을 비교해본 결과 구글 애널리틱스는 이런저런 기능이 많은 반면에 인터페이스라든지, 사용자 편의가 부족한 반면, 네이버 애널리틱스는 화면이 굉장히 직관적이어서 사용자가 사용하기 편리하고, 중요한 기능만 딱딱 있어 분석하기 매우 좋았다. 물론 구글 애널리틱스만의 장점도 있었다.
먼저 네이버 애널리틱스에 내 사이트나 블로그를 등록하는 방법을 알아보고, 구글 애널리틱스와의 비교 체험기를 올려보겠다.
'skin.html'의 <body> 태그 위의 아무 곳에나 아래와 같이 복사된 스크립트를 붙여넣기(ctrl+v)하면 된다.
위아래 한글은 소스의 시작과 끝을 알리기 위한 주석으로 원래는 없고, 따로 입력한 구문이다.
스크립트를 내 블로그에 적용되면 [실시간분석] 기능만은 바로 확인이 가능하다.
나머지 기능들은 24시간이 지나면 확인할 수 있다.
2. 네이버 애널리틱스 사용 후기(구글 애널리틱스와 비교)
먼저 네이버 애널리틱스가 더 좋았던 점을 살펴보겠다.
네이버 애널리틱스의 첫화면([요약-사이트현황])인데 블로거들이 흔히 말하는 킬러키워드(인기키워드)와 유입검색엔진 유입양을 한눈에 확인할 수 있다. 게다가 신규방문자와 재방문자별로 페이지뷰와 체류시간 등을 따로 볼 수 있다.
인기 키워드를 제외한 기타 기능들은 구글 애널리틱스에서도 확인할 수 있지만 네이버 애널리틱스처럼 쉽게 한눈에 확인할 수 없고, 이리저리 뒤져서 따로따로 확인해야 하기에 너무 좋았다.
네이버 애널리틱스의 첫화면
인기키워드는 티스토리에서 7일간의 유입키워드로 확인할 수는 있지만 네이버 애널리틱스는 날짜를 지정하여 한달 단위나 원하는 기간 동안의 인기키워드를 확인할 수 있다는 점에서 정말 환영할만한 일이다.
이 기능은 구글 애널리틱스에서도 확인할 수 없었던 기능이라 더욱 반갑다능~
아래 화면은 [유입분석-유입검색어] 화면인데 인기키워드를 더욱 자세히 확인할 수 있다.
네이버 애널리틱스 [유입분석-유입검색어]
네이버 애널리틱스는 당연한 말이겠지만 한국사람이라면 훨씬 편하게 블로그나 사이트 분석을 할 수 있도록 메뉴를 만들어놓고, 화면 등을 굉장히 보기 좋게 직관적으로 구성했다.
아래 구글 애널리틱스 화면을 보자면 '참여도', '고급 세그먼트', 대시보드', '방문 심도' 등 언뜻 알아보기 힘든 단어로 채워져 있고, 날짜 조회 부분도 굉장히 불편하게 구성되어 있는 걸 볼 수 있다.
아무래도 영어로 만들어진 화면을 한글로 번역하는 과정에서 알아보기 힘든 단어로 바뀐 것도 있겠지만, 편리도만 보아도 완벽한 네이버의 승~!!이라 말하고 싶다.
네이버 애널리틱스 [방문분석-방문체류시간]
구글 애널리틱스 [잠재고객-방문형태-참여도]
이제 구글 애널리틱스가 더 좋았던 점을 살펴보겠다.
네이버는 [실시간분석] 기능에서 실시간으로 사람들이 보고 있는 페이지를 볼 수 있는 '인기페이지' 기능이 있는데, 네이버 애널리틱스에서는 이 페이지를 주소로만 확인할 수 있었던데 비해, 구글 애널리틱스에서는 글제목으로도 확인할 수 있다.
이게 은근히 블로그 분석에 도움이 많이 된다. 글주소를 클릭한다고 글이 뜨는게 아니라서 무슨 글인지 알려면 글주소를 복사해서 인터넷 주소창에 붙여넣고 확인해야하는 번거로움이 있다.
그런데 구글 애널리틱스에서는 친절하게도 글제목으로도 인기페이지를 표시해주니 한눈에 파악할 수 있어 정말 도움이 많이 되고 편리하다.
워낙 평소에 도움이 많이 되는 기능이라서만약 네이버 애널리틱스에 이 기능까지 도입된다면 구글 애널리틱스가 더이상 필요가 없을 것 같다.
네이버 애널리틱스의 실시간검색 화면의 '인기페이지'
구글 애널리틱스의 [실시간-콘텐츠]
네이버 애널리틱스에서는 방문자들이 처음 들어온 페이지(시작페이지)와 마지막으로 본 페이지(종료페이지) 등을 따로따로 표시해주고 있다. 물론 구글 애널리틱스에서도 따로 표시해주지만, 이걸 종합적으로 그림으로 표시하여 방문자가 사이트에 방문하여 나갈때까지의 흐름을 한눈에 파악할 수 있도록 보여주는 기능도 있다.
방문자 흐름을 보다보면 사람들이 가장 이탈수가 적은 페이지를 파악하기도 쉬워서 사이트 분석에 도움이 많이 된다.
네이버 애널리틱스 [페이지분석]
구글 애널리틱스 [잠재고객-방문자 흐름]
그리고, 구글 애널리틱스에서는 티스토리 사용자들이 많이 달아놓은 구글 애드센스까지 페이지별로 분석할 수 있다. 물론 같은 구글이니 가능한 기능이니까, 애드센스 분석을 원한다면 구글 애널리틱스를 사용하는 방법밖에 없다.
구글 애널리틱스 [콘텐츠-애드센스-애드센스 페이지]
네이버 애널리틱스는 좀더 사용해봐야겠지만 일단 둘다 사용해본 결과 네이버에 구글의 몇가지 기능만 더 추가된다면 네이버를 사용하게 될 것같은 느낌이 든다.
아쉬운 점이라면 네이버실시간분석 화면에서 가끔 몇가지 기능이 작동을 안하는 점인데, 비슷하게 구글도 실시간 화면에서 한글이 모두 '?'로 표시되는 경우가 종종 있는 걸보면 이건 '실시간'이라는 문제때문인 듯하다.
그나저나 네이버로 보니 확실히 우리 블로그의 페이지뷰나 재방문의 문제점을 다시 깨닫게 되었다는 ㅠ
엑셀에서 빈셀/빈칸을 모두 없애는 경우이거나, 데이터에 입력된 쓸데없는 공백을 모두 없애는 경우 [홈]-[편집]-[찾기 및 선택] 기능을 이용하면 편리하게 없앨 수 있다.
중간중간 있는 빈셀을 삭제할 경우 빈셀들이 떨어져 있으므로 Ctrl 키를 누르고 빈셀을 각각 선택한 후 삭제하는 경우가 대부분일 것이다. 하지만, 이 방법은 데이터가 많으면 많을수록 즉, 빈셀이 많으면 많을수록 손이 많이 가고 오래 걸리므로 그럴 경우에는 아래와 같은 방법을 사용하면 금방 빈셀을 없앨 수 있다.