저는 티스토리를 처음 꾸미기 시작할 때 굉장히 막막했는데, 특히나 티스토리는 html, css를 직접 편집해줘야 더 제 마음에 드는 디자인을 만들 수 있었습니다. 저도 html,css가 전문 분야는 아니라서 돈 내고 사는 것 만큼 완전히 바꾸는 건 힘들지만, 개발자로 일을 한 적이 있어서 제가 필요한 부분만 찾아서 조금씩 수정하면서 하고 있습니다.
그래서 이번 글에서는 html, css 라는 것이 정말 처음이다! 뭔지 모르겠다! html 편집이 힘드신 분들을 위해 어려운 컴퓨터 용어 없이 최대한 간단하게 설명해보려고 합니다.
✔ html, CSS가 뭐에요?
html = 집 짓기, css = 집 지붕의 색깔 칠하기
html, css는 각각 다음과 같은 형태입니다.
html로 구조를 만든다면, css로 구조의 모양, 색깔을 바꿔줍니다.
(이 글자들을 모두 이해할 필요가 없습니다)
간단히 말하면, html로 '나는 여기에 글자를 쓸거야'라고 입력했다면,
css로 '이 글자는 빨강색으로 할거야'라고 지정해 줍니다.
(글씨 폰트를 바꾸고 싶다면 css를 수정해줘야 하는거죠!)
✔ html의 기본 구조
화면의 전체적인 구조를 보면 크게 세가지 뭉텅이로 되어있습니다.
head: 티스토리 이름, 메뉴
|
body: 글을 쓰는 내용
|
footer: 바닥(크게 중요하지 않은 곳)
html을 보면 <div>, <body>, <h1> 이런 식으로 '틀'의 역할을 하는 이름들이 있습니다.
기본적으로 이 이름들은 쌍으로 같이 다녀야 하는데,
<div>로 시작했으면 꼭 </div>로 닫아줘야 합니다.
그래서 html 편집에서
<head> ... </head>
<body> ... </body>
<footer> ... </footer>
로 크게 나누어진 것을 보실 수 있습니다.
✔ css의 기본 구조
틀 이름{
속성 : 값
}
이런 형태로 생겼는데요, 예를 들면
div {
색깔 : 빨간색
}
이렇게 지정해 줄 수 있답니다.
✔ 차이 눈으로 확인하기
- html: div = 네모 상자, p = 글씨를 넣는 공간
(div라는 상자 안에 p라는 글상자를 넣음)
<div>
<p>글씨가 들어가는 공간이에요</p>
</div>
- css
div {
background-color: pink; /* div 상자의 배경색은 핑크색 */
}
p{
font-size: 20pt; /* p 글상자의 폰트 크기는 20pt */
color: white; /* p 글상자의 폰트 색은 하얀색 */
}
- 결과물
<css 적용 전-html만 있을 때>
글씨가 들어가는 공간이에요
<css 적용 후>
글씨가 들어가는 공간이에요
✔ 어디서 볼 수 있나요?
1) 블로그 관리 > 꾸미기 > 스킨편집
2) html 편집 클릭
✔ 그래서 어디를 어떻게 바꾸면 되죠?
이것에 대해 하나씩 글을 쓸 예정입니다! 글씨체 바꾸기, 배경색 바꾸기, 글씨색 바꾸기, 등 하나씩 쉽게 알려드리고 싶습니다.
아예 처음 접하시는 분들은 갑자기 나타난 단어들에 머리가 아프시겠지만, 하나씩 따라해보시면 정말 유용하게 사용하실 수 있으실 거에요🙂
'티스토리' 카테고리의 다른 글
| [티스토리 꾸미기|html편집] 글 작성 시 색깔 글상자 만들기 (5) | 2021.05.21 |
|---|---|
| [티스토리 꾸미기|html편집] 예쁜 폰트 설정하는 방법, 기본 글씨체 변경 (3) | 2021.05.17 |
| 티스토리 구독 버튼 왜 안 보일까? 모바일 화면은 왜 다를까? (0) | 2021.04.17 |
| 구글에 내 티스토리 글이 검색되지 않는 이유 '색인 생성 요청' (1) | 2021.04.07 |
| 구글 애널리틱스 가입 및 티스토리 연동 방법 (유니버설 애널리틱스) (1) | 2021.04.05 |
댓글