티스토리 블로그 스킨 예쁘게 꾸미는 방법!

티스토리 블로그를 꾸미는 방법은 매우 간단합니다. 우선은 두 가지 방법을 통해서 꾸며볼 수있는데, 첫번째는 HTML 편집을 통한 방법과 두번째는 CSS코드를 수정하는 것입니다. HTML 편집은 스킨 레이아웃의 구조를 바꿀 수있다고 보시면 되겠습니다. 예를들어, 티스토리 블로그 하단에 있는 공유버튼을 상단으로 옮긴다거나, 사이드바를 없앤다거나 등이 있습니다. (물론 CSS 혹은 자바스크립트를 통해서도 할 수있기는 합니다만, 아무래도 깔끔하게 제거 혹은 …

더 보기

[HTML5] ul과 li 태그 완벽하게 이해해보고, 사용 및 활용해보기

보통 ul과 li태그는 홈페이지 메뉴 혹은 연속되는 콘텐츠들을 작성 및 나열할때 자주 사용되는 태그입니다. 물론, ul과 li를 굳이 사용하지 않고, div 혹은 span, p 등을 통해서도 연속되는 콘텐츠와 메뉴들을 작성할 수는 있습니다만 아무래도, 코드가 조금 지저분해진다는 점이 있고, css 작성의 약간의 번거로움이 추가되기 때문에 ul과 li 조합이 가장 좋다고 볼 수있습니다. 이번 포스트에서는 ul과 li를 …

더 보기

[HTML5] span 태그, 확실하게 마스터해보기

span 태그는 줄바꿈 및 영역생성 없이, 바로 옆에 배치되는 태그라고 보시면 되는데요. 의외로 span과 p, div 이 3가지 차이점을 모르시는 분들이 꽤 많으신 것같아, 먼저 간략하게 차이점부터 설명드려보도록 하겠습니다. span, p, div 차이점 span은 위에서 언급드린 바와 같이, 한 영역을 생성하지 않고, 줄바꿈 없이, 가로열로 배치되는 태그라고 보시면 되겠습니다. p는 paragraph의 약어로써, 문단이라는 의미가 있습니다. …

더 보기

[HTML5] div 태그, 이렇게 하면 마스터할 수있어요!

div 태그는 HTML5에서 가장 많이 사용되는 태그라고 볼 수있습니다. 주로, 해당 블록(영역설정)을 넣을때 사용하는 편입니다. 우선 빠른 이해를 위해 코드 내용부터 알아보도록 하겠습니다. div의 기본 태그 작성은 <div> </div> 입니다. 이 안에다가, 무언가의 입력 내용을 넣는다거나, 추가 html 태그를 삽입할 수있습니다. 위와 같이 div 블럭안에 p태그와 span태그를 넣어주었으며, 위와 같이 코드활용을 하실 수있습니다. div 태그에 …

더 보기

[HTML5] h1 태그 사용 및 활용하는 방법

보통 h1태그의 경우는 대제목을 작성할때 사용하며, 본문 내용으로는 잘 넣지 않는 편입니다. 제 워드프레스 블로그로, 예시를들어 보면, ‘[HTML5] h1 태그 사용 및 활용하는 방법‘이란 제목 부분이 h1태그로 사용되었습니다. 마찬가지로, 티스토리 블로그 본문 내용 역시, 제목부분에 h1태그가 들어가있다는 사실을 알 수가 있습니다. (일부, h2~h3태그를 삽입한 스킨도 있긴합니다만, 구글 SEO 측면에서 별로 좋지 않다고 볼 수있습니다. 왠만하면 …

더 보기

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

앞으로 HTML5, 자바스크립트, CSS를 배우기에 앞서, 비주얼스튜디오 사용하는 방법과 바로 HTML 실행하는 방법, 다운로드에 대해서 알아보도록 할건데요. 우선 다운로드는 마이크로소프트 회사 홈페이지에서 다운하실 수있습니다. 과정은 아래의 이미지를 참고해주시면 되며, 링크는 여기를 참고해주세요. 현 기기에 맞춰서 다운로드해주시면 되는데요. 맥북 사용자이신 분들은 맥OS를, 윈도우 데스크톱에서 이용하고 있으신 분들은 윈도우 64버전을 누르시면 됩니다. 바탕화면에다가 바로 아이콘을 추가하시고 싶으신 …

더 보기

CSS background 속성 완벽하게 이해해보기

CSS background 속성 CSS background 속성 가지고 사용할 수있는 것은 내 웹사이트나 블로그의 각 레이아웃 색상을 변경할 수있습니다. html div 속성 값만 알고있다면, 내가 원하는 세부적인 부분 하나하나, 내 입맛대로 모두 변경할 수있는데요. 그 트릭을 여기서 한번 설명드려보겠습니다. 손쉽게 div 속성값 알아내보기 div 속성값은 각 브라우저에 있는 개발자도구를 통해 쉽게 알아낼 수있습니다만, 개인적으로는 크롬 브라우저를 …

더 보기