티스토리 Html | Html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민 205 개의 가장 정확한 답변

by

당신은 주제를 찾고 있습니까 “티스토리 html – html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 이사양잡스 이(가) 작성한 기사에는 조회수 4,979회 및 좋아요 168개 개의 좋아요가 있습니다.

티스토리 html 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민 – 티스토리 html 주제에 대한 세부정보를 참조하세요

이사양채널을 후원하고 싶으신 분들을 위해 가입 채널이 마련되어 있습니다.
https://www.youtube.com/channel/UC9iuBucKC2GGkJNcgKSzGaw/join

웹페이지에서 html 사용자체를 제한 한다는 것은 의도가 분명합니다. 자기들 입맛에 받게 블로거들을 조종하겠다는 것입니다.
실제로 네이버 블로거들은 돈돈 많이 주지 않는 네이버의 변덕을 맞추느라 엄청 고생하십니다. 그리고 언젠가 티스토리를 알게 되어서 새롭게 시작하셨지만 html 이라는 큰 장벽에 또한번 좌절하게 되는데요. html 기초의 기초도 필요 없을정도만 아시면 됩니다. 이제 마음 편히 먹고 티스토리 계속 하세요
#html기초 #네이버블로그 #돈버는부업

티스토리 html 주제에 대한 자세한 내용은 여기를 참조하세요.

[Tistory]html의 기본구조와 티스토리 html 기본편집 – 랭크로

티스토리를 관리하다 보면 글자체 변경, 여백조정와 같은 스킨편집 작업이나 수익원 창출을 위한 애드센스 광고게재 등을 위하여 html을 수정하는 일 …

+ 여기를 클릭

Source: rankro.tistory.com

Date Published: 1/10/2021

View: 7886

티스토리 블린이를 위한 스킨편집 기초, HTML과 CSS

티스토리를 시작할 땐 모르다가 운영하면서 스킨이 100% 맘에 들지 않는다. 뭔가를 고치고 싶은데 HTML이 뭐고 CSS 가 뭐지? 스킨 편집의 개념과 기초 …

+ 여기에 보기

Source: dpreviewplus.tistory.com

Date Published: 5/12/2021

View: 5207

[티스토리 꾸미기>html 편집] 코딩을 모르는 사람들을 위한 html …

저는 티스토리를 처음 꾸미기 시작할 때 굉장히 막막했는데, 특히나 티스토리는 html, css를 직접 편집해줘야 더 제 마음에 드는 디자인을 만들 수 …

+ 여기에 자세히 보기

Source: ranawootrom.tistory.com

Date Published: 11/26/2022

View: 9180

[티스토리] HTML 편집 메뉴 찾기 – 옐로우캣

오늘은 웹페이지 구성의 뼈대라고 부르는 HTML 편집 메뉴가 어디있는지 살펴보도록 하죠. · 자, 그럼 티스토리에서 html문서를 어디서 수정해야 하는지 …

+ 여기에 더 보기

Source: koreatoworld.tistory.com

Date Published: 8/14/2022

View: 4226

HTML과 CSS로 티스토리 스킨 편집하기 – 개발자, 새로운 시작

HTML과 CSS로 티스토리 스킨을 편집해보았다. 먼저 마음에 드는 스킨을 골랐다. Book Club이 내가 원하는 기능을 대부분 갖추고 있었다.

+ 여기에 더 보기

Source: act-think.tistory.com

Date Published: 7/11/2022

View: 8825

티스토리에서 HTML이 자유롭다. – 백전백승

티스토리에서 HTML은 단지 제목, 목록, 이미지 등 HTML 태그에 한정된 것이 아니라 CSS와 자바스크립트를 불러와 사용할 수 있다. 다른 블로그는 HTML …

+ 더 읽기

Source: min-blog.tistory.com

Date Published: 6/3/2022

View: 4642

티스토리 HTML/CSS 수정하기 – 맨땅에 헤딩하는 사람

또한 글 작성 시 문서편집기처럼 글씨크기 변경 등의 다양한 기능들을 제공하지도 않는다. (HTML이라 그런거라 생각한다..) 나를 포함해 티스토리 블로그 …

+ 여기에 자세히 보기

Source: purplechip.tistory.com

Date Published: 2/2/2021

View: 9809

티스토리 HTML 스킨 편집하기

네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다. 그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다. 이번 …

+ 여기에 자세히 보기

Source: cpro95.tistory.com

Date Published: 6/25/2021

View: 3352

티스토리 HTML / CSS 편집기 업데이트! 드디어 편집기에 …

요즘에 REPL 온라인 IDE도 얼마나 좋아졌는데 티스토리의 HTML 편집기는 오래전에 시간이 멎은 듯 보였습니다. 스킨 작업이나 자바 스크립트를 만들 때 …

+ 자세한 내용은 여기를 클릭하십시오

Source: digiconfactory.tistory.com

Date Published: 8/30/2021

View: 8149

티스토리 사용자들을 위한 웹코딩 HTML CSS 기초 개념

이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성 …

+ 여기에 더 보기

Source: rgy0409.tistory.com

Date Published: 7/23/2021

View: 2909

주제와 관련된 이미지 티스토리 html

주제와 관련된 더 많은 사진을 참조하십시오 html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민
html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민

주제에 대한 기사 평가 티스토리 html

  • Author: 이사양잡스
  • Views: 조회수 4,979회
  • Likes: 좋아요 168개
  • Date Published: 2021. 7. 18.
  • Video Url link: https://www.youtube.com/watch?v=EYD33mZoXTc

[Tistory]html의 기본구조와 티스토리 html 기본편집

티스토리를 관리하다 보면 글자체 변경, 여백조정와 같은 스킨편집 작업이나 수익원 창출을 위한 애드센스 광고게재 등을 위하여 html을 수정하는 일이 생기곤 합니다. html 이란 Hypertext Markup Language의 약자로 웹문서를 만들기 위하여 사용하는 가장 기본적이며 단순한 웹 언어입니다.

티스토리 편집기를 이용한 글쓰기도 html으로 구성된 페이지에 불과합니다 이렇게 말이죠.

위의 이미지는 티스토리 글쓰기 편집창의 html 편집기 상의 html입니다. 다행히도 현재는 글쓰기를 할 때 html로만 코딩작업을 하지는 않지만, 필요할 때 html을 편집해야 하는 일이 생기기도 합니다. 그렇기 때문에 최소한의 html 편집방법 및 html의 기본구조에 대한 이해가 필요한 것입니다.

이번 시간에 html에 대한 강의를 하려는 건 아닙니다. 그저 티스토리에서 html을 편집하는 가장 기본적인 사용법 정도에 대한 내용이니 html을 공부하시고자 하시는 분은 이 포스트에서 나가셔도 됩니다. 그럼 티스토리 html 편집을 어떻게 하는지 저와 함께 해보시죠. 출발!

HTML의 기본적인 구성

▼ 티스토리 블로그 뿐만 아니라 html을 사용하는 웹사이트는 기본적으로 아래와 같은 구조로 되어 있습니다.

◆ <> 및 을 태그라고 하며 태그는 보통 시작태그인 <> 와 종료태그인 으로 구성됩니다. 태그로 시작한 HTML 문서는 태그로 마무리가 되는 것이죠. 그럼 하나씩 살펴볼까요?

◆ 는 이 문서가 HTML문서임을 선언하는 것입니다.

