'HTML기초강좌' 태그의 글 목록

[웹프로그래밍 기초강좌 - HTML 07]

HTML 이미지태그

(HTML기초강좌 7강)

① HTML 이미지태그 <img>

- <img> 태그는 웹페이지에 이미지를 삽입할때 사용됩니다.

- <img> 태그는 닫는태그가 없는 태그입니다.

- <img> 태그는 두개의 필수 속성이 있습니다.

② <img> 태그 필수 속성 src, alt

속성	설명
src	삽입할 이미지의 경로를 지정합니다.
alt	이미지의 설명을 작성합니다.

-필수 alt속성은 사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결, src 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공합니다.

③ 절대경로, 상대경로

경로	설명
절대경로	현재위치와 관계없이 고유한 경로(주소)를 말합니다.
상대경로	현재위치를 기준으로 작성한 경로를 말합니다.

1) 절대경로

Q. 우리은행이 어디에 있나요?
A. 경기도 안양시 동안구 벌말로66 1층에 있어요~

- 현재위치가 어디이든 한번에 갈 수 있는 고유한 경로(주소) 입니다.

- 예) C:\Users\Desktop\블로그\01.HTML\07.이미지태그

- 예) https://molra0000.tistory.com/

장점	단점
- 작성중인 파일의 위치가 바뀌어도 영향을 받지 않는다. 코드를 복사해서 다른 곳에 붙일 때 경로를 수정할 필요가 없다. - 고유 경로이기 때문에 소스를 분실할 가능성이 낮다.	- 만일 경로, 운영체제 (루트 디렉토리가 다름), 서버, 도메인 주소가 변경되면 절대경로도 다 수정해야한다. - Full Path를 다 적어야 하기 때문에 불편하다.

2) 상대경로

Q. 우리은행이 어디에 있나요?
A. 쭉직진해서 오른쪽 골목으로 들어가면 1층에 있어요~

- 현재위치를 기준으로 경로를 작성하는 방법입니다.

- 현재 코드를 작성중인 위치(폴더)를 기준으로 작성한 상대적인 경로입니다.

- 예) <img src="dophin.jpg> : 현재 작성중인 파일과 같은 폴더 안에 이미지가 있습니다.

- 예) <img src="../dolphin.jpg" : 현재 작성중인 파일 상위 폴더 안에 있습니다.

/ : 가장 최상위 디렉토리 (root)로 바로 이동
./ : 현재 디렉토리를 의미합니다. 생략가능
../ : 상위 디렉토리
../../ : 두 단계 위의 디렉토리

장점	단점
- 상위 폴더명이 바뀌더라도 현재 작성중인 파일, 즉 자기 자신을 기준으로 삼기 때문에 유동적으로 경로를 찾을 수 있다. 때문에 로컬에서 작업을 하기 편하다. -절대경로에 비해 간결하게 작성할 수 있다.	- 작성중인 파일의 위치가 변경되면 상대경로로 작성한 주소도 수정이 필요하다. - 파일의 위치를 잊어버리면 소스를 분실할 가능성이 높다.

④ 이미지 크기 속성 width, height

속성	설명
width	이미지의 너비를 지정합니다.
height	이미지의 높이를 지정합니다.

<실습코드>

  <p>기본이미지-크기미지정</p>
  <img src="dolphin.jpg" alt="돌고래">
  
  <p>이미지 크기지정 가로500,세로300</p>
  <img src="dolphin.jpg" alt="돌고래" width="500" height="300">

<실행화면>

* 참고
이미지크기는 html에서 바로 지정하기도 하지만 css로 지정 할 수 있습니다.

