반응형

HTML이란?(HyperText Markup Language)

HTML이란 웹사이트를 만드는 가장 기초가 되는 마크업 언어입니다. 웹페이지의 내용과 구조를 담당하는 언어로써 브라우저에게 정보를 어떤 형식으로 보여 주어야 하는지를 전달해주는 역할을 합니다.

MarkUp 언어란?

특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어를 말합니다. (프로그래밍 언어 X) HTML의 구조

HTML의 구조

  • 브라우저에게 HTML Code가 해당 태그 내부에 존재한다고 알려줍니다.
  • 주로 외부 소스를 참조해야 할 때 사용합니다.
  • 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다.

HTML의 문법

  • HTML 요소는 시작 태그와 종료 태그, 그리고 그 사이에 있는 콘텐츠로 구성되어 있습니다.
  • <Start tag> Content </End tag>
  • 시작 태그(Start tag) : 어떤 태그를 사용하는지 명시해 줍니다.
  • 콘텐츠(Contents) : 해당 태그가 적용되기를 바라는 텍스트 문구가 적어집니다.
  • 종료 태그(End tag) : 해당 태그가 적용되는 끝 지점을 명시해 줍니다.

HTML의 태그

  • <!DOCTYPE html> : 문서 형식 정의 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달해줍니다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않습니다.
  • <html> : 전체 HTML 문서를 감싸는 태그, 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. 하나만 존재해야 하고 HTML 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 됩니다.
  • <head> : HTML 문서에 대한 정보를 나타내는 부분이며, 주로 외부 소스를 참조해야 할 경우 사용합니다. 하나만 존재해야 되고, HTML 바로 아래에 있어야 합니다.
  • <body> : HTML 문서에서 실제적으로 보여지는 부분이며, 하나만 존재해야 하며, html 바로 아래, head 다음에 위치해야 합니다.