◆ 문서는 로 시작해서 로 끝나며, 그 사이에 와 가 있습니다. 가 끝난 후에 가 있는 구조이죠. 편의상 을 ‘head 영역’, 을 ‘body 영역’이라 부르겠습니다.

◆ head 영역에는 타이틀, 스타일시트, 작성자나 검색키워드, 메타테그 등이 위치하며, 실제로 홈페이지에는 내용이 보이지 않습니다.

◆ body 영역에는 본문과 자바스크립트가 위치하고, 페이지에 접속했을 때 실제로 보이는 부분입니다. 홈페이지나 블로그에서 보이는 텍스트와 이미지는 모두 이 body 영역에 있는 것이죠.

티스토리에서 HTML을 편집하는 두 가지 방법

◆ 티스토리에서 HTML을 변경하는 방법은 두 가지가 있습니다. 첫 번째는 스킨편집기에 있는 HTML편집기 이구요, 두 번째는 글쓰기 편집창에 있는 HTML 편집기입니다. 스킨편집기에 있는 HTML편집기는 스킨 전체에 적용 되는 사항이기 때문에 해당 편집기에서 내용을 추가하거나 변경하면 블로그 전체에 반영 이 됩니다. 애드센스 광고를 여기서 적용하면 블로그 전체에 반영 이 되는 것이죠. 반면, 글쓰기 편집창에 있는 HTML편집기는 해당 포스트에만 적용 이 됩니다. 포스트마다 애드센스 광고의 위치를 별도 지정하려면 여기에 광고코드를 입력 해야 합니다.

1. 스킨편집기에서 HTML 편집하는 방법

▼ 관리자페이지의 ‘꾸미기’ 하단의 ‘스킨편집’ 탭을 클릭합니다.

▼ 우측상단의 ‘html 편집’ 버튼을 눌러주세요.

▼ 상단의 초기값으로 설정된 ‘HTML’ 탭을 선택합니다.

▼ 위에서 설명드린대로 으로 선언한 후에 태그로 시작하고, 이어서 태그로 시작하는 head 영역에 이 html 문서의 정보가 담겨져 있습니다. 아래로 쭉 내리면 태그와 태그, 태그가 각각 있겠죠?

▲ 이렇게 표시된 태그는 주석을 의미합니다. 사이에 있는 내용은 실제로 html에 반영이 안되며 해당 태그가 무엇인지를 알려주는 역할을 합니다. 여기에는 인피드광고 스크립트에 대한 내용과 네이버검색로봇 검색기능에 대한 테그가 달려있군요. 해당 태그가 무엇인지 기억하기 위해 제가 달아둔 주석입니다.

◆ 티스토리 스킨의 html 문서는 코딩이 꽤 길기 때문에 특정 단어를 찾으려면 검색을 해야합니다. 특정 단어를 찾기 위해서는,

1. 편집기 위에 마우스 커서를 위치시킨 후,

2. Ctrl+F 키를 눌러 검색창을 불러옵니다.

3. 해당 검색창에 검색어를 입력한 후에 엔터키를 누르면 됩니다.

▼ 검색어 로 해서 검색해보겠습니다.

▼ 검색결과 텍스트가 노랑색 바탕으로 표시되는데, 검색갯수와 현재 스크롤 위치가 우측 스크롤부분에서 확인이 가능합니다. 검색결과는 노란색 띠로 표시가 되고, 현재 스크롤 위치는 회색 띠로 표시됩니다. 태그는 하나 밖에 존재하지 않는군요.

▼ 이번에는 으로 검색해보겠습니다.

▼ 노란색 띠가 4개 있기 때문에 검색결과가 4개인 것을 알 수 있습니다. 현재 스크롤 위치는 첫 번째 노란색 띠 위에 위치하고 있죠.

◆ 다음 검색결과를 순차적으로 확인하려면

1. 마우스 커서를 편집기 위에 위치시킨 후

2. Ctrl + G 키를 눌러주면 됩니다.

▼ Ctrl + G 키를 한 번 누른 결과 다음 검색결과로 위치가 이동되었습니다. (현재 스크롤 위치가 두 번째 노란색 띠 위로 변경이 되었죠?) 다음 결과를 확인하고 싶다면 Ctrl + G 키를 한 번 더 누르면 되겠죠?

▼ 와 사이에 각종 메타태그 및 추적코드를 넣으라고 하는 경우가 있습니다. 저는 태그 바로 아래에 태그와 코드들을 모아두었습니다.

▼ 마찬가지로 와 사이에 각종 스크립트를 삽입해야 하는 경우도 있습니다. 여기서도 저는 태그 바로 아래에 모든 스크립트를 모아뒀습니다.

2. 글쓰기 편집창에서 HTML을 편집하는 방법

▼ 글쓰기 편집창의 우측 상단에 있는 ‘HTML’ 체크박스에 클릭해주세요.

▼ 그럼 기존 글쓰기가 html 편집화면으로 변경이 됩니다. 여기서 해당 포스트의 html 코딩 작업이 가능합니다.

▼ 저는 애드센스 디스플레이 광고를 각 포스트 필요한 곳에 게재하고 있습니다. 아래는 애드센스 디스플레이 광고를 반영한 html 입니다. (애드센스 광고 설정하는 방법에 대해서는 조만간 포스팅하도록 하겠습니다.)

마치며…

HTML을 익혀두면 사실 티스토리 블로그를 더 폼나게 바꿀 수 있습니다. 광고코드 삽입을 하더라도 크기와 위치를 적당한 곳으로 선정할 수도 있고, 주어진 틀인 스킨을 내 마음대로 변형해서 사용할 수도 있거든요. 그래서 지금은 오래 전에 익혔던 HTML을 다시 기억 속에서 꺼내볼까 고민 중에 있습니다. 할까말까… 배부른 고민인가요? 일단 다른 포스팅을 하면서 생각해보겠습니다. 오늘은 여기까지.

티스토리 블린이를 위한 스킨편집 기초, HTML과 CSS

반응형

티스토리를 시작할 땐 모르다가 운영하면서 스킨이 100% 맘에 들지 않는다. 뭔가를 고치고 싶은데 HTML이 뭐고 CSS 가 뭐지? 스킨 편집의 개념과 기초를 알아보자.

목차

1. 티스토리의 스킨

1) 티스토리의 특징

2) 스킨의 디자인 변경

3) 스킨 디자인의 부분 변경

2. HTML과 CSS

1) HTML

2) CSS

3. 티스토리의 코드 수정 방법

1) HTML 수정메뉴의 위치와 화면 구성

2) 에디터의 사용법

4. 마치며

1. 티스토리의 스킨

1) 티스토리의 특징

티스토리는 다양한 디자인의 스킨을 기본으로 제공한다. 서비스형 블로그 네이버처럼 고정된 디자인이 있는 것이 아닌, 스킨이라는 이름으로 다양한 형태의 블로그를 만들 수 있다. HTML을 제대로 안다면 아예 처음부터 완전히 다른 디자인이 가능하기도 하다. 즉 HTML과 CSS를 직접 작성하거나 수정이 가능하다.

이러한 특징으로 네이버 같은 서비스형 블로그와 워드프레스 같은 설치형 블로그의 중간 형태의 성격을 가지고 있다.

2) 스킨의 디자인 변경

