티스토리와 친구가 된지도 어느새 반년이 지났다 일반블로그에서 취미삼아서 놀던것과는 사뭇다른 분위기에서 배워야할것이 많은것 같아 컴퓨터 지식이 없는 나 같은 사람은 티스토리와 친해지기 정말 적응하기 힘든 세계인것 같다.
티스토리와 친해지기 위해 HTML이 뭐지?
라는주제로 HTML배우기 첫발을 딛어보자.
모르는것을 하나하나 익혀간다는것은 좋은 일이다.
목표가 있기 때문이기에....
아직도 최적화란 문제에 하루하루 힘겨운 도전을 하고 있지만 어떻게 해결해야 하는지 답을 찾지 못하고 있어 답답하다.
현재 직면하고 있는 문제는
핵심적인 웹지표상 느린문제를 개선해야 하는것인데
시간이 지나면 해결이 될 수 있을까? 의문속에 지쳐가는 맘을 달래며 기계어를 배워 보기로 한다.
알고나면 별거 아닐것인데 지금은 너 무 힘들다.....
HTML이란
웹페이지 작성을 위한 언어로서 다음과 같은 구조를 같는다
<html>
<head>
<title>HTML배우기</title>
</head>
<body>
<div style="border: 1px solid#000; padding: 15px;">
제목은<h1>→<h6>로 표현하며 h1이 가장 크고 h6가 가장 작다
<h1>콘텐츠1</h1>
<h2>콘텐츠2</h2>
<h3>콘텐츠3</h3>
<h4>콘텐츠4</h4>
<h5>콘텐츠5</h5>
더 크게하려면<h1 style="font-size:50px; color:#0000ff">제목</h1> 과 같이 스타일로 크기 지정
단락은
<p>단락</p>태그로 표현함
줄바꿈
<br />사용
전체를 고정하려면
<pre>예
글
5
줄</pre>
예
글
5
줄링크는
<a href="주소">링크</a>태그를 사용함
링크
<button> 여기</button>
html buttn은 <button>으로 정의
정렬되지 않은 목록, 글, 머리기호<ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- 1
- 2
- 3
목록의 항목들<li>
순서가 있는 목록,번호<ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
- 1
- 2
- 3
목록의 항목들<li>
</div></body></html>
주의:
html 은 기본적으로 소문자를 쓴다 단 XHTML에는 대소문자 구분이 있다.
속성
링크 : <a href="주소">링크</a>
이미지 :<img src="경로" width=" " height=" " alt="이미지대체문구">
언어선언 :
<!DOCTYPE html>
<html lang="ko">
<body>
<p>언어></p>
</body></html>
타이틀 속성 : 태그에 타이틀 값이 들어가면 그 내용에 마우스를 가져 갔을 때 풍선 도움말이 나온다
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="boder: 1px solid #000; padding:15px;">
<p title="15947_4080">마니머니</p>
마니머니
</div></body></html>
언젠가는 초보 탈출을 할 수 있을것이란 희망을 남겨놓는다
'IT' 카테고리의 다른 글
| 모바일사용 편의성 문제 오류 이해와 해결 (5) | 2021.06.05 |
|---|---|
| 사이트의 구조를 잘 표현 할 수 있도록 HTML태그를 점검해 주세요 (8) | 2021.05.04 |
| 모바일 웹페이지 속도개선 CLS0.25초과 문제 해결하기 (0) | 2021.01.30 |
| 티스토리 직접유입 폭증 왜 그렇지? 이유는 뭘까? (2) | 2021.01.24 |
| 사이트구조 개선하려면 어떻게 하나? (2) | 2020.12.06 |
댓글