반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML] html에서 주석 처리하는 방법  (0) 2020.04.17
[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
반응형

HTML에서 코딩을 하다 보면 쭈욱~! 길게 늘어지는데, 코딩을 하다가 여기에 왜 이게 있지!? 싶을 때가 있습니다! 그러한 상황을 만들지 않기 위해서 주석 처리가 필요한 HTML에서 주석 처리하는 방법에 대해서 알아보았습니다!

주석 처리란

주석은 코멘트를 남긴다, 즉 자신의 코드에 대해 설명해주는 것입니다. 주석 처리를 하면 컴파일러가 무시하여, 컴파일에 반영하지 않는 것을 말합니다. 쉽게 말해서 html을 코딩하는데 코딩되지 않으면서 내용을 입력할 수 있는 글을 말합니다.

주석 처리하는 방법은 <!--            --> 사이에 필요한 내용을 작성하면 됩니다.

협업하는 일에서, 나만 알아볼 수 있다고 하여 작업만 열심히 하다 보면 다른 사람들에게 다시 설명해야 하는 나쁜 일이 생길 수 있으니 주석문을 꼭 남기면서 습관화하면 좋습니다!

반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

HTML이란? HTML의 의미는?  (0) 2021.03.21
[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
반응형

HTML을 통하여 내가 잘 화면 구현한 *. html 파일을 다시 소스코드를 보고 싶은데, 어떻게 하는지 방법을 모르는 경우 어떻게 해야 할지 알아봤습니다. 저는 처음에 note++ 프로그램으로 html 파일을 잘 만들었는데, 다음날 다시 열어보려고 하는데 왜 explorer로만 들어가는지.. 답답했네요ㅠㅎㅎ 여하튼 알고 보면 정말 아무것도 아니게 쉽습니다!ㅋ 알면 정말 쉽고 모르면 정말 정말 어려운 컴퓨터 세계....ㅠㅋㅋ

HTML 파일 열기 쉬운 방법

  1. 우선 어디에 열고자 하는지 찾아줍니다. (ex 메모장, note++, eclipse 등등)

  2. 좌측 상단에 위치한 '파일' → '열기'를 눌러줍니다. (단축키 : Ctrl + o)

  3. 그리고 열고자 하는 *.html 문서를 열어 줍니다.

HTML 파일 열기 다른 방법

*. html 문서를 여는 다른 방법으로 이전 방법과 같이 간단합니다.

  1. 이번에는 열고자 하는 파일을 찾아갑니다.

  2. 파일을 마우스 오른쪽을 클릭 → 연결 프로그램 → 메모장 (사용하는 프로그램을 선택)

크롬이나 explorer에서도 열어줄 수 있습니다.

정말 간단하지만 모르면 답답한 컴퓨터 세상..

하지만 또 조금씩 알아갈수록 더 어려워져서 답답하기도 하네요ㅠㅎ 

반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

HTML이란? HTML의 의미는?  (0) 2021.03.21
[HTML] html에서 주석 처리하는 방법  (0) 2020.04.17
[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
반응형

HTML 코딩을 할 때 어떠한 글을 누르거나 이미지를 클릭하면 다른 화면으로 넘어가는 게 일상에서 너무 많이 사용해서 그런가 그런가 보다! 했는데, 배우고 나니 신기했습니다!ㅋ 글을 누르면 내가 만든 혹은 누군가가 만든 다른 영역으로 넘어간다는 게... 생각해보면 신기해요!! (강요! 강요!ㅋ)

그런데 신기한 만큼 어렵지는 않습니다!ㅋ 비전공자도 누구나 따라 할 수 있을 만큼 쉽습니다!ㅎ

 

HTML 이미지 링크 삽입하는 방법

우선 HTML 이미지 링크를 걸기 위해서 2가지 태그가 필요합니다.

  1. <a href></a> = 해당 주소로 이동할 수 있도록 만들어주는 태그

  2. <img> = 이미지를 넣을 수 있도록 만드는 태그

형식은

<a href="이동할 주소"><img src="이미지 주소"></a> 이렇습니다.

"이동할 주소"에 누르면 이동 '될' 주소를 넣어주고, "이미지 주소"에는 '넣고 싶은' 이미지를 넣어주면 됩니다.

이미지를  넣는 방법

https://skyblue606.tistory.com/14

 

[HTML]이미지 넣는 방법&이미지 크기 변경

오늘은 html에서 이미지를 넣는 방법을 배웠습니다! 글로만 채워지던 화면에 이미지가 들어가네요! 태그만으로 이미지가 나온다는게 정말 신기하네요..ㅎ 이미지 태그는

, image의 줄임말이라고 합니다..

skyblue606.tistory.com

HTML 이미지 링크를 위해 알아야 할 태그

  • href : 연결하고자 하는 url 주소

  • Target : _blank, _self, _parent, _top

Target은 이동할 창을 어떤 방법으로 열어 줄 것인가 하는 태그입니다. 

인터넷을 사용하다가 검색을 할 때, 새창으로 열리지 않는 것은 애초에 속성 태그가 블랭크로 적용되지 않았기 때문입니다. 기본 폴트는 _self로 되어 있습니다.

그 외의 태그들로

  • _blank : 웹 브라우저에서 새창으로 열기

  • _self : 기본 속성으로 현재 있는 창에서 연결

  • _parent : 현재 창보다 상위 창에서 연결

  • _top : 웹 브라우저 창에서 전체 창으로 연결

그 외 태그의 정의

  • src : 이미지의 웹상 url

  • alt : 이미지를 오버 시, 이미지가 안 보일 때 설명 대체하는 글

  • height : 이미지의 높이 값 (세로)

  • width : 이미지의 너비 값 (가로)

  • align : 이미지 정렬 (left, center, right)

  • border : 이미지 테두리

이미지를 삽입하는 방법과 그 이미지 or 글을 누르면 url을 타고 이동하는 방법에 대해서 적어봤습니다. 어렵지 않고 재미있는데, 막상 혼자서 하려면 마음같이 안 되는 신기한 현상이네요..ㅎ

 

반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML] html에서 주석 처리하는 방법  (0) 2020.04.17
[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
반응형


공백은 스페이스바나 엔터키, 탭키로 공백을 만들 수 있지만, 코딩을 할 때는 이러한 키들로 공백을 추가하지 못합니다. 그러면 HTML에서는 어떠한 방법으로 공백을 만들 수 있는지 알아봤습니다. 




공백 한칸 띄우기


Html에서는 스페이스 바로 띄워쓰기를 많이 하여도 공백은 한칸만 표시가 됩니다. 강제로 공백을 띄우려면 &nbsp; 나 &#160;을 넣어서 띄워써야 합니다. (마무리는 ;(세미콜론)을 넣어주어야 합니다.)




다양한 크기의 공백 삽입하는 방법


브라우저가 공백을 표시하게 하는 다른 방법입니다.

  • &ensp; : 인쇄기의 "N" 블록 이름을 따왔으며 공백 두 칸 만큼의 자리를 차지합니다.
  • &emsp; : 공백 네 칸의 공간을 차지합니다.




줄 바꾸기


한 문장을 마치고, 다음 줄로 넘기는 방법

  • <br>태그를 이용하여, 문장 끝에 넣으면 <br>태그를 넣어줍니다.
  • <p></p>태그를 이용하여 한 문장이 끝나면 다음 줄에 새로운 <p>태그를 넣어줍니다. 


<br>태그를 이용하여 한줄을 바꿔주는 태그를 이용하는 한줄을 변경하는 방법과, 그리고 한문장을 <p></p>태그를 사용하여 한줄을 만들고, 다음줄은 새로운 <p></p>태그를 만들어 주는 방법입니다. 



반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML] html 파일 열기 간단한 방법  (0) 2020.04.14
[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초]header 태그와 font 태그  (0) 2020.04.05
반응형

오늘은 html에서 이미지를 넣는 방법을 배웠습니다! 

글로만 채워지던 화면에 이미지가 들어가네요! 태그만으로 이미지가 나온다는게 정말 신기하네요..ㅎ 

이미지 태그는 <img></img>, image의 줄임말이라고 합니다!

우선 이미지를 삽입하는 방법을 알기 전에

이미지가 불러 올수 있게 되었는데, 다른 사람들은 안보인다는 경우가 생길 수 있습니다. 왜냐하면 절대경로와 상대경로 두가지의 경로가 있는데,


절대경로란?

내컴퓨터에 저장되어 있는 파일들로, 파일의 마우스 오른쪽 버튼을 누르면 속성에서 확인할 수 있습니다.

절대 경로를 사용하면 내 컴퓨터 안에 있는 이미지이기 때문에, 상대방이 웹상에서 이미지가 뜨지 않습니다. (웹 페이지 제작은 절대경로를 사용하지 않습니다.)


상대경로란?

상대경로는 서버 주소가 달라지더라도 이전 서버에서의 디렉토리 구조만 같다면 경로를 수정하지 않아도 되는 경로입니다. 현재 문서를 기준으로 경로를 연결하고 있어서, 루트 디렉토리를 사용하지 않기 때문입니다.


이미지 삽입하기


사진은 무료 이미지로 상업적으로 사용이 가능한 이미지들이 모여있는 사이트를 사용하였습니다.

https://pixabay.com/


  • 우선 사용하고 싶은 이미지를 찾습니다.

저는 pixabay에서 이쁜 고양이 이미지를 가져왔습니다!


  • 마우스 오른쪽 키를 클릭하여 '이미지 주소 복사'를 해줍니다!
  • 주소를 복사하였으면, html을 이용할 수 있는 메모장을 열어줍니다!

<img src="https://cdn.pixabay.com/photo/2020/03/28/15/20/cat-4977436__340.jpg">


파란색의 공간에, 넣고자 하는 이미지의 주소를 복사하여 넣으면 됩니다

  • <img src="">태그로 ""의 사이에 가져올 이미지의 주소를 붙여넣어 줍니다!
  • 마지막으로.. 사실 처음에 저장부터 하면 좋지만, 파일의 이름을 .html로 저장을 해줍니다. ex)고양이.html

이미지를 불러올 때 사이즈를 정할 수도 있습니다.

가로(width), 세로(height), 픽셀(pixel)로 정해주면 됩니다.

<img width="가로픽셀" height="세로픽셀" src="이미지 주소">

가로와 세로 모두를 변경할 수 있지만, 비율이 달라지면서 이상해지기 때문에, 보통은 둘중 하나만 변경합니다.



반응형
저작자표시

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]이미지에 링크 걸기 & 이미지 삽입  (0) 2020.04.13
[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초]header 태그와 font 태그  (0) 2020.04.05
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
반응형