티스토리는 기본적으로 스킨을 간편하게 바꿀 수 있고 스킨마다 특유의 기능이 있어서, 간단하게 옵션을 바꾸는 것만으로도 블로그의 디자인을 일부 바꿀 수 있다. 포스팅의 리스트 모양을 바꾼다거나, 카테고리 수정, 링크 수정 타이틀 변경 등이 가능하다

3) 스킨 디자인의 부분 변경

스킨 자체도 HTML 코딩으로 되어있고 수정이 가능하기 때문에 일부 맘에 안 드는 부분을 수정할 수 있다. 스킨이 여러 개라도 100% 내 입맛에 맞을 수 없기 때문에 아쉬운 부분이 있는데, HTML 코드를 전부 알지 못해도 일부 코드만 알면 아쉬운 부분을 어느 정도 해소할 수가 있다.

2. HTML과 CSS

코드를 수정하려고 한다면 일단 구조를 알아야 할 것이다.

1) HTML

Hyper Text Markup Language 의 약자로 일종의 웹 언어이다. 워드프로세서를 써보면 글씨 크기나 색상을 바꾼다거나 표를 만든다거나 이미지를 넣는 등의 기능으로 문서를 보기 좋게 만드는데, 문제는 해당 워드프로세서 프로그램이 없다면 볼 수 가 없다. HTML은 웹을 통해 문서를 보기좋게 만드는 규약이다. 예를 들어 특정한 문자를 쓰고 그 앞뒤를 굵은 글씨로 쓰게 하는 태그로 감싸면 해당 문자가 굵은 글씨로 표현이 된다.

지금은 거의 웹문서의 뼈대인 레이아웃을 만들 때 사용한다.

2) CSS

Cascading style sheets 의 약자로 주로 문자나 이미지의 크기나 색상, 여백 등의 문서의 스타일을 정의하는데 쓰인다. 보통 스타일시트 라고 부른다. HTML로 웹 페이지의 뼈대를 세우고 그 안에 들어가는 문자나 이미지의 크기 색상 여백 등을 CSS에 정의하고, HTML은 뼈대안에 문자나 이미지를 배치할 때 CSS를 참조하여, 페이지를 완성한다.

HTML과 CSS 두 개로 나누는 게 복잡해 보일지 모르지만 웹페이지에 반복적으로 나오는 여백, 글자크기 등이 HTML에 다 들어있어서 일일히 지정하면서 코딩했다면, 전체적으로 디자인을 바꿀 때 HTML 전체를 수정을 해야 하지만 CSS로 정의해 놓으면 CSS 한 부분만 수정해도 HTML이 참조한 해당 스타일 요소는 한 번에 적용이 된다.

쉽게 설명하면 블로그의 구조를 바꾼다거나 구글 광고 코드 스크립트를 추가한다거나, 뭔가 글씨를 넣는다거나, 하는 것들은 HTML을 수정하면 되고, 글씨 크기를 바꾼다거나 여백을 바꾼다거나, 이미지 크기를 바꾼다거나, 색상을 바꾸는 것들은 CSS를 수정하면 된다.

예를 들면 포스팅 목록에 제목이 잘리는걸 안 잘리게 2줄로 만든다면, 제목이 들어가는 위치가 바꾼다거나 하는 레이아웃이 변경되는 것이 아니기 때문에 CSS쪽에서 수정할 부분을 찾아야 한다.

3. 티스토리의 코드 수정 방법

1) HTML 수정 메뉴의 위치와 화면 구성

티스토리의 관리 메뉴에 꾸미기에 스킨편집을 누르면 스킨편집 메뉴가 나오는데 오른쪽 스킨편집 창 상단에 html 편집 메뉴를 누른다.

스킨편집 메뉴를 선택한다.

html 편집 메뉴를 누르면 아래와 같이 나오는데 왼쪽은 수정한 내용을 적용한 화면, 오른쪽은 코드를 수정할 수 있는 에디터다.

HTML 편집화면

왼쪽 화면을 보면 왼쪽 상단에 홈이라고 있는데 이 메뉴를 누르면 보고싶은 화면을 선택할 수 있다. 왼쪽의 화면은 레이아웃만 보여주는 화면이라 클릭은 안되기 때문에 클릭했을때의 화면을 왼쪽위 메뉴로 선택해야 한다.

왼쪽 화면 중앙위에는 아이콘 세개가 있는데 왼쪽부터 PC화면, 테블릿화면, 모바일 화면이다. 선택에따라 레이아웃이 바뀐다. 왼쪽화면 오른쪽 상단엔 새로고침 아이콘이 있는데 코드를 수정하고 새로고침 아이콘을 누르면 바꾼 코드로 레이아웃을 보여준다.

① 화면선택부분 ②접속장치 선택

오른쪽 화면 상단에는 중앙에는 메뉴가 3개 있는데 HTML CSS 파일 업로드 가 있다. 수정하고 싶은 부분을 클릭하고 편집하면 된다. 편집한 걸 저장하려면 오른쪽에 적용 아이콘을 누르면 된다.

HTML / CSS 선택메뉴

2) 에디터의 사용법

코드 에디터는 몇 가지 기능을 제공하는데 반드시 에디터 안을 클릭하고 써야 단축키가 먹는다. 단축키 목록은 적용 옆에 물음표 아이콘을 누르면 나온다.

가장 많이 쓰는 건 검색인데 단축키를 꼭 기억하자

– 검색 : Ctrl + F 후 검색어를 친다.

– 검색 다음으로 이동 : Ctrl + G 동일한 검색어의 다음으로 이동한다.

– 검색 이전으로 이동 : Shift + Ctrl + G 검색어의 이전으로 이동한다.

– 특정 행으로 이동 : alt + G 원하는 행 번호를 입력해서 빠르게 이동한다.

– 실행 취소 : Ctrl-Z

나머지는 물음표 아이콘으로 확인해보자.

4. 마치며

이제 준비는 끝났다. 원하는 곳을 찾아서 수정하면 된다. 사실 수정하는게 더 문제이긴 하지만 우선 개념부터 알아보고자 포스팅을 했다. 다음 시간엔 수정할 곳을 찾는 방법에 대해서 포스팅해볼 예정이다.

관련글

2021.06.18 – 티스토리 블로그 스킨 수정, 크롬 개발자도구를 사용해보자

반응형

[티스토리 꾸미기>html 편집] 코딩을 모르는 사람들을 위한 html, css 간단 설명

저는 티스토리를 처음 꾸미기 시작할 때 굉장히 막막했는데, 특히나 티스토리는 html, css를 직접 편집해줘야 더 제 마음에 드는 디자인을 만들 수 있었습니다. 저도 html,css가 전문 분야는 아니라서 돈 내고 사는 것 만큼 완전히 바꾸는 건 힘들지만, 개발자로 일을 한 적이 있어서 제가 필요한 부분만 찾아서 조금씩 수정하면서 하고 있습니다.

그래서 이번 글에서는 html, css 라는 것이 정말 처음이다! 뭔지 모르겠다! html 편집이 힘드신 분들을 위해 어려운 컴퓨터 용어 없이 최대한 간단하게 설명해보려고 합니다.

✔ html, CSS가 뭐에요?

html = 집 짓기, css = 집 지붕의 색깔 칠하기

html, css는 각각 다음과 같은 형태입니다.

html로 구조를 만든다면, css로 구조의 모양, 색깔을 바꿔줍니다.

(이 글자들을 모두 이해할 필요가 없습니다)