예) <img src="dolphin.jpg" alt="돌고래" style="width:500px; height:3300px;">

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 08]HTML 오디오,비디오 태그 (0)	2021.10.05
[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29

[웹프로그래밍 기초강좌 - HTML 06]

HTML 테이블태그 ( table )

(HTML기초강좌 6강)

① 기본 테이블 구조 (table/tr/td)

- 테이블을 사용함으로 웹개발자가 데이터를 열과행으로 정렬하여 표현할 수 있습니다.

- 테두리를 설정해주지 않으면, 기본으로 빈 테두리로 테이블이 생성됩니다. (* 참고: css border으로 지정)

- 모든 테이블 행에는 셀의 수가 동일해야합니다. (셀을 합쳐야할경우, 아래 배우게 될 colspan,rowspan속성을 이용합니다.)

태그	설명
<table>	테이블을 만드는 태그입니다.
<tr>	테이블 내부의 행 태그입니다.
<td>	행 내부의 일반 셀 테그입니다.
<th>	행 내부의 제목 셀 태그입니다.
<caption>	테이블 제목 또는 간단한 설명을 작성하는 태그입니다.

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>음식</caption>
    <tr>
      <th>한식</th>
      <th>양식</th>
      <th>중식</th>
    </tr>
    <tr>
      <td>불고기</td>
      <td>피자</td>
      <td>짜장면</td>
    </tr>
    <tr>
      <td>청국장</td>
      <td>오일파스타</td>
      <td>짬뽕</td>
    </tr>
    <tr>
      <td>우렁쌈밥</td>
      <td>스테이크</td>
      <td>탕수육</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

*참고)
테이블은 default로 테두리가 표시되지않기 때문에 편리한 확인을 위하여 테투리를 1px주었습니다.

테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.
border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다.
(css로 추가하는 부분입니다. 현재는 그냥 무시하시면 됩니다.)

② cospan - 열 합치기

- colspan 속성으로 테이블의 열(column)을 합칠 수 있습니다.

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>월화수 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
    </tr>
    <tr>
      <td colspan="3">우유</td>
    </tr>
    <tr>
      <td colspan="2">쌀밥</td>
      <td>스파게티</td>
    </tr>
    <tr>
      <td>떡갈비</td>
      <td>오징어볶음</td>
      <td>피클</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

③ rowspan - 행 합치기

- rowspan속성으로 테이블의 행(row)을 합칠 수 있습니다.

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>월화수 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
    </tr>
    <tr>
      <td>쌀밥</td>
      <td>흑미밥</td>
      <td>현미밥</td>
    </tr>
    <tr>
      <td>떡갈비</td>
      <td>미니돈까스</td>
      <td rowspan="2">제육볶음</td>
    </tr>
    <tr>
      <td>배추김치</td>
      <td>피클</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

④ table 직접 만들어보기 (문제)

- 아래의 테이블의 코드를 직접 짜보세요!

- 각각의 셀크기는 무시하고 만들시면 됩니다.

<테이블 만들기 문제>

<답> 꼭 코드를 작성해보고 아래 더보기를 클릭하여 답을 확인하세요!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>식단표 테이블 만들기</h1>
  <table border="1">
    <caption>머행블로그 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
      <th>목</th>
      <th>금</th>
      <th>토</th>
      <th>일</th>
    </tr>
    <tr>
      <td colspan="2">쌀밥</td>
      <td colspan="3">잡곡밥</td>
      <td>스파게티</td>
      <td>짜장면</td>
    </tr>
    <tr>
      <td>불고기</td>
      <td>떡갈비</td>
      <td>미니돈까스</td>
      <td>오징어볶음</td>
      <td>제육볶음</td>
      <td rowspan="2">피클</td>
      <td>단무지</td>
    </tr>
    <tr>
      <td>배추김치</td>
      <td>깍두기</td>
      <td>미소된장국</td>
      <td>동치미</td>
      <td>고추절임</td>
      <td>짬뽕국물</td>
    </tr>
  </table>
</body>
</html>

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 08]HTML 오디오,비디오 태그 (0)	2021.10.05
[HTML 기초 07]HTML 이미지태그 <img> (0)	2021.10.03
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29

[웹프로그래밍 기초강좌 - HTML 05]

HTML 목록태그

(HTML기초강좌 5강)

① <ul> 태그 - 순서가 없는 목록

- <ul> 태그는 unordered list의 약자로, 순서가 필요없는 목록을 만들때 사용됩니다.

- <ul> 태그 내부에 <li>요소 (list item)을 사용하여 각 항목을 표시합니다.

- 대부분의 브라우저에서 ul태그의 리스트에는 원과 같은 불릿(bullet)으로 표시됩니다.

<!DOCTYPE html>
<head>
</head>
<body>
   <ul>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ul>
</body>
</html>

<실행화면>

② <ol> 태그 - 순서가 있는 목록

- <ol>태그는 순서가 있는 목록을 만들기 위해서 사용됩니다.

- <ul>과 동일하게 내부에 <li>로 리스트를 작성합니다.

- 대부분의 브라우저에서 리스트를 숫자(기본값)로 표현되며, 속성을 지정하여 변경이 가능합니다.

