본문 바로가기
인터넷IT정보/스마트정보

티스토리 초기HTML 설정방법 간략정확요약!

by 유익한정보공유 스마트꿀단지 2020. 3. 20.
반응형


초기셋팅초기셋팅

안녕하세요 요즘 #코로나때문에 

대한민국이 힘드네요 그래도 우리는 이겨낼수 있습니다.

티스토리 많나바이러스따위이들하시잖아요?  

다른블로그와는다르게

HTML설정해서 글위치 간격 폰트크기 등을 바꾸는데요 

어려우실거입니다


자그래서 제가 직접하면서 설정을 해보았어요 

저랑 같이 함께 따라해보시죠!  

천천히 차근차근 따라와주시길 바랍니다

 티스토리도

#HTML초기설정 방법만 아신다면 쉽게 바꿔주실수 있습니다 

저와 같이 따라가볼까요!?


#HTML설정 방법에대해서 간략하고! 정확하고!  상세하게! 설명하겠습니다.

자 한번 같이 해보도록 합시다.


HTML설정HTM:L설정

여기서 오른쪽 마우스 클릭 해서 검사 N 눌러줍시다 

단축키는 컨트롤+쉬프트+ㅣ버튼인데 그냥 우클릭해서 N버튼 눌러주시는게

편해요


스크린샷1수식바뀌는거확인


 사진대로 화살표모양버튼을 크릭해주세요! 

클릭하고나서 바꾸고싶은곳에 마우스 커서를 대시면  오른쪽에 있는 

수식들이 바뀌는 것을 알수 있습니다 

뭔가 느낌이 오시지 않나요? 


빨간동그라미확인

메인화면메인화면제목바꾸기

 바꾸고 싶은 곳에 클릭 하면  오른쪽 에 있는애들이

움직이는것을 보이시죠? 자그럼 메인화면에있는 제목을 바꿔보겠습니다 

폰트사이즈폰트사이즈변경

font-size: 1em; 사이즈를

아래 그림과같이 바꿔줍시다

  폰트그기를 px pt em 등 원하는대로 바꿔주시면 되겠습니다.

폰트폰트사이즈변경3em


font-size: 3em; 바꾸어 보겠습니다 

글자크기가 커진것을 알수 있겠죠? 

자이런식으로  우리가 바꾸고싶은곳을 찾아서 설정해주시면되는데요 

여기서는 적용이안되는 미리보기 인걸 꼭 아셔야 합니다 

새로고침을 누르시면 원래대로 돌아가니 참고해주세요 


관리자페이지스킨편집

관리자페이지에 가셔서 스킨편집을 클릭 합니다


html편지html편집버튼클릭


html편집을 클릭합니다.

잘따라오시고 있으신가요? 여기서부터 아까실습 했던내용과

#HTML편집창을 왔다 갔다 이동하면서 해야되니깐 천천히

한번 따라 해보시길 바랍니다.


따라하기따라하기

아까위에서 했던것처럼 하시면되는데 

#header h1 { 

위에있 수식들을 복사합니다  빨간원안에 있는 수식들만 

복사할수 있도록 잘 조절해주세요

따라하기2따라하기2


그다음 다시 HTML 편집창으로 돌아와서 복사한 수식들을 검색창에 넣습니다.

 컨트롤+F 로 검색창이 떠요  

여기서 중요한건 CSS클릭하셔서 검색을하셔야합니다 .

CSS에 꾸미기관련 수식들이 있으니 여기서 검색을 하셔야 정확하게 나와요

HTML에서 검색하시면 나오지않으니 수식들이 있는 안에서 검색하셔야됩니다.

수식들이 들어있는 곳에서 검색!

따라하기3따라하기3


자그럼 이런창이보이시나요?

그림에는 없지만 

font-size 크기를 1em;에서 3em; 으로 바꿔주었습니다.

그럼 글자폰트크기가 증가 합니다. 


나중에 바꿔주실때는 여러분들이 원하는 크기로 변경.

font-size:  사이즈를  원하는 크기로 바꿔주시면됩니다. 


글자크기종류는 px pt em 등 있는데 그냐 em 쓰셔도되고 

pt 나 px 사용하셔도 됩니다.  

그리고 적용 클릭후 새로고침을 누르시면 변경된것을 알수 있을것입니다. 

쉽죠!? 


여기서 한가지 꿀TIP 하나더알려드리겠습니다.

매일 이렇게 번거롭게 찾을수 없잖아요?  

/* 글자크기 */  이런식으로  주석처리를 할수있습니다. 

<!--          -->  으로도 주석처리가 가능합니다.

거이 메모장이라고 생각하시면되요 


주석걸기주석걸기

자 이런식으로 우리가 찾은 수식 앞에다가 주석을 걸어주시면 됩니다.

나중에 찾을때는 컨트롤+F 제목크기  라고 검색하면 편하게 찾을수 있겠죠?

도움이 되셧나요? 

코로나 조심들하시고  다음에도 꿀TIP들로 돌아오겠습니다. 감사합니다.


반응형

댓글0