-->

이 블로그는 발췌,인용,복사를 금지 합니다.


'컴퓨터-IT-인터넷-모바일/HTML/CSS/PHP'에 해당되는 글 3건

  1. 2017.02.10 티스토리 카데고리 펼쳐 보이기
  2. 2015.11.06 네이버 애널리틱스
  3. 2015.06.14 DIV 알아보기

티스토리 카데고리 펼쳐 보이기


컴퓨터-IT-인터넷-모바일/HTML/CSS/PHP
2017.02.10 16:55


OmnisLog


티스토리 카데고리 펼쳐 보이기티스토리 카데고리 펼쳐 보이기

티스토리 서브 카테고리 펼쳐 보이는 방법. 

티스토리 - Tistory 블로그 대문에서 카테고리를 펼쳐보이고 싶어도 기본적으로 제공하는 화면관리에서는 불가능합니다.


그렇지만 스킨 스크립트(소스)를 약간만 편집하면 간단하게 원하는대로 카테고리를 서브카테고리로 펼쳐 보이게 할 수가 있습니다.


티스토리는 고맙게도 오픈소스를 지향해서 유저가 필요에 의해서 스킨을 편집해서 사용 할수 있도록 거의 제한을 두지 않고 있습니다.


방법은 관리자 메뉴에서 HTML/CSS 편집을 클릭한후
HTML소스화면에서 "[##_category_##]" 를 찾습니다.