- <ol>리스트에는 type,start,reserved와 같은 속성을 사용할 수 있습니다.

속성	설명
type	목록에 사용될 마커를 지정합니다. - 숫자(default) : 1 - 영어 대문자 : A - 영어 소문자 : a - 로마숫자 소문자 : i - 로마숫자 대문자 : I
start	시작 목록의 순번을 지정합니다. - 숫자로 순번을 지정
reversed	항목을 역순으로 표시합니다.

<!DOCTYPE html>
<head>
</head>
<body>
   <ol>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
</body>
</html>

<실행화면>

<!DOCTYPE html>
<head>
</head>
<body>

  <p>type 영어대문자로 변경</p>
   <ol type="A">
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>

<p>4부터 숫자리스트</p>
   <ol start="4">
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
   
<p>숫자 거꾸로 </p>
   <ol reversed>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
</body>
</html>

<실행화면>

③ <dl> 태그 - 설명 목록

- <dl>태그는 제목과 설명이 한 쌍인 설명 목록을 만들때 사용됩니다.

- dl은 description list 의 약자입니다.

- dt,dd를 내부에 같이 사용되며 dt는 제목 / dd는 설명을 표시합니다.

<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
       <dl>
           <dt>떡볶이</dt>
           <dd>가래떡을 적당한 크기로 잘라 여러 가지 채소를 넣고 양념을 하여 볶은 음식</dd>
           <dd>양념은 간장으로 하기도 하고, 고추장으로 하기도 한다.</dd>
           <hr />
           <dt>타코</dt>
           <dd>멕시코의 대표적인 요리의 하나</dd>
           <dd>옥수숫가루 반죽을 살짝 구워 만든 토르티야라는 빵에 야채나 고기를 싸서 먹는다.</dd>
       </dl>
    </body>
</html>

