안녕하세요~ 태니밀리언입니다.
오늘은 제목처럼 티스토리 꾸미기 해볼건데요, 우선 가장 기본적으로 알아야 할 웹언어... 엄연히 랭귀지가 붙어있죠~ HTML 기본 먼저 알아보고 차츰 티스토리를 꾸며 보겠습니다.
웹에 관련된 기본상식을 알고 가면 좋은데 제가 설명하기에는 내용이 너~무 길어지기도 하고 깔끔하게 정리되어 있는 페이지가 있으니 링크 걸어 드릴께요(맨 아래). 이것이 진정한 웹의 힘!!
🎯
웹의 핵심은 바로 상호 링크하여 서로 연결된다는것!
전세게 어디에서나 인터넷이 된다면 서로 문서 공유하기도 쉽고 파일을 주고 받기도 쉽죠. 웹이 없을때 문서는 우편으로 데이터는 디스크로 보내고 옮겼었죠.
지금은 링크를 통해 전세계인과 연결되어 있어요. 웹을 않할 수 없고 모를 수 없는 가장 중요한 이유 입니다.
서버 클라이언트 개념까지 들어가면 너무 머리아프니까 요건 생략하고요~
자 중요한거 이제부터 시작!
티스토리에서 내 블로그를 만들고 나면 편집창에서 HTML 코드를 볼수가 있어요.
HTML의 기본 뼈대는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다.
<body></body> 태그 사이에 쓰는 html 코드를 브라우져가 해석해서 우리가 브라우져(크롬,사파리,파이어폭스,익스플로어등)에서 볼수 있도록 내용을 출력해준다고 생각하시면 됩니다.
네이버나 구글에 사이트 등록할때 많이 보셨을텐데 <head></head>는 그 문서의 속성 내용 정보 등을 넣는 공간입니다. 보통의 검색엔진 로봇이 그분을 먼저 읽고 서치하기때문에 그 곳에 meta 태그등 문서 관련 정보를 넣어주신다고 생각하면 쉽습니다. 브라우져 화면상에서 직접적으로 우리 눈에 보이지는 않지만 브라우져 탭에 타이틀부분에서 정의해준 제목이 보입니다.
위 태그에서 보시면 아시겠지만 태그는 쌍으로 이루어져 있습니다. 여는 태그 닫는 태그라고 하는데요,
태그를 닫아주지 않을경우 문서가 엉켜보이는 경우가 생기니까 태그를 닫아주시면 좋습니다. 태그를 잘 맞게 써야 사이트 최적화에도 도움이 됩니다. <br/><hr/>같이 단독으로 쓰는 태그도 있습니다.
태그에 관련된 내용은 w3schools이 공부하기 가장 좋습니다. 관심있으신 분들은 틈틈히 보시면 좋겠죠? 요것도 역시 아래에 링크 걸어 드립니다~
우리가 그 많은 태그를 다 알필요는 없고 티스토리에서 자주 쓰는 태그 정도만 이해하고 수정할 줄 알면 됩니다.
물론 치환코드를 제공하기 때문에 많이 알고 많이 응용할 수록 더 화려한 블로그를 만들수도 있겠지만 직업적으로 하실게 아니라면 필수 태그만 아셔도 충분히 바꿀수 있습니다.
※ 치환코드란 티스토리 뿐만 아니라 카페24,고도몰,메이크샵등에서도 접할 수 있는 용어인데요.
웹페이지는 크게 표현이되는 페이지, 일을 처리하는 페이지 , DB를 처리하는 페이지가 있습니다.
여기에서 우리가 손을 댈수 있는 페이지는 표현이 되는 페이지 즉 html과 css , javascript 만 수정이 가능하고 사용자에게 받은 내용을 처리하고 DB에 저장시키는 일은 할 수 없습니다.
대신 정해진 범위 안에서 DB에 들어간 값을 원하는 곳으로 가지고 와서 출력해줄수가 있도록 코드를 제공해주는데 그걸 치환코드라고 생각하시면 됩니다. 확장성을 제공하는 플랫폼에서는 거의 같은 개념으로 치환코드를 가져다 쓰시면 되요.
쇼핑몰플랫폼들은 티스토리보다 훨씬 더 많은 치환코드를 제공합니다. 그래서 디자인들이 막 화려하죠~
티스토리 편집에 나오는 html 파일을 보면 구조로 되어 있는게 치환코드 입니다.
<h1>
<a href="https://todaystudying.tistory.com/">
<s_if_var_logo>
<img src="" alt="플랜데버의 웹기획 실전">
</s_if_var_logo>
<s_not_var_logo>
플랜데버의 웹기획 실전
</s_not_var_logo>
</a>
</h1>블로그 만들때 우리가 설정하거나, 자동으로 설정되는 내용들을 웹문서로 가지고 와서 브라우져에 출력해 주고 있죠.
티스토리는 xml을 같이 써서 html 태그와 헷갈릴수도 있는데요, <s_if_var_logo> 와 같이 문장형 태그는 html 기본태그 아닙니다. xml을 따로 설명하려면 내용이 너무 길어지니까요 xml은 패스 합니다.
티스토리에서 보이는 아래 태그들만 간략히 정리해 보겠습니다.
| 태그 | 설명 | 사용예시 |
| div | html문서의 섹션을 정의하고 레이아웃을 만들때 주로 사용 합니다. 다른코드들을 담는 태그 입니다. |
<div> <h1>제목입니다</h1> <p>문장도 들어가고</p> <ul> <li>목록도 들어갑니다.</li> <li>목록도 들어갑니다.</li> </ul> </div> |
| h1 | 제목 태그 | <h1>제목이 점점 작아집니다.</h1> <h2>제목이 점점 작아집니다.</h2> <h3>제목이 점점 작아집니다.</h3> <h4>제목이 점점 작아집니다.</h4> <h5>제목이 점점 작아집니다.</h5> <h6>제목이 점점 작아집니다.</h6> |
| ul | 태그를 <li> 함께 사용하여 순서없는 목록을 만듭니다. | <ul> <li>공지사항 첫번째 목록</li> <li>공지사항 두번째 목록</li> <li>공지사항 세번째 목록</li> </ul> |
| span | 텍스트,문서 일부분에 특성 정의할때 인라인 요소 | <p>티스토리 <span style="color:blue">html</span> 공부하기 </p> |
| p | 문단 태그, 앞뒤로 빈줄 자동 추가, 블록요소 | <p>티스토리 공부하기</p> |
| br | 줄바꿈 태그 | 티스토리 <br/> 공부하기 |
| a | 링크 태그 | <a href="speedcok.tistory.com/">이동페이지</a> |
| img | 이미지 태그 | <img src="img1.jpg" alt="이미지설명"> |
※ form / input / textarea / button 등은 일처리 DB 와 연관이 깊은 태그라서 모르셔도 티스토리를 꾸미는데는 별로 지장이 없습니다.
내용을 길게 안쓰려고 필요한 정보는 링크를 걸어드리고 있는데도! 내용이 길어졌네용.
css는 하지도 못했는데.... 아는것과 정리해서 쓰는것은 엄청난 차이네요... 하루종일 써도 이정도... ㅠㅠ
웹에대한 기초내용이 아주 깔끔하게 정리되어 있네요! Goooood!!!
html/css/javascript 등 풍부한 정보가 있습니다. 관심 있으시면 틈틈히 보시면 도움 됩니다~
HTML Tutorial
HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,
www.w3schools.com
다음시간에 이어서 css 보도록 하겠습니다~
오늘 하루도 행복하고 건강합숑~ (●'◡'●)
'코딩(개발) > 웹퍼블리싱' 카테고리의 다른 글
| CSS 버튼 애니메이션 (0) | 2022.05.26 |
|---|---|
| 웹폰트를 이용하여 내 쇼핑몰 글자를 바꿔보자 (0) | 2022.05.19 |
| 그림자 만들기 (0) | 2022.05.10 |
| 티스토리 우클릭 방지 (0) | 2020.12.18 |
댓글