html에서 표를 만들어야 할 일이 있을 때 사용하는 태그는 <table> 태그입니다. 블로그도 그렇고 워드프로세서, 엑셀 등 다른 프로그램에서도 표를 만들어야 할 일들이 많은데, 이런 프로그램들로 만들 때는 마우스 한 번만 클릭하면 되는데, html로 만들려고 하니, 어렵지는 않은데 손이 많이 가는 것은 사실이네요ㅠㅎ 그래도 html을 이용하면 보여지는 기능이 아닌 많은 기능들을 사용할 수 있다는 장점이 있다고 생각이 됩니다. <table> 태그를 이용하여 다양하게 응용하여 색다른 표를 만들 수 있을 것 같습니다!

표 만들기

  태그 내용
  <table> 표를 만드는 태그
<th> 표의 제목 부분을 만드는 태그
<tr> 표의 행(가로)을 만드는 태그
<td> 표의 열(세로)을 만드는 태그

테이블을 만드는 순서

  • <table></table> 태그를 만들어 줍니다. (테이블 시작 태그를 했다면, 반듯이 끝나는 </> 태그도 해줍니다.)

  • <th></th> 태그를 만들어 제목 부분의 태그를 만듭니다. (기본값으로 '진하게'와 '가운데 정렬'이 됩니다.)

  • 행을 만드는 <tr> 태그입니다.

  • 그 밑으로 <td> 태그를 이용하여 열을 만들어 줍니다.