<실행화면>

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 07]HTML 이미지태그 <img> (0)	2021.10.03
[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29
[HTML 기초 02]실습환경 만들기/아톰(ATOM)에디터+추천플러그인 (0)	2021.09.28

[웹프로그래밍 기초강좌 - HTML 04]

HTML 글자관련 태그 알아보기

(HTML 텍스트테그)

① 제목 글자 태그, 본문 글자 태그

(1) 제목 태그 (h1~h6)

- HTML 제목은 h1부터 h6 태그로 정의됩니다.

- <h1>는 주요 표제 (가장중요)에 사용되야하며, 그다음에 <h2>.....<h6> 까지 순서대로 사용되어야합니다.

- 검색엔진은 제목을 사용하여 웹 페이지의 구조와 내용을 색인합니다.

* 브라우저는 제목 앞뒤에 일부공백을 자동추가 합니다.

* 제목태그는 HTML 제목에만 사용해야합니다. 텍스트를 굴게 만들거나 크게 만들기 위해 사용하면 안됩니다.

- 각 HTML 제목 태그에는 기본 크기가 있습니다. ( 추후 CSS로 변경은 가능 )

제목태그	설명
<h1>	가장 큰 글자태그
<h2>	두번째로 큰 제목 글자 태그
<h3>	세번째로 큰 제목 글자 태그
<h4>	네번째로 큰 제목 글자 태그
<h5>	다섯번째로 큰 제목 글자 태그
<h6>	여섯번째로 큰 제목 글자 태그

<코드 작성>

  <h1>h1 글자 태그입니다.</h1>
  <h2>h2 글자 태그입니다.</h2>
  <h3>h3 글자 태그입니다.</h3>
  <h4>h4 글자 태그입니다.</h4>
  <h5>h5 글자 태그입니다.</h5>
  <h6>h6 글자 태그입니다.</h6>

<실행화면>

(2) 본문 태그

본문태그	설명
<p>	- 단락을 정의하는 본분 글자 태그입니다. - p태그는 추가 공백이나 줄바꿈을 생략하여 브라우저에 출력됩니다.
<hr>	- 수평줄 태그입니다. - 콘텐츠의 주제 변경을 정의합니다.
<br>	- 단일 줄바꿈 태그입니다.
<pre>	- 미리 서식이 지정된 텍스트를 정의합니다. - 내부의 텍스트는 고정너비로 표시되며, 공백과 줄바꿈을 모두 유지하여 출력됩니다.

<예재코드>

  <p>안녕하세요 p태그입니다.
  줄바꿈을 해도 줄바꿈이 되지않습니다.</p>
  <hr />
  <p>
    안녕하세요. p태그입니다 <br />
    줄바꿈 확인하기.
  </p>
  <pre>
    안녕하세요 pre태그입니다.
    줄바꿈을 하면
    줄바꿈 한대로 출력됩니다.
  </pre>

<실행화면>

② 앵커 태그 (a)

<a href="https://molra0000.tistory.com/">모행블로그 바로가기</a>

앵커태그 <a>는 하이퍼링크를 정의합니다.
href 속성으로 이동할 페이지의 url을 지정합니다.
기본적으로 링크된 페이지는 현재 브라우저 창에서 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야합니다
target 속성 지정으로 링크된 페이지를 여는 방법을 변경할 수 있습니다.

본문태그	설명
<p>	- 단락을 정의하는 본분 글자 태그입니다. - p태그는 추가 공백이나 줄바꿈을 생략하여 브라우저에 출력됩니다.
<hr>	- 수평줄 태그입니다. - 콘텐츠의 주제 변경을 정의합니다.
<br>	- 단일 줄바꿈 태그입니다.
<pre>	- 미리 서식이 지정된 텍스트를 정의합니다. - 내부의 텍스트는 고정너비로 표시되며, 공백과 줄바꿈을 모두 유지하여 출력됩니다.

<예재코드>

<a href="https://blog.naver.com/molra0000" target="_self;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_blank;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_parent;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_top;">모행블로그 바로가기</a>

* 각 속성별로 링크된 페이지를 여는 방법이 달라지니, 직접 코드를 작성하고 실행하여 확인을 해보셔야 합니다.

③ 글자 모양 태그

태그	설명
b	굵은 글자 태그
i	기울어진 글자 태그
small	작은 글자 태그
sub	아래에 달라붙는 글자 태그
sup	위에 달라붙는 글자 태그
del	가운데 줄로 그어진 글자 태그
ins	밑줄 글자 태그

<예재코드>

<!--기본글자-->
<p>p태그 : Hello Wolrd!</p>
<!--<b>글자태그--> <hr>
<b>b태그 : Hello World!</b>
<!--<i>글자태그--> <br>
<i>i태그 : Hello World!</i>
<!--<small>글자태그--> <br>
<small>small태그 : Hello World!</small>
<!--<sub>글자태그--> <br>
<sub>sub태그 : Hello World!</sub>
<!--<sup>글자태그--> <br>
<sup>sup태그 : Hello World!</sup>
<!--<del>글자태그--> <br>
<del>del태그 : Hello World!</del>
<!--<ins>글자태그--> <br>
<ins>ins태그 : Hello World!</ins>

<실행화면>

④ 특수문자 태그

자주 사용되는 특수문자	문자표현
<	<
>	>
&	&
"	"
#	&num;
;	&semi;
^	&Hat;
'	'
띄어쓰기(space)

특수문자가 포함된경우 브라우저에서 웹소스의 일부로 인식하여 오류가 발생할 수 있기때문에 특수문자를 문자표현으로 대체하여 사용합니다.
예를 들어 <>안에 코드 형식으로 쓰고 그대로 보여주고 싶어도 코드로 인식하여 화면에 표시가 안되는 경우가 발생하기때문에 사용됩니다.
전체 특수 문자 표 보러가기 : https://dev.w3.org/html5/html-author/charref

- 사실 특수문자를 모두 외워서 사용할 필요는 없습니다.

- 이미 HTML을 실습하기위해 다운받은 ATOM에디터나 브라켓 등 에디터에서 자동으로 생성되어 선택할 수 있습니다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29
[HTML 기초 02]실습환경 만들기/아톰(ATOM)에디터+추천플러그인 (0)	2021.09.28
[HTML 기초 01]웹 프로그래밍 기초 -코딩, html이란? (0)	2021.09.28

[웹프로그래밍 기초강좌 - HTML 03]

HTML 기본 용어 , 기본구조 그리고 웹표준이란?

(HTML기초강좌 3강)

① 요소(element), 태그(tag) 란?

Start Tag	Element content	End Tag
<h1>	Hello World!	</h1>
<p>	HTML 기초강좌	</p>
<br>	none	none

- HTML 요소는 시작태그부터 종료태그까지의 모든 것입니다.

- 태그는 <> 꺽쇠 괄호로 표기합니다.

- HTML 태그는 대부분 시작태그 / 종료태그가 있지만, 일부 태그들은 빈요소로 종료태그없이 사용될 수 있습니다.

(<br>, <img> 등)

② 속성 (Attribute)

- 모든 HTML 요소는 속성을 가질 수 있습니다.

- 속성은 요소에 대한 정보를 제공합니다.

- 속성은 항상 시작태그에 지정합니다.

- 속성은 대부분 name="value" 와 같이 이름/값이 쌍으로 제공됩니다. (href="molra0000.tistory.com")

(1) href 속성

<a href="https://molra0000.tistory.com">모행블로그 바로가기</a>

- <a>태그 (앵커태그)는 하이퍼링크를 정의합니다.

- href 속성으로 이동할 페이지의 url을 지정합니다.

[실행결과]

모행블로그 바로가기

(2) src 속성

<img src="1.jpg">

- <img> 태그는 html 내에 이미지를 첨부할때 사용합니다.

- src 속성으로 이미지 경로값을 표시합니다

* 참고 : src 속성에 url 경로를 지정하는 2가지 방법

1) 절대 URL
- 각 폴더의 지정된 이름을 나열하여 지정해주어야 하는 절대경로
- 다른 웹사이트에서 호스팅되는 외부 이미지에 대한 링크
- 예) src="https://www.w3schools.com/images/1.jpg"

