주석 과 리스트 태그 알아보기

이번 시간에는 화면상에 보여지진 않지만 개발자에게는 추 후 수정할 때 요긴하게 쓰일 주석에 대해서 알아보겠습니다.
주석은 문서의 수정사항이나 태그의 설명등 문서를 나중에 보았을때 잊지 않도록 메모 혹은 코멘트 정도로 이해하시면 되겠습니다.

또한 메뉴나 목차 등에 쓰여지는 리스트 태그도 함께 알아보겠습니다.
리스트 태그도 함께 알아보려고 합니다. 종류는 두가지로 Unordered List 와 Ordered List 입니다.

일단 실습영상을 먼저 보도록 하겠습니다. 






주석은 영상에서 보신대로 <!-- 로 시작해서 --> 로 끝을 맺고 그 사이에 내용을 적습니다. 

<!-- 주석에 대한 내용은 여기에 적습니다. -->

지금 까지 작성한 내용은 그리 길지 않아서 코멘트가 불필요하게 여겨질 수 있으나 추후에 코드량이 많아지게 되면 중간 중간 주석을 넣어 설명해 주면 나중에 편집 하기가 수월해 집니다. 

이제 리스트 태그에 대해서 알아보겠습니다. 


ul 은 Unordered List 의 태그이고 li 는 List Items 의 태그입니다.
작은 검은색 원형의 점형태로 리스트가 표시 됩니다.

<ul>
<li> 리스트 1 </li>
<li> 리스트 2 </li>
<li> 리스트 3 </li>
<li> 리스트 4 </li>
<li> 리스트 5 </li>
</ul>

실행화면 은 아래와 같습니다.


[ 그림 1 ]





ol 은 Ordered List 의 태그이고 li 는 List Items 의 태그입니다.
숫자형태로 리스트가 표시 됩니다.



<ol>
<li> 리스트 1 </li>
<li> 리스트 2 </li>
<li> 리스트 3 </li>
<li> 리스트 4 </li>
<li> 리스트 5 </li>
</ol>

실행 화면은 아래와 같습니다.



[ 그림 2 ]




오늘 배운 리스트 태그는 활용분야가 많기 때문에 여러번 복습하고 자기 것으로 만들기를 바랍니다. 
그럼 다음에 또 뵈요 ^^



'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )  (0) 2018.10.06
따라하며 배우는 HTML - #2 ( 이미지 넣기 )  (0) 2018.10.06
따라하며 배우는 HTML - #1 ( 기본 템플릿 )  (0) 2018.10.06

HTML 줄바꿈 및 특수문자코드 (엔티티코드)

이번에는 내용을 쓸 때 꼭 쓸 수 밖에 없는 중요한 태그인 <br /> 태그와 HTML 에서 사용되는 특수 문자 중에 자주 사용되어지는 것으로만 몇개 나열해 보도록 하겠습니다. 

<p> 태그내에서 글을 쓸 때 내용을 입력하고 엔터를 치고 또 내용을 입력하면 실제 화면상에서는 줄바꿈이 되어 있지 않아서 당황할 수 있습니다. 
HTML 문서에서는 줄바꿈을 하기위해서 <br /> 태그를 사용해 주셔야 합니다. ( <br> 로 사용하셔도 됩니다. ) 

줄바꿈과 마찬가지로 내용 중에 띄어쓰기를 여러번 하셔도 띄어쓰기가 한번만 되어지도록 되어 있어서 실제화면상에서는 한칸만 띄어쓰기 됩니다. 
이 때는 특수 문자 코드인 엔티티코드를 써주셔야 하는데 &nbsp; 라고 써 주시면 한칸 공백문자 (띄어쓰기) 됩니다. 
당연히 여러번 써주시면 여러칸 띄어쓰기 되겠죠..^^

아래의 내용을 따라해 보기 전에 동영상으로 미리보는 시간을 가져보고 차근차근 따라해 보아요 ^^







<p>
나비야 나비야 이리 날아 오너라
노랑나비 흰나비 춤을 추며 오너라
봄바람에 꽃잎도 방긋방긋 웃으며
참새도 짹짹짹 노래하며 춤춘다
</p>

이렇게 태그 내용을 쓰게 되면 실제 화면상에는 아래와 같이 보이게 됩니다. 


나비야 나비야 이리 날아 오너라 노랑나비 흰나비 춤을 추며 오너라 봄바람에 꽃잎도 방긋방긋 웃으며 참새도 짹짹짹 노래하며 춤춘다


여기에 <br /> 태그를 줄바꿈 할 곳에 써주면 실제로 줄바꿈을 하지 않더라도 


<p>

나비야 나비야 이리 날아 오너라 <br />
노랑나비 흰나비 춤을 추며 오너라 <br />
봄바람에 꽃잎도 방긋방긋 웃으며 <br /> 참새도 짹짹짹 노래하며 춤춘다 <br />
</p>


