📗 self-study/📗 생활코딩

[정리] 생활코딩 html

천재강쥐 2022. 5. 24. 16:03

 

 

 

Html(HyperText Markup Language)

<!doctype html>
 <html>

  <meta charset="utf-8"> <!-- 이 페이지를 열 때는 utf-8로 열어라 -->
    <title> <!-- title 제목 -->
     이거는 제목입니다
     </title>

	<head>
     <h1> <!-- h1 가장 큰 글씨 ~ h6 가장 작은 글씨-->
      <a href="코딩 공부 (tistory.com)" target="_blank" title="html5 specification"> 
       천재강쥐
     </a>
       의 티스토리입니다
    </h1>
   <img src="이미지 주소">
  </head>

  <body>
   <ol>
    <li>
      hana
    </li>
    <li>
      duna
    </li>
    <li>
      sena
    </li>
    <li>
      pona
    </li>
   </ol>
   <p>
   안녕하세요 1문단입니다
   <p>
  안녕하세요 2문단입니다
   <br>
  안녕하세요 줄바꿈입니다
   <br>
  우리 귀요미들을 소개할 겁니다 나 강아지 있다 부럽지
  </body>
</html>

 

*한글이 띄■삡뚭뿌처럼 외계어처럼 로드될 때 제대로 나오게 하는 <meta charset="utf-8">

meta: ~ 뒤에, ~을 넘어서, ~사이에

charset(character setting): 특징 설정

utf-8: 유니코드를 위한 문자 길이 가변 인코딩 방식 중 하나

 

* a href는 클릭했을 때 해당 페이지로 넘어가게 링크를 거는 태그

anchor(닻을 내리다) / h(html)의 ref(reference 서류, 주소) ⇒ 클릭하면 이 주소에 닻을 내려(이리로 가)

 

target: 창을 어떻게 열 것인가

_self : 클릭한 해당 창에서
_blank : 새창으로
_parent : 부모 창에서(부모 창이 없으면 _self 속성으로 처리)
_top : 전체 브라우저 창 중 가장 상위의 창에서 (부모 창이 없으면 _self 속성으로 처리)

 

title: 커서를 올리면 도움말 설정(페이지 title과 같으나 a href에 들어가면 커서 올렸을 때 도움말이 됨)

 

*같은 속성의 tag는 같은 들여쓰기를 사용하는 것이 보기 편하다

 

* = 앞뒤로는 띄어 쓰지 않는다(왜인지는 모르겠지만 그게 편하다고 한다)

 

* ctrl로 다중 지정이 가능하며 tap으로 들여쓰기 한다

 

*html의 주석은 <!-- 주석 내용 --> 

 

*부모 태그와 자식 태그 확인하자

(부) ol: ordered list 목차의 순서를 매김 / ul: unordered list 목차의 순서를 매기지 않음

(자) li: list 목차

 

*태그가 생각이 안 나면 구글링을 이용하자

검색어: HTML UNDERLINE TAG