혹시 모르는 분을 위해서 알려 드린다면 찾는방법은 아래의 캡쳐 이미지처럼 소스화면에서 Ctr+F 누른다음 [##_category_##]를 붙여넣고 엔터 치면 긴 HTML Script - 소스문장에서 찾아 줄 것입니다.


왼쪽에 보인 캡쳐 이미지는 현재 보는 이 블로그의 카테고리를 캡쳐 한 것입니다.  

티스토리 카데고리 펼쳐 보이기티스토리 카데고리 펼쳐 보이기



스킨 소스에서 찾아진 모습을 아래에 보여 드립니다.

티스토리 카데고리 펼치기티스토리 카데고리 펼치기


찾아진 카테고리 소스 문장 바로 아래에 
<script language="JavaScript">try{expandTree();}catch(e){}</script>

이 문장을 복사해서 붙여넣고 저장합니다.


Html 소스에 대한 지식이 없는 분이라면 이  HTML 소스 편집 과정에서 다른 소스 문장 하나라도 편집되지 않게 조심해야 합니다.
예상하지 못한모습으로 스킨이 변형되거나 에러가 날 수도 있기 때문입니다.


아래의 이미지는 정상적으로 붙여넣어 편집된 스크립트 모습입니다.
티스토리 카데고리 펼쳐 보이기티스토리 카데고리 펼쳐 보이기

여기서 찾기하거나 복사하기가 안되기 때문에 텍스트파일로 올려 드립니다.

.txt

 
파일내용

카테고리 펼쳐보이기 소스


[##_category_##]

<script language="JavaScript">try{expandTree();}catch(e){}</script>

입니다.








신고

'컴퓨터-IT-인터넷-모바일 > HTML/CSS/PHP' 카테고리의 다른 글

티스토리 카데고리 펼쳐 보이기  (0) 2017.02.10
네이버 애널리틱스  (0) 2015.11.06
DIV 알아보기  (0) 2015.06.14
Share
Posted by RiverWind blogessay46

댓글을 달아 주세요

네이버 애널리틱스


컴퓨터-IT-인터넷-모바일/HTML/CSS/PHP
2015.11.06 09:55


OmnisLog


네이버 애널리틱스가 티스토리 플러그인으로 나왔네요.

구글애널리틱스에 의존해 왔는데 플러그인에 네이버 애널리틱스가 올라왔네요.
일단 구성을 마치고 씁니다.
확실히 알지는 못하지만 시간이 경과하면 최대장점이나 단점같은게 눈에 띄겠지만 현재로서 기능설명을 보면 구글의 것에 뒤지지않는다는 느낌이 듭니다.

아무래도 구글보다 뒤에 나왔기 때문에 더 발전된 기능이길 바라는 마음입니다.
현재 구글과 함께 두가지 다 사용해 보는 것으로 하며 비교 분석도 해보고 차이가 무었인지도 두고 점검해 볼 생각입니다.

국내 포털은 네이버가 타의 추종을 불허하는 유입자를 보내는 곳임으로 네이버 애널리틱스가 좀더 유용한 성능을 발휘하리라는 기대를 합니다.

네이버 애널리틱스네이버 애널리틱스


일단 가입하고 숫자로 구성된 일련번호같은걸 입력하고 간단한 스크립트를 복사해서 HTML 붙여넣으면 되는것이군요.

결과가 보여지는 시간은 좀 걸릴것라고 생각합니다.


네이버 애널리틱스네이버 애널리틱스


네이버 애널리틱스네이버 애널리틱스


 



 


신고

'컴퓨터-IT-인터넷-모바일 > HTML/CSS/PHP' 카테고리의 다른 글

티스토리 카데고리 펼쳐 보이기  (0) 2017.02.10
네이버 애널리틱스  (0) 2015.11.06
DIV 알아보기  (0) 2015.06.14
Share
Posted by RiverWind blogessay46

댓글을 달아 주세요

DIV 알아보기


컴퓨터-IT-인터넷-모바일/HTML/CSS/PHP
2015.06.14 12:31


OmnisLog


DIV 알아보기


HTML 태그에서 가장 많이 사용되는 기초적인 태그가 DIV일 것 입니다.

과거에 많이 사용하던 Table 태그를 대신하며 이보다는 유연성있고 광범위한 속성을 가지는 태그입니다.


스크립트를 따로 공부하지 않은 일반 블로그 운영자로서 블로그 스킨을 만질때 자주 마주치는 HTML CSS의 기본적인 사용법을 알아 보려는 것입니다.

그 첫번째로 DIV 태그의 속성들과 그 사용방법 입니다.

 

DIV 태그는 한마디로 말해서 웹페이지에서 영역을 지정하는 태그 입니다.


구조는 <div> 와 </div> 로 구성되되며 "와"의 자리에 표시할 문자 ,데이터,이미지,영상등을 표시하는데 여러가지 속성을 주어서 꾸밀수 있는 속성 태그가 준비되어 있습니다.
속성을 다 모르드라도 기본적으로 표시됩니다.
다만 DIV는 
style로 명명하는 다양한 속성을 DIV 태그와 함께 사용 할 수 있습니다.
style속성을 인가 할 때는 간단하기 DIV와 함게 나열할 수도 있지만 CSS형태로 별도로 지정해서 중복되는 문장에 일일이 
style속성을 부여하지 않아도 되고 스크립트가 깔끔하게 되는 장점이 있습니다.
또 큰 소스일경우에는 오프닝 속도를 개선 하는 효과도 있습니다.


DIV의 기본적인 표시 

1.영역만을 지정함-아무 속성없이 표시함. 


구조:영역의 크기 색갈등이 지정되지 않았기 때문에 DIV가 끝나는 </DIV>까지 영역이 지정 되는 것입니다.

<div> 

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 표시 합니다.

</div>


웹 페이지에 보여지는 결과여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 표시 합니다.



2.영역을 지정하고 지정된곳에 색상을 부여함.

구조: style="background: green"이라는 색갈 속성이 지정되어서 <DIV>가 지정한 영역 안쪽이 노란색으로 표시 됩니다.

<div style="background: Yellow";>

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 배경색갈을 지정해서 표시 합니다.

</div>


웹 페이지에 보여지는 결과:

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 배경색갈을 지정해서 표시 합니다.


 

노란색으로 쓰여진 부분이 사실은 하나의 박스(BOX)즉 사각형 영역입니다.
박스의 크기를 지정하지 안았기 때문에 연속되는 문장영역이 전부 표시되는 것을 볼수 있습니다.



3.DIV가 지정하는 영역의 크기를 가로와 세로크기를 주어진 단위(예Px-픽셀)로 지정해서 표시 합니다.


구조:style=" 역역의 가로크기를 width:숫자px ; 세로크기를 height: 숫자px로 표시합니다. 

style 태그의 사용 규칙은 = 표시로 연결하고 속성을 " 와 " 로 감싸고 끝날때는 쎄미콜론 ; 로 마칩니다. 


실제스크립트

<div style=" width:?숫자?px ; height:?숫자?px";>

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 배경색갈을 지정해서 표시 합니다.

</div>

단??는 숫자만 허용합니다.


예문 : 가로 250픽셀, 세로 80픽셀인 사각형을 안쪽에 노란색바탕으로 하고 ,콘텐츠를 표시합니다. 

실제스크립트

<div style="background: Yellow; width:250px;height:80px"; >

노란색 박스 안에 콘텐츠가 표시되는 곳입니다.

</div>

웹 페이지에 보여지는 결과:

노란색 박스 안에 콘텐츠가 표시되는 곳입니다.



 

위에서 시험해본 노란색갈을 나타내는 색갈 태그는 영문으로 표시 할 수 있는 Yellow,Blue,Green,Red 등의 단색도 있지만 보다 복잡한 색갈을 표시 하려면 컬러코드 - Color Code를  사용 할 수 있습니다.

배경색갈이 노란색인 가로 250픽셀 게로 80픽셀인 사각형 안에 주어진 콘텐츠인 글자가 쓰여진것을 볼 수 있으며 박스보다 긴 문단은 자동으로 줄바꿈 되는것을 볼 수 있습니다. 



 

아주 간단한 DIV 태그를 알아 봤는데 다음에는 보다 복잡한 속성을 주어서 활용해 보는 공부를 해 보려 합니다.


Div 태그Div 태그


 




신고

'컴퓨터-IT-인터넷-모바일 > HTML/CSS/PHP' 카테고리의 다른 글

티스토리 카데고리 펼쳐 보이기  (0) 2017.02.10
네이버 애널리틱스  (0) 2015.11.06
DIV 알아보기  (0) 2015.06.14
Share
Posted by RiverWind blogessay46

댓글을 달아 주세요



티스토리 툴바