1) html 2) css

간단히 말하면, html로 ‘나는 여기에 글자를 쓸거야’라고 입력했다면,

css로 ‘이 글자는 빨강색으로 할거야’라고 지정해 줍니다.

(글씨 폰트를 바꾸고 싶다면 css를 수정해줘야 하는거죠!)

✔ html의 기본 구조

화면의 전체적인 구조를 보면 크게 세가지 뭉텅이로 되어있습니다.

head: 티스토리 이름, 메뉴

|

body: 글을 쓰는 내용

|

footer: 바닥(크게 중요하지 않은 곳)

html을 보면

, ,

이런 식으로 ‘틀’의 역할을 하는 이름들이 있습니다.

기본적으로 이 이름들은 쌍으로 같이 다녀야 하는데,

로 시작했으면 꼭

로 닫아줘야 합니다.

그래서 html 편집에서

…

…

…

로 크게 나누어진 것을 보실 수 있습니다.

✔ css의 기본 구조

틀 이름{

속성 : 값

}

이런 형태로 생겼는데요, 예를 들면

div {

색깔 : 빨간색

}

이렇게 지정해 줄 수 있답니다.

✔ 차이 눈으로 확인하기

– html: div = 네모 상자, p = 글씨를 넣는 공간

(div라는 상자 안에 p라는 글상자를 넣음)

글씨가 들어가는 공간이에요

– css

div { background-color: pink; /* div 상자의 배경색은 핑크색 */ } p{ font-size: 20pt; /* p 글상자의 폰트 크기는 20pt */ color: white; /* p 글상자의 폰트 색은 하얀색 */ }

– 결과물

글씨가 들어가는 공간이에요

글씨가 들어가는 공간이에요

✔ 어디서 볼 수 있나요?

1) 블로그 관리 > 꾸미기 > 스킨편집

2) html 편집 클릭

✔ 그래서 어디를 어떻게 바꾸면 되죠?

이것에 대해 하나씩 글을 쓸 예정입니다! 글씨체 바꾸기, 배경색 바꾸기, 글씨색 바꾸기, 등 하나씩 쉽게 알려드리고 싶습니다.

아예 처음 접하시는 분들은 갑자기 나타난 단어들에 머리가 아프시겠지만, 하나씩 따라해보시면 정말 유용하게 사용하실 수 있으실 거에요🙂

예쁜 폰트 설정하는 방법, 기본 글씨체 변경 >>

[티스토리] HTML 편집 메뉴 찾기

HTML을 편집해보자

오늘은 웹페이지 구성의 뼈대라고 부르는 HTML 편집 메뉴가 어디있는지 살펴보도록 하죠.

HTML은 크게 와 로 나뉘는데요, 에는 스킨의 각종 정보들이 들어있습니다. 사람마다 개성이 다르듯이 는 스킨 고유의 특징을 담고 있습니다. 애드센스를 표현할 수 있도록 승인 코드를 안에 스크립트 형태로 링크를 걸어주는 것도 이 때문이죠.

는 사람으로 비유하면 몸이라고 할 수 있는데요, 이곳에는 실질적인 뼈 구조가 들어갑니다. 사람의 신체 구조와 같이 HTML 문서도 비슷한 성격을 가지고 있는 것이죠. 안에는

,

HTML과 CSS로 티스토리 스킨 편집하기

HTML과 CSS로 티스토리 스킨을 편집해보았다.

먼저 마음에 드는 스킨을 골랐다.

Book Club이 내가 원하는 기능을 대부분 갖추고 있었다.

편집 버튼을 누르면 다음 화면이 나온다.

오른쪽 ‘스킨 편집’에서 HTML이나 CSS를 모르는 사람도

간단한 사항들을 고를 수 있게 해두었다.

여기서 바꿀 수 있는 항목의 종류는

스킨마다 달랐다.

먼저 내 블로그의 사진들은 예쁜 사진이 아니라 코딩 화면을 캡쳐한 거라서

썸네일이 찌그러져서 나오는 경우가 많다.

효용성도 없고 예쁘지도 않기 때문에 ‘뉴스레터’ 타입으로 했다.

적용을 누르고 새로고침을 누르면

왼쪽 화면에서 적용된 모습을 볼 수 있다.

글 목록은 10개씩 나오는 것이 좋을 것 같아서

10개로 수정하였다.

사이드바는 왼쪽에 있는 것이 좋아서 좌측으로 바꿨다.

여기까지 한 후 html 편집 버튼을 눌렀다.

저 부분이 원래는 홈, 태그, 방명록인데

나는 태그와 방명록을 쓰지 않는다.

그래서 저 탭 자체를 없앴다.

티스토리 설정의 편집화면이 아닌

내 티스토리 홈페이지로 들어가서

마우스 우클릭을 한 후 (크롬 기준) 검사를 누르면

오른쪽에 이런 화면이 뜬다.

가운데 화면에서 Ctrl+F로 “홈”을 찾았다.

(왼쪽 화면이 아닌 가운데 화면에서 찾아야 한다.

Ctrl+F를 누르면 맨 밑에 뜬다.)

왼쪽에 내가 바꾸고 싶었던 ‘홈’ 부분이 하늘색으로 바뀌었다.

한줄씩 마우스오버를 해보면

nav id=”gnb” 부분이 홈 메뉴인 것을 알 수 있다.

nav id=”gnb” 줄을 클릭하고 delete 버튼을 눌렀더니

왼쪽 화면에서 “홈”이 사라졌다.

아까 작업하던 티스토리 설정의 html 편집 화면에서

보라색으로 선택한 부분을 지우고

적용과 새로고침을 누르니

홈 부분이 없어졌자.

다음으로 글 상세보기를 하면 제목 부분에

해당 글의 이미지가 배경으로 뜨는데

앞에 설명했듯이 예쁘지 않아서 배경을 없애고 싶었다.

Ctrl+F로 ‘인터넷과 DB’를 검색하고

하나씩 마우스를 갖다대보면

5번째 검색 결과가 원하는 결과임을 알 수 있다.

그리고 여기에서 background-image를 찾았다.

style 부분만 지웠더니 배경화면이 없어졌다.

티스토리 html 편집기로 가서 ‘글’로 바꿨다.

post-cover로 검색했더니 세 번째 결과가 원하는 것이었다.

선택한 부분을 지웠더니 잘 적용되었다.

배경화면을 없앴더니 회색 제목 부분이 너무 커서 줄여야겠다.

post-cover div 태그를 클릭하고

오른쪽에 하늘색 부분을 340px -> 200px로 줄이자 아래와 같이 줄어들었다.

그러자 회색 부분과 밑의 글 사이가 너무 넓어졌다.

container의 padding-top도 339px->200px로 줄여주었더니

아래 글이 올라왔다.

이번에는 회색 칸 안에서 글씨가 너무 위쪽으로 치우쳐져 있어서

inner의 padding-bottom 값을 78px->35px로 줄여주었다.

최종본이 마음에 들어서

티스토리 html 편집기에도 적용시켰다.

CSS로 들어가서 수정해야 한다.

찾기 힘들어서 검색어를 340px, 339px, 78px로 했더니 잘 찾아졌다.

완성!

티스토리에서 HTML이 자유롭다.::백.전.백.승.

반응형

