HTML 수정하기전 기본숙지사항

개요

구글 블로그에서 게시물을 작성하고 페이지와 테마 수정을 하기위해 HTML 수정에 필요한 기본사항에 대해서 공부함

 

기본형

<name>Contents</name>​

네임을 시작 태그, /네임을 종료 태그라고함

시작 태그와 종료 태그를 합쳐 태그tag라고함

contents는 내용임

위의 모든 요소를 element라고함

예를 들어 <p>Lorem</p>는 p요소라하고 시작 태그는 <p>, 종료 태그는</p>, 내용은 Lorem임

 

태그

보통 HTML태그는 대소문자를 구별하지 않지만 표준에서는 태그와 태그 안에 사용하는 모든 속성들은 소문자를 사용할 것을 권하고 있다.

 

맞는예
<img src='image.png'>

틀린예
<IMG src='image.png'>

 

시작 태그와 종료 태그를 정확히하기

대부분 태그는 시작 태그와 종료 태그가 하나의 짝으로 이루어지고 웹 브라우저에서도 시작 태그에서 종료 태그까지를 적용 범위로 인식함, <img>태그나 <br>태그처럼 종료 태그가 없는 경우도 있지만 대부분 반드시 종료 태그를 삽입해야함

 

적정한 띄어쓰기

HTML에서 여러번 띄어쓰기나 줄바꿈을 하더라도 한 칸의 공백으로 인식함, 따라서 HTML 소스 코드를 작성할 때는 태그의 포함 관계에 따라 단계적으로 띄어 쓰며 눈으로 쉽게 확인가능하도록 작성함, 웹 페이지의 구조를 확인하기 편리하도록 보통 작성하고 있음

 

띄어쓰기O
<ul>
  <li>메뉴01</li>
  <li>메뉴02</li>
  <li>메뉴03</li>
</ul>

띄어쓰기X
<ul>
<li>메뉴01</li>
<li>메뉴02</li>
<li>메뉴03</li>
</ul>

 

속성

태그는 속성(attribute)과 함께 사용할 수 있다. 예를 들어 <div>에 id 속성을 추가하고 그 값(value)을 abc로 정하고 싶으면

<div id="abc">
       ...
</div>

속성값은 큰 따옴표와 작은 따옴표로 감싼다. 따옴표를 사용하지 않아도 되나 속성값에 띄어쓰기가 있으면 큰 따옴표또는 작은 따옴표로 감싼다.

예를 들어 다음의 경우 마지막 부분은 빨간색이 되지 않는다. style 속성의 값을 color:로 해석하기 때문임

<p style="color:red;">gold</p>
<p style="color: red;">gold</p>
<p style='color:red;'>gold</p>
<p style='color: red;'>gold</p>
<p style=color: red;>gold</p>     <<<< ''또는""를 안넣었기 때문

 

주석

주석 comment 이란 나중에 자신이 작성한 HTML 소스 코드를 보거나 다른 사람이 HTML 소스를 열어 보더라도 페이지의 내용을 쉽게 이해할 수 있도록 설명하는 것임

<!--와 -->로 둘러싸는 부분

<!-- ~~~주석내용~~~ -->

줄바꿈이 있어도 주석으로 처리됨

<!-- ~~~~주석내
용~~~~~
~~~~~~
-->

주석 안에 주석을 넣으면 원치 않는 결과가 나옴

<!--
 <!--
 주석내용~~~~~
  -->
 주석내용 -->

 

HTML 이미지 삽입하기 위해 알아야하는 것들 img

<img> 태그는 HTML 문서에 이미지를 삽입하는 태그다..

 

기본형

<img src="images.jpg" alt="No image" width="540" heigh="360">

주요 속성

src는 이미지의 경로다. uri

alt는 이미지를 설명해주는 대체 텍스트다.

width는 이미지의 가로 크기다.

height는 이미지의 세로 크기다.

 

src

이미지를 HTML문서에 넣으려면 src 속성에 파일 경로를 지정한다. 경로가 정확하지 않으면 이미지가 안뜬다.

인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로를 지정한다. 크롬 브라우저에서는 웹페이지에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭해서 이미지 주소 복사를 선택하면 이미지 경로를 알 수 있다. 이런 복사 이미지 경로를 src 속성 값으로 지정한다.

<img src="https://www.goldsystem/432/sample.png">

 

alt

alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용

대체 텍스트란 웹페이지에 삽입한 이미지가 시각적인 요소로 이미지를 볼 수 없을때는 그 내용을 알 수 없다. 웹문서를 읽어주는 화면 낭독기도 문서 상의 텍스트만 읽어주기 때문에 이미지를 만나면 건너뛴다. 하지만 <img>태그의 alt 속성을 작성해두면 이미지에 대한 설명을 넣을 수 있다.

<img src="구스.jpg" alt="거위">

하지만 특별한 의미 없이 꾸미는 용도로 사용한 이미지에 alt 속성에 대체 텍스트를 넣지는 않는 경우가 많다.

<img src="테두리디자인.gif" alt="">

 

width, height

이미지 파일을 웹 페이지에 추가할때 브라우저 창에 원하는 크기로 조정해 넣기 위해 사용한다. 이를 지정하지 않으면 원본 그대로 표시된다.

이미지 파일의 용량은 그대로 두면서 웹 사이트의 디자인에 따라 이미지를 작게 또는 크게 표시해야 할 경우 이 속성을 사용하면 유용하게 사용할 수 있다. 작은 이미지를 크게할 경우에는 화잘이 나빠진다.

 

 

rel 코드상의 의미

rel 코드상의 의미

 

 

og 코드의 사용

Meta Tag , og는 뭔가

 

 

상단메뉴바 만들어보기 li, lu태그와 CSS의 개념과 함께

CSS를 이용 상단 메뉴바

 

 

Bool 함수에 대해 알아보기

BOOL 알아보기