2) 상대 URL
- 한 계층위의 폴더를 ../로 지정하여 선택합니다.
- 웹사이트 내에서 호스팅되는 이미지에 대한 링크입니다.
- 예) src="../folder/1.jpg"

(3) width, height 속성

<img src="1.jpg" width="500" height="500">

- 폭과 높이를 지정하는 속성입니다.

(4) 대체속성 (alt)

<img src="logo.png" alt="모행블로그 로고">

- alt 속성은 img태그의 필수 속성입니다.

- 이미지를 대채할 수 있는 내용을 텍스트로 삽입합니다.

- 시각장애인에게도 해당 이미지가 무엇인지 알려줄 수 있는 설명을 작성합니다.

- 연결속도가 느리거나, src속성오류가 있을때에 스크린리더를 통해 음석으로 확인이 가능합니다.

(5) 스타일속성 (style)

<p stlye="color:red;">글씨색 빨간색으로 해주세요.</p>

- 스타일을 지정하는 속성입니다.

- 폰트색상, 크기, 폰트체등을 지정합니다.

- css를 지정하는 속성입니다.

(6) 언어속성(lang)

<!DOCTYPE html>
<html lang="en">

- 웹페이지의 언어를 지정하는데에 사용합니다.

속성값	국가
ko	한국
ja	일본
zh	중국
en	미국
ru	러시아
de	독일

(5) 제목 속성(title)

<h1 title="나는 툴팁입니다.">모행블로그 입니다.</h1>

- title속성은 요소에 대한 몇가지 추가 정보를 정의합니다.

- 제목 속성 값은 요소 위로 마우스를 가져가면 툴팁으로 표시됩니다.

③ 주석

<!-- 주석입니다. -->

- 주석은 코딩중에 작성하는 메모라고 생각하시면됩니다.

- 웹브라우저 상에서는 보이지않습니다.

- 일부소스를 임시적으로 사용하지않을때에도 주석처리를 하기도 합니다.

④ HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 페이지 제목</title>
  <link rel="stylesheet" href="css/basic.css">
  <script src="js/basic.js"></script>
  <base href="https://www.molra.com/test/" target="_blank">
</head>
<body>

</body>
</html>

<!DOCTYPE html>	Document Type Definition, DTD - DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다. - 웹 브라우저가 웹페이지를 html5 문서임을 인식하게 만들어줍니다. - html5문서는 반드시 <!DOCTYPE html>을 작성하여야합니다.
<html>	- 모든 HTML 태그는 <html>태그 내부에 작성하여야합니다. - 모든 HTML 페이지의 루트입니다.
<Head>	- head에 작성하는 코드들은 웹페이지 화면에 표시되지 않습니다. - 웹페이지의 정보 또는 css,javascript파일 등을 연결하는 데 사용합니다.
<title>	- 웹페이지의 제목 태그입니다.
<body>	- 사용자에게 실제 보이는 부분을 작성합니다.

① head 에 작성되는 코드는 웹브라우저상에 표시되지않습니다.