많은 사람은 티스토리에 애드센스를 설치할 수도 있다는 것을 최대 장점으로 택한다. 내가 좋아하는 것을 제한 없이 HTML을 사용할 수 있다는 것이다. HTML은 스킨과 에디터에서 HTML을 제한 없이 사용할 수 있다. 티스토리에서 HTML은 단지 제목, 목록, 이미지 등 HTML 태그에 한정된 것이 아니라 CSS와 자바스크립트를 불러와 사용할 수 있다.

다른 블로그는 HTML 태그에 제한도 있고 CSS, 스크립트를 불러와 사용하지 못한다. 에디터에 HTML이 있다고 똑같은 HTML이 아니다.

아래는 네이버 TV에서 퍼온 동영상으로 공유의 URL 복사로 해서 퍼오니 썸네일과 요약 글만 나온다. 동영상을 보기 위해서는 네이버 TV로 이동해야 한다. 티스토리를 운영하는 카카오도 카카오 TV 동영상을 네이버 블로그에 퍼가면 아래와 비슷하게 나오게 한다.

블로그를 하면서 느끼지만 네이버나 카카오나…

공유의 URL 복사가 아닌 공유의 코드로 HTML 상태에서 코드를 삽입해서 아래와 같이 만들었다. 네이버 블로그의 경우 에디터에 HTML이 없기 때문에 카카오 TV 동영상을 아래와 같이 나오게 할 수 없다.

그리고 위 동영상을 나는 반응형으로 만들었다. 나는 티스토리에서 제공하는 모바일 스킨을 사용하지 않고 있으니 반응형으로 만들어야 한다. 참고로 아래 글에서 적었는데 부트스트랩을 사용하면 동영상을 16:9나 4:3 비율로 할 수도 있다.

네이버 블로그에서는 위젯을 만드는 것을 제외하고 HTML을 사용할 수 없는 것으로 안다. HTML도 특정 태그는 제한이 있다. 그리고 다음 블로그도 에디터에서 HTML을 사용할 수 있지만 아래와 같이 사운드클라우드(SOUNDCLOUD) 플레이어를 제한한다. 위에 적었듯이 HTML이라고 사용 범위가 같지 않다.

아래는 부트스트랩 5 캐러셀 정식으로 아래와 같은 온라인 HTML 편집기도 삽입이 불가능하다. 왜냐하면 다음 블로그가 제한하는 태그가 많기 때문이다. 정확히 어떤 것인지 모르나 보안 등에 문제가 있으면 차단한다고 알고 있다.

See the Pen 부5 : 캐러셀 정식 by 백전백승 (@100_jskim) on CodePen.

위는 부트스트랩 버전 5의 캐러셀이었고 아래는 버전 3의 캐러셀이다. 이 스킨이 부트스트랩 3으로 만들었기 때문에 코드를 직접 삽입할 수 있다. 하지만 위는 버전 5이므로 온라인 HTML 편집기를 사용했다.

에디터가 아닌 스킨을 편집할 수 있고 거기에 부트스트랩 CSS를 정의해서 아래와 같이 할 수 있다. 아래는 부트스트랩 3 버튼 정의 일부로 부트스트랩 3을 포함하여 4,5도 같다고 보면 된다. 참고로 버튼을 가운데로 정렬할 때도 부트스트랩 3 명령인 class=”text-center”를 사용했다.

Basic Primary Success Warning

예전에 사용하던 에디터와 달리 현재 에디터에서 HTML 태그가 사라지는 경우가 많으니 유의했으면 한다. 그리고 내가 에디터에서 HTML을 사용할 때 대체로 아래처럼 한다.

HTML 상태에서 글을 완료한다.

태그가 없어질 경우 글을 수정하지 않는다.

태그를 사용해야 할 경우 스킨 편집에 CSS, 자바스크립트를 정의한다.

속 편하게 그림으로 설명한다.

반응형

티스토리 HTML

블로그를 시작해야겠다 마음 먹고 다양한 블로그 종류 중 무엇으로 시작할 지 정한데 있어 기준이 된 첫 번째가 디자인이다. 보기 좋은 떡이 먹기 좋다는 말도 있듯이 보기 좋은 디자인이 가독성이 좋을 것이고 이는 정보 전달에 더 도움이 될 것이라 판단해서다.

개인적으로 가장 디자인이 좋아보이는 블로그는 티스토리다. 그러나 티스토리를 시작하자마자 나는 깨닫고 말았다. HTML, CSS에 대한 개발 지식이 있어야 예쁘게 꾸밀수가 있다는 것을.. 티스토리가 제공하는 기본 스킨이 그렇게 나쁜 편은 아니지만 예쁜 편도 아니다. 또한 글 작성 시 문서편집기처럼 글씨크기 변경 등의 다양한 기능들을 제공하지도 않는다. (HTML이라 그런거라 생각한다..)

나를 포함해 티스토리 블로그를 운영하는 수많은 사용자들이 HTML, CSS에 대해 무지할 것이다. 이 글에서는 최소한의 HTML/CSS 지식으로 간단한 수정 작업을 소개할 것이다.

기본개념

아래 기본 개념은 숙지해야 이 다음 단계를 이해하기가 쉽다.

HTML 이란 웹페이지를 위한 마크업 언어다. 쉽게 설명하면 웹페이지의 구성 요소들 (글, 이미지, 링크, 제목 등등)을 HTML로 구현하는 것이다.

CSS란 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다. 즉, HTML에서 구조적으로 짜여진 요소들을 꾸며준다. 글을 예로 들면, 글자크기, 행간, 줄간격, 색 등 CSS 문서에서 정의한다.

즉 인테리어 개념으로 따지면

HTML : 벽지를 붙인다는 걸 설명한 문서

CSS : 벽지 색깔, 벽지 원료, 벽지 종류를 정의한 문서

우리는 대부분 벽지를 꾸미는데 관심이 있으므로 CSS만 수정하면 된다.

그럼 CSS를 수정하러 가보자.

수정하고 싶은 디자인 확인

먼저 수정하고 싶은 디자인을 확인한다.

[기본 제공 원형 리스트]

필자의 경우 기본 제공 원형 리스트를 사용하여 글을 작성했을 시 줄 간격이 좁아보여 늘리기로 결정하였다.

개발자 모드 확인

본인이 수정하고자 하는 페이지에서 F12 를 눌러 개발자 모드 창을 실행시킨다.

