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

• Article author: act-think.tistory.com
• Reviews from users: 39357 Ratings
• Top rated: 4.4
• Lowest rated: 1
• Summary of article content: Articles about HTML과 CSS로 티스토리 스킨 편집하기 HTML과 CSS로 티스토리 스킨을 편집해보았다. 먼저 마음에 드는 스킨을 골랐다. Book Club이 내가 원하는 기능을 대부분 갖추고 있었다. …
• Most searched keywords: Whether you are looking for HTML과 CSS로 티스토리 스킨 편집하기 HTML과 CSS로 티스토리 스킨을 편집해보았다. 먼저 마음에 드는 스킨을 골랐다. Book Club이 내가 원하는 기능을 대부분 갖추고 있었다. HTML과 CSS로 티스토리 스킨을 편집해보았다. 먼저 마음에 드는 스킨을 골랐다. Book Club이 내가 원하는 기능을 대부분 갖추고 있었다. 편집 버튼을 누르면 다음 화면이 나온다. 오른쪽 ‘스킨 편집’에서 HTML이..
• Table of Contents:

관련글

댓글2

티스토리툴바

Read More

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

• Article author: koreatoworld.tistory.com
• Reviews from users: 17111 Ratings
• Top rated: 4.3
• Lowest rated: 1
• Summary of article content: Articles about [티스토리] HTML 편집 메뉴 찾기 오늘은 웹페이지 구성의 뼈대라고 부르는 HTML 편집 메뉴가 어디있는지 살펴보도록 하죠. · 자, 그럼 티스토리에서 html문서를 어디서 수정해야 하는지 … …
• Most searched keywords: Whether you are looking for [티스토리] HTML 편집 메뉴 찾기 오늘은 웹페이지 구성의 뼈대라고 부르는 HTML 편집 메뉴가 어디있는지 살펴보도록 하죠. · 자, 그럼 티스토리에서 html문서를 어디서 수정해야 하는지 … HTML을 편집해보자 오늘은 웹페이지 구성의 뼈대라고 부르는 HTML 편집 메뉴가 어디있는지 살펴보도록 하죠. HTML은 크게 와 로 나뉘는데요, 에는 스킨의 각종 정보들이 들어있습니다. 사람마다 개성이 다르듯이..
• Table of Contents:

티스토리툴바

Read More

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

• Article author: min-blog.tistory.com
• Reviews from users: 21276 Ratings
• Top rated: 3.4
• Lowest rated: 1
• Summary of article content: Articles about 티스토리에서 HTML이 자유롭다.::백.전.백.승. 티스토리에서 HTML은 단지 제목, 목록, 이미지 등 HTML 태그에 한정된 것이 아니라 CSS와 자바스크립트를 불러와 사용할 수 있다. 다른 블로그는 HTML … …
• Most searched keywords: Whether you are looking for 티스토리에서 HTML이 자유롭다.::백.전.백.승. 티스토리에서 HTML은 단지 제목, 목록, 이미지 등 HTML 태그에 한정된 것이 아니라 CSS와 자바스크립트를 불러와 사용할 수 있다. 다른 블로그는 HTML … 많은 사람은 티스토리에 애드센스를 설치할 수도 있다는 것을 최대 장점으로 택한다. 내가 좋아하는 것을 제한 없이 HTML을 사용할 수 있다는 것이다. HTML은 스킨과 에디터에서 HTML을 제한 없이 사용할 수 있다…여러 블로그만 아니라 유용한 어플, 프로그램을 설명합니다.
• Table of Contents:

부트스트랩 템플릿 및 테마

티스토리툴바

Read More

티스토리 HTML 스킨 편집하기

• Article author: cpro95.tistory.com
• Reviews from users: 49943 Ratings
• Top rated: 3.7
• Lowest rated: 1
• Summary of article content: Articles about 티스토리 HTML 스킨 편집하기 네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다. 그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다. 이번 … …
• Most searched keywords: Whether you are looking for 티스토리 HTML 스킨 편집하기 네이버 블로그가 구글 애드센스가 안 되는 이유가 바로 이 때문입니다. 그럼 티스토리 HTML 파일을 편집해야 하는데 상당히 복잡하게 되어 있습니다. 이번 … 안녕하세요? 티스토리 블로그 사용자입니다. 티스토리 블로그는 네이버 블로그보다 좀 더 사용자 친화적이며, 잘 설계된 정적 사이트 제너레이터라고 볼 수 있습니다. 정적 사이트 제너레이터 즉, Static Site Gen..코딩, 자동차, 경제 관련 블로그입니다.
• Table of Contents:

티스토리 HTML 스킨 편집하기

첫 번째 HEADER tag

두 번째 컨테이너 DIV

Read More

티스토리 HTML/CSS 수정하기

• Article author: purplechip.tistory.com
• Reviews from users: 21120 Ratings
• Top rated: 4.7
• Lowest rated: 1
• Summary of article content: Articles about 티스토리 HTML/CSS 수정하기 또한 글 작성 시 문서편집기처럼 글씨크기 변경 등의 다양한 기능들을 제공하지도 않는다. (HTML이라 그런거라 생각한다..) 나를 포함해 티스토리 블로그 … …
• Most searched keywords: Whether you are looking for 티스토리 HTML/CSS 수정하기 또한 글 작성 시 문서편집기처럼 글씨크기 변경 등의 다양한 기능들을 제공하지도 않는다. (HTML이라 그런거라 생각한다..) 나를 포함해 티스토리 블로그 … 블로그를 시작해야겠다 마음 먹고 다양한 블로그 종류 중 무엇으로 시작할 지 정한데 있어 기준이 된 첫 번째가 디자인이다. 보기 좋은 떡이 먹기 좋다는 말도 있듯이 보기 좋은 디자인이 가독성이 좋을 것이고 이..
• Table of Contents:

맨땅에 헤딩하는 사람

티스토리 HTMLCSS 수정하기 본문

티스토리툴바

Read More

티스토리 HTML / CSS 수정하기

• Article author: flatsun.tistory.com
• Reviews from users: 30909 Ratings
• Top rated: 4.9
• Lowest rated: 1
• Summary of article content: Articles about 티스토리 HTML / CSS 수정하기 티스토리가 광고하면서 하는 말이 블로그를 마음대로 꾸밀 수 있고 자유도가 높고 기타등등 어쨌든 좋다 이건데 웹디자이너도 아니고 뭘 안아야 손을 … …
• Most searched keywords: Whether you are looking for 티스토리 HTML / CSS 수정하기 티스토리가 광고하면서 하는 말이 블로그를 마음대로 꾸밀 수 있고 자유도가 높고 기타등등 어쨌든 좋다 이건데 웹디자이너도 아니고 뭘 안아야 손을 … 티스토리가 광고하면서 하는 말이 블로그를 마음대로 꾸밀 수 있고 자유도가 높고 기타등등 어쨌든 좋다 이건데 웹디자이너도 아니고 뭘 안아야 손을 대던가 하지 대부분의 사람들은 HTML / CSS 코드를 봐도 이..
• Table of Contents:

댓글5

공지사항

최근댓글

전체 방문자

티스토리툴바

Read More

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

• Article author: rgy0409.tistory.com
• Reviews from users: 17968 Ratings
• Top rated: 3.2
• Lowest rated: 1
• Summary of article content: Articles about 티스토리 사용자들을 위한 웹코딩 HTML CSS 기초 개념 이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성 … …
• Most searched keywords: Whether you are looking for 티스토리 사용자들을 위한 웹코딩 HTML CSS 기초 개념 이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성 … 이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야..IT와 그림, 각종 프로그램 사용하는것을 좋아합니다.
• Table of Contents:

Read More

See more articles in the same category here: https://toplist.maxfit.vn/blog/.

티스토리 블린이를 위한 스킨편집 기초, 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 – 티스토리 블로그 스킨 수정, 크롬 개발자도구를 사용해보자

반응형

[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 편집] 코딩을 모르는 사람들을 위한 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 편집 클릭

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

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

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

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

So you have finished reading the 티스토리 html topic article, if you find this article useful, please share it. Thank you very much. See more: 티스토리 html 꾸미기, 티스토리 HTML CSS, 티스토리 스킨, 티스토리 개인 홈처럼 꾸미는 법, 티스토리 스킨편집, 티스토리 스킨 만들기, 티스토리 CSS 적용, HTML 본문 꾸미기