① head 에 작성되는 코드는 웹페이지의 정보를 표시합니다. (예를들면, 해당페이지를 검색엔지에 노출시킬지, 해당페이지의 설명, 스타일시트 연결, 스크립트 연결 등을 작성합니다.

① head [내부에 넣을 수 있는 태그 종류]

head 내부 태그	설명
meta	웹 페이지의 정보를 작성합니다.
title	웹 페이지의 제목 태그입니다.
link	웹 페이지의 다른 파일을 추가합니다.( css연결)
script	웹 페이지에 스크립트를 추가하거나 연결합니다.
style	웹 페이지에 스타일시트를 추가합니다.
base	웹 페이지의 기본 경로를 지정합니다.

② body 에 작성되는 코드는 웹페이지 상에 보여지는 내용들을 작성합니다.

⑤ 웹표준과 W3C

(1) 웹표준이란?

- 웹에서 표준적으로 사용되는 기술이나 규칙을 말합니다.

- 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할때 이용하는 HTML,CSS,JavaScript등에 대한 규정이 담겨있습니다.

- 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다.

- 표준 스펙을 잘 지키는 것 뿐만 아니라 마크업(XHTML)고 표현 및 레이아웃(CSS) 및 사용자 행위제어를 잘 분리하는 고급 홈페이지 구추방식입니다.

- 현재는 거의 사라졌지만 ActiveX, Flash, 공인인증서, 플러그인과 같은 기술은 표준이 아닙니다.

(2) 웹표준 관련 기술

(3) 웹표준 장점

- 컨텐츠의 수정, 운영관리가 편리해집니다. 표준화된 구조와 분리된 CSS를 제어하기 때문에 수정에 대한 편의성이 증대됩니다.

- 웹 접근성이 향상됩니다. 다양한 브라우저( 익스플로러, 크롬, 사파리, 파이어폭스 등) 환경에서도 표준화된 컨텐츠를 보여줄 수 있습니다.

- 검색엔진에 최적화 됩니다. 표준화된 페이지는 구조화가 잘되어 있기 때문에 검색엔진 색출에 대한 기회 요소가 많아집니다.

- 데이터베이스를 효율적으로 사용할 수 있습니다. 웹 표준은 소스를 효율적으로 사용하여 서버공간과 데이터 부화를 줄입니다.

- 다양한 장치에서의 호환이 가능합니다. 별도의 해상도에 맞는 홈페이지 제작 없이 하나의 홈페이지로 여러 형태로 변형이 가능합니다(미디어쿼리)

(4) 웹표준 관련기구

- W3C (World Wide Web Consortium) : 월드 와이드 웹 컨소시엄은 국제적인 웹 기술 표준 기구를 말하며 정보/의견교환/아이디어 창출/가이드라인/소프트웨어 /독립적 사고 그리고 도구 및 규칙 등의 표준안을 제정함으로써 웹의 잠재력을 이끌어 내는 것을 목표로 하고 있습니다.

-URL : https://www.w3.org/

World Wide Web Consortium (W3C)

Upcoming: W3C/SMPTE Workshop on Professional Media Production on the Web 23 August 2021 | Archive W3C announced today the joint W3C/SMPTE Workshop on Professional Media Production on the Web, which is being organized as a virtual event during SMPTE’s ann

www.w3.org

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 02]실습환경 만들기/아톰(ATOM)에디터+추천플러그인 (0)	2021.09.28
[HTML 기초 01]웹 프로그래밍 기초 -코딩, html이란? (0)	2021.09.28

[웹프로그래밍 기초강좌 - HTML 02]

HTML 실습환경 만들기 + 아톰에디터(추천플러그인)

(아톰에디터 설치 및 추천 플러그인)

HTML을 공부하려면 기본적으로

실습환경을 만들어 놓아야합니다.

기본적으로 운영체제에 에디터가 있어

HTML코드를 작성할 수는 있지만

좀더 편리하고 좀더 빠르게 코드를 작성하기 위해

편리한 에디터를 설치하고자합니다.

많은 사람들이 GITHUB의 아톰 또는 ADOBE의 brackets ,

Visual Studio Code 등을 사용하는데요.

우리는 아톰에디터로 실습을 하려고합니다.

원래는 실시간 미리보기의 편리함때문에

brackets를 사용하였는데,

무엇때문인지...요새 오류가 정말 많더라구요 ...

① 아톰(ATOM)에디터 설치하기