table.html

<table> 태그 안으로 제목 줄을 넣는 <th> 태그, 그리고 그 밑으로 <tr> 태그로 한 줄 바꾸고, <td> 태그를 넣어 한 칸을 삽입합니다.

* <table> 태그에 선을 넣기 위해서 <table border="1">을 넣어줍니다. "1"은 선 굵기로 숫자가 커지면 선의 두께가 굵어집니다!

table.html의 결과

표의 디자인 변경

  속성 내용
  border 표의 테두리 넣기
bordercolor 표의 테두리 색상
width 표의 가로 크기
height 표의 세로 크기
align 정렬 (right, left, center)
bgcolor 표의 배경색
colspan 가로 합병 
rowspan 세로 합병

  • table에 테두리 선을 설정해 주는 속성입니다. {border:1px;} 하면 테이블의 선이 1로 나타납니다. 픽셀이 커질수록 선이 두꺼워집니다.

  •  bordercolor는 테두리의 색상을 지정! {bordercolor:red}로 하면 테이블의 선색이 빨간색이 됩니다.

  • width값은 테이블의 가로 크기를 지정해줍니다.

  • height값은 테이블의 세로 크기를 지정해줍니다.

  • align은 테이블 안에 들어가는 값들을 좌, 우, 가운데로 정렬시켜줍니다. ex) {text-align:center;}

  • bgcolor는 태그의 배경색을 변경시켜 줍니다.

  • colspan은 셀의 가로를 합병시켜 줍니다.

  • rowspan은 셀의 세로를 합병시켜 줍니다.

표 디자인 변경.html

표를 꾸밀 수 있는 디자인을 만들어 봤습니다. 프로그램을 이용하면 마우스 한 번이면 가능했던 일들이 이런 노가다로 만들어지네요...ㅎ

반응형

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]header 태그와 font 태그  (0) 2020.04.05
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
[html기초]HTML 문서 기본 틀  (0) 2020.03.30
반응형

html에서 <header> 태그는 본문에서 사용하는 태그입니다.

<header>라고 하여서 <head>태그에 들어가는 것이 아니고 본문인 <body> 태그에 들어간다고 합니다!

<header> 태그

  • <h숫자> 본문 내용 </h숫자>

  • <h1>~<h6>까지 사이즈가 있습니다.

  • 본문 내용에 들어가는 글자는 진하게 표시됩니다.

  • 줄 바꿈 기능이 있습니다.

header태그.html

사이즈를 조정하여 가장 큰 제목은 <h1> 태그 그 밑의 제목은 <h2> 태그 등으로 조정하여 사용합니다.

본문 내용은 <p></p> 태그를 사용하여 입력합니다.

header.html의 결과는 이렇습니다.

작은 숫자일수록 폰트의 크기는 커지고 '자동 줄 바꿈' 그리고 '진하게'가 자동으로 입력되어 있습니다.

Font 태그

font 태그는 사이즈를 지정했지만, 조금 더 키우거나 줄이는 경우 그리고 글자색, , 글자체 등을 조정하는 태그입니다.

ex) <font size="1"></font>

  • color: 글자의 색

  • size: 글자의 크기

  • face: 글자체

Font태그.html

글자의 font 크기, 글자체, 글자의 색을 변경할 때  이용합니다.

위에서 <h> 태그와 달리 숫자가 작으면 글자의 크기도 작습니다. 

*<br> 태그는 줄 바꿈 태그입니다.

font태그 결과입니다. 글자의 크기가 size에 따라 달라지고, 글자의 색이 color에 따라 달라지고, 글자체가 face에 따라서 달라집니다! 

반응형

'컴퓨터 언어 기초 > HTML' 카테고리의 다른 글

[HTML]띄어쓰기, 줄 변경하는 방법  (1) 2020.04.10
[HTML]이미지 넣는 방법&이미지 크기 변경  (0) 2020.04.08
[html기초]테이블(table) 태그로 표 만들기!  (0) 2020.04.06
[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그  (0) 2020.04.01
[html기초]HTML 문서 기본 틀  (0) 2020.03.30

+ Recent posts

티스토리툴바