아래와 같이 화면상에서 잘 표현되어 집니다. 


나비야 나비야 이리 날아 오너라

노랑나비 흰나비 춤을 추며 오너라
봄바람에 꽃잎도 방긋방긋 웃으며
참새도 짹짹짹 노래하며 춤춘다


이렇게 줄바꿈을 하실 수 있습니다. 


이제 엔티티코드를 알아보도록 하겠습니다. 이건 외워두시면 편리하게 사용하실 수 있습니다. 

그렇다고 못 외우셔도 상관 없습니다. 검색엔진에서 엔티티코드라고 치시면 수두룩하게 나오니까 걱정하실 필요는 전혀 없으실거에요

가장 많이 쓰이는 엔티티코드 다섯 개만 나열해 보겠습니다.


&lt; 

< 

%gt;

> 

&nbsp;

띄어쓰기( 공백문자 " " )

&amp;

&

&copy;

ⓒ


여기서 우리가 알아볼 코드는 띄어쓰기 를 한번 알아보겠습니다. 


띄어       쓰기 


라고 쳐도 화면상에는 


띄어 쓰기


라고 나오게 됩니다. 


이 때 &nbsp; 코드를 띄어쓰기 할 곳에 여러번 넣게 되면 저는 다섯번 넣어보도록 하겠습니다. 


띄어&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;쓰기


그러면 결과 화면은 아래와 같이 다섯칸 띄어쓰기된 화면이 나오게 될 것입니다. 


띄어     쓰기


다른 엔티티코드들은 한번씩 해보세요 ~ ^^

더 많은 엔티티 코드 들이 있으니 더 알아보시고 싶으시면 검색엔진에 엔티티코드라고 쳐보시면 많은 정보를 보실 수 있으실 겁니다.


그럼 오늘은 여기까지 하고 다음에 또 뵈요 ~ ^0^y





'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #2 ( 이미지 넣기 )  (0) 2018.10.06
따라하며 배우는 HTML - #1 ( 기본 템플릿 )  (0) 2018.10.06

HTML 에 이미지 넣기

문서에 이미지 넣기 를 배워보도록 하겠습니다. 

일단 기본 소스를 가져와야 겠죠..^^

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서에 이미지 넣기</title>
  </head>
  <body>
     <h1>문서에 이미지 넣기</h1>
     <p>이제 문서에 이미지를 넣도록 하겠습니다.</p>
  </body>
</html>


그리고 오늘 할 내용을 먼저 영상으로 보겠습니다. ^^



p 태그 하단에 <img src="소스 경로"> 를 추가해주시면 이미지가 들어가게 됩니다. 

소스 경로에 이미지의 절대경로 or 상대경로 를 알아야 합니다...
이부분은 구글 이나 네이버의 검색 기능을 이용해서 한번 알아보도록 하세요 ^^;;;
따라하며 배우는 것에 촛점을 맞추었기 때문에 자세한 사항은 검색엔진을 통해서 알아가는 것을 추천합니다. 

<img src="img01.jpg">    <======== 이미지 상대경로로 입력한 예 입니다. 
<img src="http://example.com/img01.jpg">  <======  이미지의 절대경로로 입력한 예 입니다. 

이미지 태그에는 속성이 많이 있는데요...다양한 기능들은 검색엔진을 통해서 알아보도록 해봅시다.
검색엔진에 "img 속성" 이렇게 검색 해보시면 다양한 기능들을 알아보실 수 있습니다.


여기서는 간략하게 alt 속성과 width 속성만 알아보도록 하겠습니다.
alt 속성은 이미지를 대체 하는 텍스트 입니다. 화면에서 이미지가 나오지 않게 되면 대체로 텍스트가 쓰여지게 되는거죠.. ( [ 그림 3 ] 참고 )
width 속성은 이미지의 가로 사이즈의 크기를 정해줄때 사용됩니다. 단위는 px(픽셀) 이며 자세한 사항은 검색엔진을 통하여 알아보시기 바랍니다. ^^




[ 그림 1 ]


[ 그림 1 ] 사진은 용인 한택식물원에 갔을 때 찍었던 사진 입니다. 
이 사진을 웹 페이지에 적용 시키면 [ 그림 2 ] 와 같은 모습이 됩니다. 



저는 이렇게 한번 소스코드를 적어보았습니다.
<img src="img01.jpg">


[ 그림 2 ]


이미지의 크기가 너무 커서 한 화면에 다 나오지 않습니다..

width 속성으로 크기를 줄여보겠습니다.  


<img src="img01.jpg" width="300px">


[ 그림 3 ]


[ 그림 3 ]의 모습은 이미지를 가져오고 width 값이 300px 적용된 값입니다. 






이미지가 나오지 않을 경우에는 alt 속성에 있는 값이 나오게 됩니다.
<img src="img01.jpg" width="300px" alt="용인 한택식물원">

[ 그림 4 ]


