📌 목차
1. HTML의 역할: 블로그의 뼈대 만들기
2. CSS (cascading style sheets) = 옷
3. HTML과 CSS의 관계
티스토리 HTML, CSS 그리고 파일업로드의 차이와 역할을 알아보세요. 초보 블로거도 쉽게 이해할 수 있는 웹 구조와 디자인 개념을 정리했습니다.
이제 막 블로그를 시작한 저로서는 모르는 게 너무 많습니다.
티스토리, 블로그스팟 등 기본틀이 잡혀있는 시스템을 쓰면서도 모르는 것 투성이입니다.
글을 쓰다 보면 “HTML 편집”, “CSS 수정”, “파일 업로드” 같은 단어가 종종 눈에 띄는데요. 막상 클릭해보면 뭔가 어려운 코드들이 잔뜩 나와서 도망치고 싶어집니다.
글은 티스토리의 경우 기본모드로, 블로그스팟에서는 compose view로 편하게 쓰면 되는데요, 그래도 표를 만들거나 버튼을 만들때, 이미지 크기 등을 봐야할 때는 html에 대하여 어느 정도 알고 있어야 합니다.
저도 처음에는 하나도 몰랐지만 글을 쓰며 확인하고, 반복적으로 보고 사용하다 보니 패턴이 읽혀지더라구요.
그래서 오늘은 저처럼 초보자도 이해할 수 있게 HTML이 무엇인지, CSS가 무엇이며 어떤 역할을 하는지 기본 개념만 조금 정리해보았습니다. 이것만 알아도 마음이 많이 편안해지실거예요.
1. HTML의 역할: 블로그의 뼈대 만들기
HTML은 Hyper Text Markup Language의 줄임말이에요.
쉽게 말하면 웹페이지의 구조와 뼈대를 만드는 언어입니다.
예를 들어,
- 제목이 어디 있는지
- 본문 내용이 어디부터 시작되고 어디서 끝나는지
- 사진, 표, 버튼이 페이지에서 어느 위치에 들어가는지
이런 것들을 HTML 이 정해줍니다.
비유를 하자면, 웹사이트를 하나의 건물이라고 하면, HTML은 건물의 기둥과 벽, 방의 배치를 정하는 설계도입니다.
<h1>이것은 큰 제목입니다</h1>
<p>이것은 본문 내용입니다.</p>
<img src="image.jpg" alt="사진">
위의 예시처럼 <h1>, <p>, <img> 같은 태그로 내용을 구분합니다.
즉, 어떤 콘텐츠가 어디에 들어갈 지를 HTML로 지정합니다.
1-1) 태그란?
HTML 태그는 웹페이지의 내용을 구조화(구분)하기 위한 약속된 코드예요. 쌍으로 되어있어요!
앞의 <열리는 태그>와 뒤의</닫히는 태그>로 이루어져 있습니다.
비유를 하자면, 태그는 웹페이지의 설계도에서 방 이름 같은 것입니다.
다음과 같은 예가 있습니다.
<h1>큰 제목</h1>
<p>이건 문단입니다.</p>
<img src="이미지.jpg" alt="사진">
1) 제목 태그 <h1> ~ <h6>
h는 Headings의 약자입니다. 페이지의 제목과 소제목에 사용합니다.
<h1>은 가장 큰 제목이며 <h6>으로 내려갈수록 제목이 작아집니다.
<h1>는 검색엔진에서 핵심 제목으로 판단하며 한 번만 작성해야 합니다.
| 태그 |
크기와 용도 |
| <h1> |
가장 큰 제목. 페이지의 대표 제목.
제목에 한 번만 사용합니다. |
| <h2> |
큰 소제목 |
| <h3> |
중간 소제목 |
| <h6> |
가장 작은 소제목 |
이 글에서도, 저는
<h1>을 제목에 한 번만 사용했습니다.
<h2> 는 Heading으로 "1. HTML의 역할: 블로그의 뼈대 만들기" 를 사용했고요,
<h3> 는 Subheading으로 "1-1) 태그란?"을 사용했으며,
<h4>로는 "1. 제목 태그 <h1> ~ <h6>"를 사용했습니다.
html 모드로 보면 그렇게 적용되었다는 것을 알 수 있습니다.
각각의 제목은 heading, subheading, minor heading 으로 지정하면 html로 보면 위와 같이 적용이 되어있음을 알 수 있습니다.
2) <p>: 문단 태그
p는 paragraph (문단)의 약자입니다. 본문 텍스트를 입력할 때 사용합니다.
한 단락마다 <p>로 감싸주면 됩니다.
예시)
<p>이것은 문단입니다. 여기에 블로그의 본문 내용을 넣습니다.</p>
3) <img>: 이미지 태그
웹페이지에 이미지를 표시합니다.
다른 것과 달리 닫히는 태그가 없습니다. <img> 자체로 완결입니다.
| 속성 |
설명 |
| src |
이미지 파일 경로 (source) |
| alt |
이미지가 없을 때 대신 보여줄 텍스트 |
| width |
이미지 가로크기 (px, %, em 등 단위 지정 가능) |
| height |
이미지 세로크기 |
예시)
<img src="cat.jpg" alt="귀여운 고양이 사진" width="300">
alt는 검색엔진 최적화(SEO)와 접근성을 높여줍니다.
이 외에 자주 쓰는 태그 3가지 추가한다면 다음과 같습니다.
| 태그 |
설명 |
| <a> |
링크 (anchor). 다른 페이지로 연결 |
| <ul><li> |
순서 없는 목록 (ul = unordered list) |
| <div> |
구역 묶음 (디자인 레이아웃용 컨테이너) |
2. CSS (Cascading style sheets) = 옷
CSS는 HTML 에 디자인을 입힙니다.
색깔, 크기, 배치, 여백, 글꼴, 그림자 등 "어떻게 보일지"를 정합니다.
건물로 치면 페인트칠, 창문 모양, 간판 같은 것이 될 수 있겠네요.
3. HTML 과 CSS의 관계
HTML만 있으면 내용은 나오지만 무지하게 투박합니다.
CSS만 있으면 디자인 규칙은 있지만 보여줄 내용이 없습니다.
둘이 합쳐져야 내용 + 디자인이 나오는 것입니다.
비유를 하자면 다음과 같습니다.
| 구분 |
역할 |
비유 |
| HTML |
웹페이지의 내용과 구조 |
자동차의 엔진과 프레임 |
| CSS |
웹페이지의 모양과 스타일 |
자동차의 외형과 도색 |
티스토리는 스킨(테마)이라는 개념을 사용합니다. 이 스킨에는 이미 HTML 구조와 CSS 디자인이 포함되어 있어서, 사용자가 별도로 코드를 입력하지 않아도 예쁜 디자인이 적용됩니다.
-
HTML: 메뉴, 본문, 사이드바 등 페이지의 뼈대
-
CSS: 글꼴, 버튼 색상, 간격, 배치 등 시각적 디자인
티스토리 CSS 위치
블로그스팟도 티스토리처럼 기본 테마에 HTML과 CSS가 포함돼 있어요. 다만 블로거는 티스토리보다 수정 자유도가 조금 낮습니다.
4. css 활용
우연히 티스토리 글이 모바일에서 볼 때 버튼 깨짐 현상이 있는 것을 확인했습니다.
이 경우, 전체 글의 모든 버튼 코드를 동일하게 사용했기 때문에 어떻게 수정해야 할 지 고민이 되었습니다.
글 하나하나를 수정하려니 글이 많고, SEO 적으로도 좋지 않습니다.
이럴 때 응용할 수 있는 방법이 css를 이용하는 것입니다.
스킨편집 - html편집을 클릭하여 css를 선택합니다.
수정된 최종 코드를 다음의 css 맨 아래 칸에 넣어주면 내 글 전체에 일괄 적용됩니다.
5. 마무리
HTML과 CSS는 각각 “구조”와 “디자인”을 담당하며, 티스토리의 파일업로드 기능은 이 둘을 통째로 교체하거나 수정할 수 있게 도와줍니다.
처음에는 어려워 보여도 한 줄씩 수정해보면 금방 감이 옵니다.
저처럼 초보 블로거라면 글쓰기에서 버튼 색상, 글자 크기부터 조금씩 만져보며 CSS에 익숙해지는 걸 추천드려요.
티스토리와 블로그스팟은 기본적으로 스킨에 HTML과 CSS가 세팅돼 있어 초보자도 쉽게 블로그를 꾸밀 수 있습니다.
하지만 버튼 같은 디자인 요소가 모바일에서 깨지는 경우, CSS 수정만으로도 손쉽게 해결할 수 있으니 참고하시면 좋을 것 같습니다.
▲
맨위로
댓글
댓글 쓰기
댓글은 예의 있게 남겨주세요 :)