[티스토리] 티꾸! 티스토리꾸미기 css스타일용어, width, height 알아보기!

핸드폰 설명서/티꾸(티스토리꾸미기)

꼬마셀러CGW 2024. 10. 25. 15:17

오프닝(전체보기)

오늘은 티스토리 블로그를 하다보면 꼭 한번은 html설정과 css설정을 하게되고

css설정(수정)을 하게 되면 반드시 한번은 보게되는 바로 'width' 와 'height' !

아마, 많이들 보셨던 용어일거라 생각됩니다!! 저도 수정할 때마다 꼭 보게 되거든요!

여기서 주의⚠️

저는 블로그 상태와 성능검사에서 점수가 특히나 많이 떨어진경우라, 다시 올리기 위해

여러 번, 수정작업을 거치고 있으나 지나친 수정작업은 오히려 블로그에 해가 될 수도 있다고하니

모두 주의해주세요! 반드시 필요한 경우가 아니라면 수정은 가능한 피하는 게 더 좋을 것 같아요!

저도 이전 스킨 사용하면서 수정을 거의 매일 해왔더니 조회수도 훅! 떨어지고... 물론..!

그 이유야 다른 곳에서 큰 부분이 있었지만요! 그래도 지나치게 수정을 하는 날이면

평소보다도 더 조회수가 떨어지더라구요! 이점 꼭 유의 해주세요!

width란, 무엇인가!

시간끌지 않고 바로 알려드릴게요!

/* css 예시 */
body.
font-family: Mono;
width: 15px
hegiht: 10px
margin: 0, 0

이렇게 css수정하게되면, 바로 보게되는 'width'

바로, '너비' 입니다.

너비가 15px(픽셀)로 지정되어있다는거죠!

이 너비는 간격이 어느정도로 넓나? 라는 넓이가 아니라, 길이가 어느정도 긴가(넓나)? 라고

생각하시면 될 것 같아요!

아주 쉽게 가자면, '가로길이' 라고 보시면 될 것 같아요!

간격은 'margin', 'padding' 을 이용하여 지정한답니다!

이 두 가지에 대해서도 조만간 올려두겠습니다!

자 다음으로는 'height' 에 대해서 알아보도록 해요!

/* css 예시 */
font-wegiht: blod;
font-height: 10px
color: #000000

height, 보이시나요!? 이 용어의 의미는 '높이' 입니다!

'어디 높이가 몇 cm인가.....' 가 아니라, 세로의 길이를 말하는 겁니다!

티스토리에서는 물건이 아니니 cm를 알아보지는 않으니까요!

이번 예시를 보면 'font-height' 이라고 되어있는데

저건 잘못된 표기입니다! 정확한 표기는 'line-height' 입니다!

바로 텍스트 줄의 높이 입니다! 픽셀이 높아지면 높아질수록 윗글과 아랫글사이의 간격이 넓어져요!

밑에 예시를 보면,

ex) 안녕하세요, 꼬마블로그입니다.

안녕하세요, 꼬마 블로그입니다.

처럼, 문단사이의 간격에 변화가 생깁니다!

만약 폰트의 높이 픽셀이 높으면 높을 수록 글씨가 늘어나지 않을까요? ㅋㅋㅋ

늘어나게되면 글씨의 크기가 커졌다고 느껴질 수도 있어요! ㅋㅋㅋㅋㅋ

폰트의 크기는 'font-size' 로 지정하는겁니다!!

저처럼 티스토리 블로그를 처음 접하시는 분들을 위해 기본용어들을 하나씩하나씩 공부하고

배워서 올리는 중입니다!

앞으로도 가능하다면, 꾸준히 올릴 생각이니 많은 관심 부탁드리겠습니다!

오늘도 읽어주셔서 감사합니다!!