[ 그림 4 ] 부분은 그림이 나오지 않았을 경우 alt 속성이 적용된 모습입니다. 



이제 전체 소스 코드 내용을 다시 한번 보겠습니다. 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>문서에 이미지 넣기</title>

  </head>

  <body>

     <h1>문서에 이미지 넣기</h1>

     <p>이제 문서에 이미지를 넣도록 하겠습니다.</p>

     <img src="img01.jpg" width="300px" alt="용인 한택식물원">

  </body>

</html>


HTML 문서의 기본 템플릿에서 이미지 태그 한줄 추가해 보았는데 무언가 확 달라진 느낌이죠 ^^ ~ 그렇다고 해주세요...

그럼 다음에 또 뵐게요..






'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )  (0) 2018.10.06
따라하며 배우는 HTML - #1 ( 기본 템플릿 )  (0) 2018.10.06

HTML 기본 템플릿

HTML 의 기본 소스 입니다. 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>브라우저 상단 탭에서 보여지는 제목</title>

  </head>

  <body>

    <h1>HTML 기본 템플릿</h1>

    <p>안녕! 친구야 ~ 정말 반가워 ~</p>

  </body>

</html>



오늘 할 내용을 먼저 영상으로 한번 보시죠..^^






윈도우에 있는 메모장을 열어서 위와 같이 타이핑을 한 후에 저장을 합니다.
필자는 abc.html 이라고 저장을 하였으며
저장할 때 이름은 원하는 이름으로 하되 확장자는 .html 을 붙여줘야 합니다.

abc.html 이라는 아이콘이  [ 그림 1 ] 과 같이 생성되었을 텐데

필자는 기본 브라우저가 크롬이여서 [ 그림 1 ]과 같은 이미지로 아이콘이 만들어졌습니다.



[ 그림 1 ]



이 아이콘을 더블클릭하면 [ 그림 2 ] 와 같은 화면이 나오면서 기본 화면이 나타날 것입니다. 


[ 그림 2 ]


[ 그림 2 ] 를 보는 바와 같이 기본 템플릿을 가지고 제목과 내용을 가진 HTML 페이지를 쉽게 만들어 볼 수 있습니다. 


이제 위의 소스를 분석(?) 해 보겠습니다. 


<!DOCTYPE html>     <-----   이 문서는 HTML 문서입니다. 라는 뜻입니다.


HTML은 tag 로 시작해서 tag 로 끝나도록 정해져 있습니다. ( 예외도 있지만 예외는 나중에 차근차근 알아가 봅시다. )

<html>   ...   </html>  <-----  html 로 시작하는 태그(tag) 이며 문서의 시작과 끝을 정해줍니다.


<head>  ...   </head> <-----  head 태그는 html 태그 사이 body 태그 위에 생성합니다. 


<body>  ...   </body> <-----  body 태그는 html 태그 사이 head 태그 아래에 생성합니다. 



이렇게만 우선 적용해 보면.. 아무것도 없는 가장 기본적인 뼈대 모양을 갖춥니다.


<!DOCTYPE html>

<html>

  <head>

    

  </head>

  <body>

    

  </body>

</html>


여기에 추가적으로 

<meta charset="utf-8">   <-----  head 태그 사이에 문서의 인코딩 타입을 정해줘야 파일의 글자들이 깨지지 않습니다. 기본적으로 utf-8 을 선언해 줍니다. 


<title>브라우저 상단 탭에서 보여지는 제목</title>  <-----  title 태그는 말 그대로 문서의 제목과 같은 것으로 브라우저 상단의 탭 형태로 보여지는 문서의 제목을 말합니다. 


<h1>HTML 기본 템플릿</h1> <-----  h1 태그는 (heading) HTML 문서 내의 제목을 나타내며 h1 태그부터 h6 까지 다양하게 있습니다.


<p>안녕! 친구야 ~ 정말 반가워 ~</p>   <-----  p 태그는 (paragraph) 단락을 나누고 여백을 주며 p 태그 안에 내용을 적을 수 있습니다. 


이제 전체 내용을 다시 한번 보겠습니다. 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>브라우저 상단 탭에서 보여지는 제목</title>

  </head>

  <body>

    <h1>HTML 기본 템플릿</h1>

    <p>안녕! 친구야 ~ 정말 반가워 ~</p>

  </body>

</html>


다시 보니 내용을 정확히 알 수 있으시죠..? 

코드를 눈으로 읽으실 수 있으시면 이해 되신겁니다. 







'Program > HTML' 카테고리의 다른 글

따라하며 배우는 HTML - #6 ( HTML Style)  (0) 2018.10.07
따라하며 배우는 HTML - #5 ( a 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 )  (0) 2018.10.06
따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )  (0) 2018.10.06
따라하며 배우는 HTML - #2 ( 이미지 넣기 )  (0) 2018.10.06

+ Recent posts

티스토리툴바