이전 글: 코딩을 모르는 사람들을 위한 html, css 간단 설명
👩🏻 저는 글을 쓸 때 다음과 같이 특별히 강조하고 싶은 부분을 따로 상자를 만들어서 넣는데요, 그 방법에 대해 간단히 설명해보겠습니다!
🔸 수정해야 할 곳:
1. 글쓰기의 html모드 편집
2. 티스토리 html 편집 > css 편집
🔸 상자는 html 모드에서 만들고, 상자를 꾸미는 일은 css를 고쳐줍니다.
🔸 상자의 html 태그: <div></div>
div 태그란(html)
'상자' 라고 생각하면 됩니다. 다른 종류의 태그들을 안에 넣고 밖에서 감싸 줍니다.
<div>
<p>...</p>
...
</div>
글쓰기 html모드 편집(html)
1. 글상자를 만들기 전, 먼저 <기본모드>에서 상자에 넣을 글을 작성해줍니다.
2. 글을 쓴 후, <HTML>모드로 가서 상자를 만들어 줍니다.
3. HTML 모드에서 보면 글을 쓴 건 <p></p> 태그 안에 들어있답니다.
4. 이제 이 <p..></p>를 <div></div>로 감싸줍니다.
5. 이걸 쓴다고 눈에 보이는 변화는 없습니다. 이제 css로 꾸며줘야 눈에 보이게 됩니다. css에서 이 상자를 찾을 수 있도록 class라는 속성을 이용해서 이름을 정해줍니다. 이름은 본인이 기억할 수 있는 것 아무거나 띄어쓰기가 없는, 또는 _로 연결해서 지어줍니다.
이름 예) test, class_test ...
저는 point_test 라는 이름으로 class="point_test"라고 지정해 주었습니다.
6. 이 상태로 글을 저장 완료합니다.
상자(div태그) 꾸미기(css)
1. 티스토리 설정 > 꾸미기 - 스킨 편집 > html 편집 > css 탭으로 이동합니다.
2. 아까 지었던 이름을 불러와서 디자인을 입혀줄 차례입니다. 이름 앞에 '.'점을 붙이면 class 이름을 가리키게 됩니다. 이제 { } 안에 속성들을 하나씩 넣어줍니다. css에 맨 아래 줄에 추가해줍니다.
.point_test{
}· background-color: 상자 배경색 (값: pink, #333, rgb(0,0,0) 의 형태)
· padding: 상자와 글 사이의 간격 (단위: px)
· border: 상자의 테두리 (값 순서: 색깔, 테두리 두께, 테두리 형태)
· width: 상자의 가로 길이 (단위: px)
· height: 상자의 세로 길이 (단위: px)
예) 배경색: 핑크색, 테두리와 글자와의 거리: 10px, 테두리: 검은색 두께 1px 실선
.point_test{
background-color: pink;
padding: 10px;
border: black 1px solid;
}글자
3. '적용' 버튼을 누르고 글을 썼던 걸 확인해 보시면 디자인이 적용되어 있는 것을 확인하실 수 있습니다.
4. 응용을 하자면, 위의 속성들을 넣고 빼고 함으로써 배경색 없이 테두리만, 또는 테두리 없이 배경색만, 등 여러가지 조합으로 예쁜 글상자를 만들 수 있습니다!
.point_test{
border: skyblue 15px solid;
height: 100px;
}
5. 이렇게 한 번 css에 적용해 주면 그 이후에는 글을 쓸 때 class 이름만 가져오면 css는 더 이상 수정할 필요없이 바로 적용이 됩니다.
'티스토리' 카테고리의 다른 글
| 네이버 서치어드바이저 존버로 티스토리 드디어 수집! 수집 보류 중, 웹 페이지 생산 문제, html 구조 문제 (1) | 2021.05.27 |
|---|---|
| [티스토리 꾸미기|html편집] 예쁜 폰트 설정하는 방법, 기본 글씨체 변경 (3) | 2021.05.17 |
| [티스토리 꾸미기>html 편집] 코딩을 모르는 사람들을 위한 html, css 간단 설명 (3) | 2021.05.09 |
| 티스토리 구독 버튼 왜 안 보일까? 모바일 화면은 왜 다를까? (0) | 2021.04.17 |
| 구글에 내 티스토리 글이 검색되지 않는 이유 '색인 생성 요청' (1) | 2021.04.07 |
댓글