'웹프로그래밍입문' 태그의 글 목록

[웹프로그래밍 기초강좌 - 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 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 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

모행