1) 아톰에디터 설치 바로가기 ☞ https://atom.io/

2) 홈페이지에 들어가면 바로 메인에 다운로드 버튼이 있습니다.

3) 다운로드 받으셔서 다른 설정도 필요없이 계속 다음다음 넘기셔서 다운받으면됩니다.

② 아톰(ATOM)에디터로 HTML실습하는 방법

설치후, 아톰을 처음 실행하면 이것저것 많이 떠있는데 다 꺼버리시면 됩니다.영어로 마구마구 떠있어서 이게뭐얏!! 하실필요없어요 . 그냥 무시하시면됩니다.

실습내용 : HTML을 실행하는 방법

(1) HTML파일 만들기
(2) HTML을 브라우저로 실행하기

1) 새 파일 만들기 (File - New File 또는 단축키 Ctrl+N)

- HTML파일을 만들기 위해 새파일을 만듭니다.

2) HTML파일로 만들기 ( File - Save 또는 단축키 Ctrl +S)

- HTML파일로 저장합니다.

- HTML을 실행하기 위해서는 확장자가 html인 파일을 만들어야합니다.

- 파일명 끝에 .html으로 끝난다고 생각하시면 됩니다.

3) 1.html파일 만들기

- 확장명을 html로 하여 html파일을 만듭니다.

- 테스트용으로 1.html을 만들었습니다.

4) 1.html을 웹 브라우저로 실행하기.

- 웹브라우저에서 1.html을 잘 불러오는지 확인하기 위해 1.html 파일에 Hello World!!를 작성하였습니다

- 아톰 본문에서 우클릭하여 Show in Explorer를 클릭하면 1.html 파일 폴더가 바로 뜹니다.

- 해당 파일을 클릭하면 웹브라우저에 HelloWorld가 쓰여있습니다.

③ 아톰(ATOM)에디터 추천 플러그인

윈도우, ios 이런 기본 운영체제에 기본 편집기(에디터)가 있는데도 왜 별도로 다운까지 받아서 써야하냐면정말 무시할 수 없는 기능들 때문이애요 ㅠ.ㅠ다양한 플러그인을 추가해서 사용할 수 있고,해당 기능들이 너무너무 완전 편리합니다.

하드코딩하라고 아무리해도 한번 사용하면 그담부터는 아톰이나 brakets같은 에디터를사용하지 않을 수가 없습니다.

수많은 플러그인들이 있지만 그중에서도 가장 필수인 플러그인 몇가지를 추천하겠습니다.

* 사실 이러한 플러그인들이 HTML 기초 강좌에서는 꼭 필요한 것은 아니니귀찮으면 패스하시면 됩니다.

<플러그인 설치방법>
File - Setting -> install -> 플러그인 검색 -> install

ATOM(아톰) 에디터 추천 플러그인 01 - EMMET

HTML이나 CSS를 쉽게 작성할 수 있도록 도와주는 플러그인 입니다.

EMMET에서 제공하는 특정 Syntax로 반복적인 코드를 아주 짧고 쉽게 작성할 수 있습니다.

웹 개발시 필수 플러그인으로 거의 모두가 사용하신다고 생각하시면됩니다.

예) div>ul>li*5>a>img 이렇게 간단하게 작성하더라도
div안에 ul안에 li가 5개 각li 안에 a태그,img태그까지 자동으로 코드를 작성해줍니다.

ATOM(아톰) 에디터 추천 플러그인 02 - atom-beautify

제가 완전 애용하는 플러그인입니다.beautify 이름 그대로 코드를 보기 좋게 예~쁘게 만들어주는 플러그인 입니다.코드의 indentation을 이쁘게 만들어줘서 보기 쉽게 만들어줍니다.코드를 작성하다 보면 코드는 접접 길어지고 복잡해집니다.들여쓰기를 제대로 하지않으면 빠르게 찾아수정하기가 힘들어집니다.중간중간 atom-beautify로 정리하면서 작성하면 코드를 예쁘게 만들어주기에 꼭 사용하는 플러그인입니다.indentation은 코딩시 굉장히 중요한 작업입니다.

ATOM(아톰) 에디터 추천 플러그인 03 - autocomplete-html

HTML을 공부하면서 도움을 줄 수 있는 플러그인 입니다.

HTML태그를 자동완성시켜주는 플러그인입니다.

EMMET을 사용하면 되긴하지만, 가볍게 사용하기 좋습니다.