그림에서 왼쪽

  • <\li> 이런식으로 진행되는 부분이 HTML, 3번박스 쪽이 CSS다. [개발자 모드를 실행시킨 모습]

    (1) 커서 모양으로 된 버튼을 클릭한다.

    (2) 수정하고자 하는 곳에 내 마우스 커서를 갖다댄다. 그럼 자동적으로 위 그림과 같이 해당하는 영역이 표시된다.

    (3) 취소선이 있는 줄 말고 취소선이 없는 것이 해당 부분의 서식이 적용된 것이다. 값을 클릭하여 수정해본다.

    (형광펜으로 색칠되어 있는 부분은 적용되지 않는다.)

    이 때 주황색으로 동그라미 친 부분을 확인하여 style.css인지 확인한다. style.css여야 티스토리에서 수정이 가능하다.

    기본적으로 직관적인 영어단어로 되어있어 어떤 부분이 어떤 기능을 하는 값인지 대략적으로 알 수 있다.

    나의 경우 line-height 가 리스트 서식의 줄 간격을 의미하므로, 이 값을 2.2로 수정하였다. 이건 실제 적용되는 게 아니고 내가 보고 있는 이 화면에서만 적용되는 것이므로 마음껏 값을 바꿔가며 어떤 값이 가장 보기 좋은지 확인해야 한다.

    실제 값 변경

    블로그 관리 > 스킨편집 > html 편집 > CSS 에서 위 부분을 찾는다.

    중괄호가 시작되는 구문을 search 하면 쉽다. (필자의 경우 .entry-content ul li)

    [실제 값 변경한 모습]

    찾았으면 값을 변경해주고 그림엔 없지만 우상단에 ‘적용’ 버튼을 클릭해준다.

    추가적으로, 나는 리스트가 끝나고 나서 여백이 생기는 것을 없애기 위해 위에 있는 margin_bottom : 50px의 값을 0px로 바꾸어주었다.

    완료되었으면 자신의 웹페이지를 새로고침하거나 재접속하여 변경이 적용되었는지 확인하면 된다.

    마음에 드는 서식 따라하기

    티스토리 블로그를 구경하다보면 마음에 드는 서식이 나올 수도 있다.

    다음은 이철규님의 블로그 https://whatisthenext.tistory.com/116 내용을 캡쳐한 것이다.

    HTML, CSS에 정의된

    code라 정의되어있는 부분의 서식이 예뻐서 개발자 모드로 확인해본 결과이다.

    (1) import re 라는 부분을 위에서 했던 과정을 거쳐 커서로 갖다댄다.

    (2) HTML에서 라는 내용으로 감싸야 되는 것을 알 수 있다. (벽지를 붙인 것)

    (3) CSS 에서 다음과 같은 정의를 해야 한다는 것을 알 수 있다. (벽지 종류, 색 등을 정의한 것)

    이제 이것을 티스토리 내에서 사용하고자 할 때는 CSS에 윗 부분을 추가 후 글 작성 시 HTML 모드에서 를 써서 작성할 수도 있고, 서식을 따로 만들어서 기본모드에서 불러오기를 통해 사용할 수 있다.

    아래 그림은 서식 관리 > 서식 쓰기 > HTML 모드로 전환시킨 모습이다.

    [코드 서식 추가]

    저렇게 저장한 후 나중에 글 쓸 때 서식 불러오기를 하면 된다.

    • 티스토리 HTML 스킨 편집하기

    728x170

    안녕하세요?

    티스토리 블로그 사용자입니다.

    티스토리 블로그는 네이버 블로그보다 좀 더 사용자 친화적이며, 잘 설계된 정적 사이트 제너레이터라고 볼 수 있습니다.

    정적 사이트 제너레이터 즉, Static Site Generator의 종류는 많습니다.

    Node 쪽에는 GhostJS가 유명하고, Golang 쪽에서는 Hugo 가 유명하고, C++ 및 기타 언어로도 많은 종류가 있습니다.

    본인은 GhostJS 를 라즈베리파이에 한번 설치해서 블로그 운영 기초를 한번 배웠었는데요.

    아래 링크를 참조하시면 정적 사이트 제너레이터가 어떻게 작동하는지 이해하실 수 있을 겁니다.

    https://cpro95.tistory.com/2

    https://cpro95.tistory.com/5

    서론이 조금 길었는데요.

    티스토리는 무슨 언어로 만들었지는 모르지만 나름 사용자가 커스터마이징 할 수 있게 여러 편의 사항을 제공합니다.

    그중 제일 좋은 점은 HTML 파일을 직접 편집할 수 있게 해 주죠.

    생각해 보면 정말 좋은 기능입니다. HTML 파일을 직접 편집할 수 있다면 구글 애널리틱스나 구글 애드센스 등 여러 플러그인을 본인 입맛에 맞게 편집할 수 있어 그 효과가 대단합니다.

    네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다.

    그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다.

    이번 글에서는 티스토리 HTML 파일의 구조를 단계별로 분석하여 좀 더 이해하기 쉽게 풀어보도록 하겠습니다.

    사전 지식인 HTML 마크업 랭귀지를 조금은 알고 있다고 전제하겠습니다.

    먼저 HTML 파일의 전체적인 구조는 아래와 같습니다.

    이란 태그로 전체를 감싸고 있습니다.

    그 안에 태그와 태그가 있습니다.

    태그 안에는 html 파일에 필요한 각종 정보를 나열합니다.

    예를 들어, 이 html 파일의 제목(title)이나 검색엔진이 찾을 수 있는 각종 메타(meta) 정보, html 파일의 스타일을 지정하는 CSS 파일 등 시스템적인 역할을 태그 안에서 해결합니다.

    태그가 우리의 글 내용이 들어가는 공간입니다.

    우리는 부분보다 부분에 집중하면서 티스토리 정적 사이트 제너레이터의 작동 방식에 대해 알아볼 예정입니다.

    태그 안에는 아래 그림과 같이 크게 세 개의 중요한 부분으로 나뉘어 있습니다.

    태그의 시작에서 보듯이 안에 일단 라는 태그가 있습니다. 이 라는 태그는 뭐하는 태그인지 모르지만 태그 전체를 감싸는 걸로 봐서 티스토리 버전 3의 코드 같습니다.

    일단 모든 코드가 안에 위치하기 때문에 이 코드는 무시해도 됩니다.

    그럼 이 안에는 뭐가 있나요?

    위 그림에서 보듯이

    태그가 있으며 이

    태그가 전체를 커버하고 있습니다.

    그래서 이 태그도 무시해도 됩니다.

    그럼 이

    태그 안에는 뭐가 있나요?

    바로 전체적인 세 개의 구조인

    ,

    ,

    가 있습니다.

    말 그대로 티스토리 홈페이지에서 헤더 역할을 하는

    태그, 푸터역할(화면 맨 아래에 표시되는 거)을 하는

    태그, 그리고 가운데에 있는

    태그가 있습니다.

    HTML 마크업 랭귀지에서는 본문을 세 가지로 나누는 걸 권장합니다.

    태그가 그것인데요, 티스토리는
    태그를 안 쓰고 블록을 나타내는 가장 일반적인

    태그를 썼습니다.

    태그를 안 쓸 거면

    나

    도

    태그로 쓸 것이지 약간 통일성이 없네요.

    하지만 프로그래머 마음입니다.

    를 쓰나

    를 쓰나 결과는 동일하거든요, 단지 HTML 코드를 분석할 때 용이할 수 있을 뿐입니다.

    태그 위아래로[##_revenue_list_upper_##] 이 표시가 보이시죠?

    이 표시는 카카오 광고입니다. 광고는 헤더 다음, 푸터 전에 표시되는 게 구조적으로 가장 좋기 때문입니다.

    첫 번째, HEADER tag

    그럼 전체적으로 3가지 구조를 봤기 때문에 일단 첫번째 구역인

    태그에 대해 좀 더 알아보겠습니다.

    일단

    태그에는 두 개의

    구역이 있습니다.

    첫 번째

    태그에는 class 만 있고 내용이 없습니다. 보통 이런 경우 이 구역의 스타일을 조정하기 위해 사용하는 방식일 수 있습니다.

    실제 class 내용을 봐도 "line-bottom display-none"입니다.

    라인 아래쪽이라고 알리면서 디스플레이하지 말라는 뜻입니다.

    즉 보이지는 않는다는 얘기죠. 스타일을 위한

    니까 다음

    로 넘어가겠습니다.

    두 번째

    구역은 class 가 inner-header입니다. 그리고 이

    구역이 전부입니다.

    즉,

    내용은 이

    안에 다 있다는 얘기죠.

    그럼 이

    를 좀 더 파헤쳐 보겠습니다.

    위 그림에서 처럼 "inner-header"

    안에는 또 두 개의

    구역이 있습니다.

    한 개는 "box-header"라는

    와 "area-align"이라는

    가 있습니다.

    "box-header"

    를 분석해 봅시다.

    html 코드를 보면 홈페이지의 타이틀 로고와 타이틀을 표시하고 있으며,

    마지막으로는 서치바(PC 화면일 경우)를 위한 코드가 있습니다.

    여기는 쉽게 이해도 되고 우리가 여기서 고칠 게 없기 때문에 이런 거다라고 넘어가겠습니다.

    두 번째, "area-align"

    구역을 보겠습니다.

    총 4개의 구역으로 나누어져 있습니다.

    첫 번째는 "header slogun title"입니다.

    쉬운 말로 "머리말 슬로건 타이틀"입니다.

    슬로건 영어 철자가 잘 못 됐네요.

    slogan 이 맞는 철자 같습니다. ㅎㅎ

    두 번째는 "area-gnb"입니다. 이 곳은 티스토리 화면에서 카테고리를 보여주는 곳입니다.

    제 티스토리 블로그를 기준으로 첫 화면에 카테고리를 쭉 나열할 수 있는데 "area-gnb"는 이 역할을 합니다.

    실제 "area-gnb"에는

    CSS 편집기 업데이트! 드디어 편집기에 인텔리센스를 지원

    반응형

    티스토리가 이미지 편집기를 업데이트 하더니 갑자기 HTML / CSS 편집기 까지 업데이트가 되어 있습니다. 그 동안 (아마한 10년 넘게) 티스토리 편집기는 사용하기가 여러모로 불편했습니다. 솔직히 티스토리 직원분들도 아실텐데 이게 2022년의 편집기는 아니긴 합니다.

    요즘에 REPL 온라인 IDE도 얼마나 좋아졌는데 티스토리의 HTML 편집기는 오래전에 시간이 멎은 듯 보였습니다. 스킨 작업이나 자바 스크립트를 만들 때 다들 VS CODE에서 작업한 후에 불편한 방식으로 스킨 업로드를 해야 합니다. 스킨을 자주 수정하지 않는 사람들은 잘 모를 수도 있지만 문제는 티스토리에 치환자가 있어서 최종 결과물을 보려면 이중작업을 해야한다는 치명적인 문제가 있었습니다. 스킨 작업은 일반인을 위한 사용환경이 아니라서 그 정도는 이해할 수 있긴한데 하다보면 좀 빡치기도 하고 귀찮게 되서 한두번 수정할 것 수정하고는 그다지 스킨에 신경을 잘 안쓰게 되지요.

    그런데 이번의 스킨 편집기 업데이트는 꽤 주목할 만합니다. 왜냐하면 인텔리센스와 자동정렬 기능 같은 현재적 IDE의 플러그인 기능을 집어넣었기 때문입니다.

    아래 HTML편집기를 보면 인텔리센스 기능이 추가되었습니다! class 같은 속성도 나와서 혹시나 해서 emmet 문법을 써봤지만 그건 안되더군요;;; emmet이 아니라 티스토리 자체적인 인텔리센스 같습니다.

    하지만 더 중요한 것은 이겁니다. 바로 티스토리 치환자!

    아래처럼 티스토리 치환자가 자동으로 리스트에 뜹니다. 이게 엄청난 생산성 차이가 있습니다. 치환자는 티스토리 CMS 전용이기 때문에 비주얼 스튜디오 코드로 코딩을 하면 바로바로 확인이 불가능합니다. 맨날 치환자 찾아서 넣고 실행해보고 매우 지루했는데 이 자동완성 기능으로 매우 빠르게 스킨 코딩이 가능해졌습니다. 이제는 기본 와꾸는 VS CODE에서 잡아놓고 최종 개발을 티스토리 환경에서 세부적으로 테스트하며 진행할 수 있을 것 같습니다.

    이게 별거 아닌 거라 생각할 수도 있겠지만 코딩할 때 자동완성 기능 있고 없고가 차이가 큽니다. 그래서 VS CODE 사용자들이 언어별로 확장 프로그램 세팅부터 하라고 강조하는 것 이지요. 특히 아래에서 보면 알겠지만 티스토리 치환자는 이름이 참 깁니다. 딱봐도 눈에 잘 안들어오지요?

    인텔리센스가 어느 정도까지 구현되었는지는 이제 부터 하나씩 테스트 하며 알아보겠습니다. 이걸 계기로 더 많은 사람들이 티스토리 개발(혹은 수정)에 참여할 수도 있겠네요.

    또 한가지 기능은 검색기능입니다. 이전 HTML 편집기의 가장 큰 문제가 검색기능이었습니다. CSS가 길면 잘 안찾아지기도 하는 등 문제가 많았는데 이번에는 뭔가 바뀌었습니다. 전체 단어 매치와 부분 매치, 그리고 정규식까지 사용해서 검색이 가능합니다. 이 정도면 단순히 인텔리 센스만 추가한게 아니라 티스토리 편집기 자체만으로도 스킨을 제작할 수 있도록 수준을 높이겠다는 의지가 보입니다.

    HTML CSS 검색창

    아직 티스토리 공지사항에 업데이트 내용을 발표하지 않은 것 같은데 추가적인 기능을 구현하는 작업을 하고 있는지도 모르겠습니다. 일단 지금 티스토리가 진행하는 프로젝트들을 긍정적으로 보고 있습니다. (아직 좀 부족하다고 생각하는 부분도 있지만 무료 CMS인 티스토리니까 이 정도는 혜자라는 생각)

    Emmet 사용법 (html / css 빨리 입력하기) - 비주얼 스튜디오 코드 (tistory.com)

    728x90

    티스토리 사용자들을 위한 웹코딩 HTML CSS 기초 개념

    반응형

    이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야 하는지, 또 간단한 HTML 구조에 대해서 파악하는 목적도 가지고 있습니다. 친효스킨을 기준으로 설명이 되어 있습니다.

    티스토리 내에서의 HTML 구조

    HTML은 사람으로 비유하자면 뼈대라고 생각하시면 됩니다. 사람도 뼈가 정위치에 와야 생활할 수 있듯 HTML도 각 뼈대의 역할이라는게 있습니다. 크게 와 구조로 나뉘어 있습니다. 에는 이 스킨의 각종 정보들이 들어있습니다. 사람으로 또 한번 비유하자면 개성 정도로 비유할 수 있을 것 같습니다. 이 사람이 가지고 있는 성격이나, 생각들, 능력, 혹은 인상들이 안쪽에 들어가게 됩니다. 그래서 애드센스를 구사할 수 있는 능력을 갖게 하기 위해서 승인 코드를 안에 스크립트 형태로 링크를 걸어주는 것 입니다. 그러면 이 스킨은 애드센스 능력을 갖게 되는 겁니다. 그 밖에 웹폰트 스타일이나 문서의 반응형 사용 여부 등등등 다양한 메타태그 ( ) 와 링크들이 들어가게 됩니다.

    에서 정말 중요한건 바로 타이틀 정보 입니다. 이라고 되어 있는데 이게 없으면 안 됩니다. 블로그에도 이름이 각각 있습니다. 내 스킨은 이런 제목의 문서라는걸 보여주는게 바로 타이틀 정보 입니다. 메타태그나 기타 스크립트, 링크들은 없어도 동작 하지만 이 타이틀이 없으면 오류가 발생합니다. 보통 티스토리 HTML에서 <title>에 대한 정보는 관리 > 블로그 > 블로그이름 에서 설정하면 적용 됩니다.</p> <p>출처 : 픽사베이</p> <p><body>는 사람으로 비유하면 몸 입니다. 그래서 태그도 body라는 키워드를 사용하게 된 것 같습니다. 여기에는 실질적인 뼈 구조가 배치됩니다. 사람의 신체 구조도 머리, 몸, 팔, 다리, 발 이런 식의 구조로 되어 있는 것 처럼 HTML 문서도 비슷한 성격을 가지고 있습니다. <body> 안에는 </p> <header>, </p> <aside>, </p> <section>, </p> <article>, </p> <div>, </p> <footer> 등등의 다양한 영역을 구분짓은 태그 요소들이 있습니다. 친효스킨은 header, aside, div, footer 정도가 사용되었습니다. 제작자마다 선호하는 태그가 다르고 개성이 다르기 때문에 사용되는 요소도 약간씩은 다릅니다. 그런데 아마 <body>에서 가장 많이 사용되는 태그는 단언컨데 </p> <div> 일 것 입니다. 이 div구조가 가장 복잡하게 세팅되어 있을 겁니다. 친효스킨에서도 div 태그를 가장 많이 사용했습니다.</p> <p>div는 Division의 약자 입니다. 분할이라는 의미를 가지고 있지요. 즉 본문에서 어떤 부분은 헤더 역할을, 또 어떤 부분은 사이드바 역할, 그리고 본문 역할, 마지막으로 맨 아래에 있는 푸터 역할을 해야 하는 영역을 나눠야 하는데 이때 바로 div를 가장 많이 사용합니다. 따라서 복잡한 구조의 스킨일수록 당연히 사용되는 div도 많이 늘어나게 될 겁니다. 아래는 간단한 HTML 구조의 예시 입니다.</p> <p><!doctype html> <html lang="ko"></p> <p><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>블로그 타이틀

    사이드바

    본문

    잘 보시면 뭔가 공통점이 보일 겁니다. HTML의 구조는 마치 러시아 전통 인형인 마트로시카와 비슷합니다. 인형을 열어보면 또 인형이 있고, 또 그 인형을 열면 또 인형이 안에 들어있는 구조 입니다. 부분도 비슷한 구조를 가지고 있습니다. 위에 색 별로 구별을 해놨습니다. 보시면 어떤 구조인지 딱 눈에 들어올 것 입니다. 보편적으로 header 부터 시작해서 footer 로 마무리가 됩니다.

    에는 메뉴 버튼이나 블로그 제목이 출력되는 부분이 들어가는게 보편적 입니다. 그리고 본문을 구성하는 섹션요소는 딱히 없기 때문에 대부분 div로 구성을 합니다. 친효스킨도 본문을 구성하는 div가 많습니다. 마지막으로 맨 아래에 위치하는

    에는 보통 스킨 제작자가 들어갑니다.

    티스토리는 header와 footer를 만들기가 상당히 쉽습니다. 문제는 본문 입니다. 본문을 1단으로 할지, 2단으로 할지, 아니면 3단으로 할지를 먼저 정해야 합니다. 친효스킨의 경우는 사이드바가 존재하고 바로 옆에 본문이 위치한 2단 구조 입니다. 따라서

    라고 하는 태그가 있고 그 안쪽에 두 개의 큰 div가 존재하고 있습니다. 하나는

    이고, 다른 하나는

    입니다. 이 각 div가 사이드바와 본문을 구성하게 됩니다. 특히

    의 경우는 유동성있게 변하는 부분입니다. 사이드바는 보통 고정적인 옵션들이 많지요. 카테고리나 추천글, 인기글, 최근글, 최근댓글, 태그클라우드, 방문자 카운터 등 딱 고정된 모듈들이 들어가는 영역입니다. 하지만 본문의 경우는 다릅니다. 메인화면일경우 인덱스 페이지가 나와야 하고, 글을 클릭해서 들어가면 해당 포스팅이 출력되어야 합니다. 방명록을 누르면 방명록 리스트가 나와야 합니다. 특히 본문 포스팅의 경우 맨 아래에 카테고리 다른 글이나 공유 링크, 댓글 리스트들도 들어갑니다. 따라서 본문의 구조가 가장 많은 div를 사용하게 됩니다.

    최초 영역을 어떻게 나눌지에 대해 고민하고 정해졌으면 레이아웃을 구성하여 정확히 이 영역에는 이 태그가 사용되는게 정해지게 됩니다. 앞서 비유한것처럼 사람의 뼈와 마찬가지라고 생각하시면 됩니다. 갈비뼈가 막 팔에 가고 다리에 위치하면 더 이상 사람이 아니게 되겠죠? 마찬가지 입니다. 한 번 정해진 div 위치는 변경 시 형태가 뒤틀리게 됩니다. 따라서 HTML에서의 스킨 구조에 사용되는 모든 태그는 반드시 정해진 위치가 있습니다. 물론 약간의 유동성을 허용하지만 큰 영역을 지정해놓은 대표 태그들은 반드시 그 위치에 있어야 합니다. 즉 HTML 스킨 구조는 정해진 위치와 순서가 있습니다. 또한 위에서 설명드린 러시아 인형과 같은 구조이기 때문에 이들 중 태그가 잘 못 수정되면 스킨 전체가 망가져 오류가 발생하기도 합니다. 그렇기 때문에 HTML에 대한 지식이 전혀 없는 경우에는 대체 어디를 어떻게 수정하고 고쳐야 하는지에 대해 전혀 모르므로 스킨 편집이 어려울 수 밖에 없습니다.

    티스토리 내에서의 CSS 구조

    사람의 뼈 구조가 형성이 되면 다음 해야 할 일은 바로 살을 붙이고 옷을 입히는 일 입니다. 어렸을 적 초등학교 미술시간 때 찰흙만들기가 생각이 나는군요. 처음에는 철사로 뼈대를 잡고, 포즈가 완성 되었으면 철골 주변으로 찰흙을 씌워 몸을 형성하죠. 그리고 다 마르면 색칠을 해서 멋들어진 형태로 최종 완성합니다. CSS는 HTML의 뼈대에 살을 씌우고 옷을 입히는 역할 입니다.

    위에서 설명드린 태그들 중

    ,

    키워드에 대한 정보 티스토리 html

    다음은 Bing에서 티스토리 html 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

    이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

    사람들이 주제에 대해 자주 검색하는 키워드 html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민

    • 이사양잡스
    • yt:cc=on
    • html
    • html기초
    • 티스토리
    • 네이버블로그
    • 돈버는부업
    • 애드센스

    html이란?! #티스토리 #블로그가 #어렵다는 #네이버 #블로거의 #고민

    YouTube에서 티스토리 html 주제의 다른 동영상 보기

    주제에 대한 기사를 시청해 주셔서 감사합니다 html이란?! 티스토리 블로그가 어렵다는 네이버 블로거의 고민 | 티스토리 html, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.

    Leave a Comment