CSS,SQL등 AUTOCOMPLETE시리즈가 있습니다.

ATOM(아톰) 에디터 추천 플러그인 04 - color-picker

코드를 작성하는 도중에 포토샵 스포이트 처럼 색상을 찝어서 선택할 수 있습니다.색상을 보이는대로 선택하면 코드를 자동으로 작성해줍니다.CSS에 도움이 되는 플러그인으로 많이 사용됩니다.

ATOM(아톰) 에디터 추천 플러그인 05- minimap

반응형작업(미디어쿼리)할때 유용하게 쓰이는 플러그인입니다.말그대로 화면상의 긴 코드를 미니맵으로 보여주기때문에어느정도 위치에 있는지 확인할 수 있습니다.

ATOM(아톰) 에디터 추천 플러그인 06 - atom-live-server

Brakets에디터에서 실시간 미리보기 대신에 사용하는 플러그인입니다.브라켓에서는 정말 말그대로 실시간 미리보기이지만atom에디터의 atom-live-server은 완전 실시간은아닙니다.코드를 저장하고 확인하면 웹브라우저에서 확인이 가능합니다.atom-live-server 설치후 단축키는 Ctrl + Alt + 3입니다.저는 실시간 미리보기를 브라켓에서 너무 잘사용해왔기 때문에,이 플러그인은 필수로 설치합니다.

HTML을 본격적으로 공부하기전에,

직접 코드를 작성하고 실습해보기위해

깃허브에서 제공하는 ATOM( 아톰) 에디터를 설치하고

사용하는 방법 및 추천 플러그인에 대해 공부해봤습니다.

순서대로 설치후에 직접 실습하시면서 공부해보시면 될 것같습니다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29
[HTML 기초 01]웹 프로그래밍 기초 -코딩, html이란? (0)	2021.09.28

[웹프로그래밍 기초강좌 - HTML 01]

코딩 그리고 HTML이란?

HTML (Hypertext Markup Language)

코딩교육이 필수가 된지 벌써 몇년이나 지났네요

우리나라에서는 2018년부터

전국 초중고교에서

소프트웨어교육(코딩교육)이

의무화되었습니다.

그렇다면 코딩은 도대체 뭔가요?

① 코딩이란?

프로그래밍과 같은 뜻으로 쓰이고 있습니다.

구체적으로, 코딩은 C언어,자바,파이썬,html,css등 프로그래밍 언어를 입력하는 과정이고,

프로그래밍은 프로그래밍언어를 통해 프로그램을 만드는 일을 뜻합니다.

코딩이 중요한 이유는 인공지능, 사물인터넷, 지능형 로봇, 빅 데이터 분석 및 활용 등 4차 산업혁명시대를

대변하는 모든 것이 ICT(정보통신기술)을 바탕으로 한 소프트웨어를 통해 구현되기 때문입니다.

② HTML이란?

웹 문서를 만들기 위해서 사용하는

가장 기본적인 언어입니다.

하이퍼텍스트를 작성하기 위해 개발된 언어로

① HTML은 모든 프로그래밍 언어중 가장 쉽다고 장담할 수 있습니다.

③ HTML은 가장 접하기 쉬운 프로그래밍 언어로 전문 개발자가 아니어도 배워두면 유용합니다.

웹 프로그래밍의 가장 기본이라고 말할 수 있는 HTML !!

정말 모든 프로그래밍 언어들중 가장 쉽다고 장담할 수 있습니다.

하나씩 하나씩 따라해보면 누구나 쉽게 익힐 수 있다고 생각합니다.

굉장히 직관적인 언어로 따로 이해가 필요한 언어가 아니라

하나씩 실습하면서 익히면 금방 배울 수 있는 언어입니다.

첫 코딩 공부의 언어로 가장 추천드리는 HTML!!

웹프로그래밍 세계에 오신것을 환영합니다 !!

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML 기초 06]HTML 테이블태그 (table) (0)	2021.10.01
[HTML 기초 05]HTML 목록태그 (ul,ol,dl) (0)	2021.09.30
[HTML 기초 04]HTML 글자태그(텍스트 태그) (0)	2021.09.29
[HTML 기초 03]HTML 기본용어, 기본구조, 웹표준이란? (0)	2021.09.29
[HTML 기초 02]실습환경 만들기/아톰(ATOM)에디터+추천플러그인 (0)	2021.09.28