- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
HTML [HTML] HTML로 간단한 웹페이지 만들기
2021.02.13 22:47
[HTML] HTML로 간단한 웹페이지 만들기
HTML을 몰라도 웹페이지를 만들 수 있긴 하지만 웹페이지 에디터를 사용하다 보면 언젠가는 HTML을 피할 수 없는 시점이 오게 된다. 웹페이지를 수정하려면 HTML을 알아야 한다는 점은 기본 옵션이다. 다행인 점은 인터넷을 찾아보면 HTML을 쉽게 배울 수 있는 사이트가 다양하게 있다는 것이다. 이 글에서는 기본적으로 HTML이 무엇인가를 소개하고 어떻게 무에서 HTML의 기본을 사용하여 유(웹페이지)를 창조해낼 수 있는지를 배울 수 있다.
방법1
HTML 사용해보기
-
1HTML이 무엇인지 알기. HTML은 하이퍼텍스트 마크업 언어(Hyper Text Markup Language)의 줄임말로 웹페이지를 구성하는 코드의 언어라 할 수 있다. 즉, 우리가 보는 모든 웹페이지의 골격을 형성하는 것이다. 그렇다면 화면을 구성하는 HTML은 어떻게 생겼을까? 간단하게 인터넷 익스플로러 창을 하나 켜서 오른쪽 마우스 클릭을 한 뒤 "소스 보기"를 클릭해보도록 하자. 화면 아래쪽에 코드로 된 창이 뜰 것이다. 그 빽빽하게 들어선 코드를 브라우저가 사람이 보기 편하게 해석해 우리가 평소 보는 웹페이지로 만들어주는 것이다.
-
2첫 화면은 최대한 간단하게 만들기. 첫 화면부터 복잡하게 만들면 각종 문법과 규칙, 스크립트 언어에 부담을 느껴 포기하고 싶어질 수 있다.- 웹페이트를 구성하는 정보는 HTML 태그 사이에 쓰는 것임을 꼭 기억하도록 하자. 그러려면 먼저 태그를 열고 닫아야 하는데 여는 태그는 <___>이렇게 생겼고 닫는 태그는 </___>와 같이 생겼다. 태그 내부의 ___ 는 나중에 코드로 대체하면 된다.
-
3시작을 누르고 "windows 보조프로그램"을 클릭한 뒤 "메모장" 클릭하기. 노트패드++(Notepad++)라는 텍스트 에디터를 사용하면 HTML 코드를 짜는 것이 더 쉬워진다. 이 에디터에서 HTML 언어를 사용하겠다고 설정하면 이후 에디터의 텍스트 창에 쓰는 모든 것들이 다양한 색으로 칠해져 눈으로 확인하기가 쉬워지고 실수를 만들 확률도 줄어든다. 실수를 해도 바로 고치기가 쉽다는 점도 있다.
-
4브라우저에게 어떤 언어를 사용하는지 알려주기. 첫 번째 줄에 <!DOCTYPE>이라고 쓰도록 하자. 웹페이지를 만들 때는 항상 이 태그를 가장 먼저 써야 한다. 그리고 둘째 줄에 <html>을 쓰면 된다. 이 태그는 컴퓨터한테 여기서부터 웹페이지를 시작할 것이라고 말해준다. 이 태그는 아래쪽에서 닫아줘야 한다. </html>이라고 쓰면 된다. 여기서 웹페이지가 끝나게 된다. -
5다음처럼 페이지의 머리 부분 쓰기. -
6페이지의 제목 정하기. 제목은 사용자에게 이 페이지가 무엇을 위한 장소인지 알려주는 매우 중요한 정보이다. 또한 사용자가 당신이 만든 사이트를 즐겨찾기에 넣게 되면 당신이 정한 제목으로 저장되게 된다. 이 제목은 HTML 코드에서는 <title> 태그 안에 들어간다. 앞서 배운 것처럼 태그를 열고 정보를 기입한 뒤에는 </title>로 닫아주도록 하자. 웹페이지를 열면 탭에 당신이 정한 제목이 나올 것이다. 물론 이 제목이 웹사이트의 제목은 아니니 걱정하지 말자.
-
7페이지의 몸통 부분 작업하기. 페이지의 몸통 부분을 쓰기 위해서는 태그 <body>를 열어줘야 한다. 내용을 쓴 뒤에는 </body>를 써서 닫아주는 것을 잊지 말자. 당신이 웹페이지에 보이게 하고 싶은 정보는 <body>와 </body>사이에 전부 들어간다.- 웹페이지에 배경색을 칠하고 싶다면 몸통 부분에 스타일을 추가하면 된다. 일단 <body style="background-color:silver">를 써보도록 하자. 여기서 색깔 부분은 임의로 은색으로 정해놨으며 다른 원하는 색을 넣어도 좋고 16진수를 넣어도 좋다. 태그 내부의 큰따옴표 사이에 들어가는 것을 속성이라고 한다. 이 속성을 정의하려면 항상 큰따옴표를 사용해야 한다.
-
8body 태그 안에 글 써보기.- 글이 한 줄 아래에 표시되게 하고 싶으면 키보드의 엔터 키를 치는 대신
태그를 쓰도록 하자. - 이동하는 글자를 화면에 표시하고 싶다면 마큐(marquee)를 사용하면 된다. <marquee>쓰고 싶은 내용을 여기 치도록 한다</marquee>를 써보자.
- 글이 한 줄 아래에 표시되게 하고 싶으면 키보드의 엔터 키를 치는 대신
-
9사진 추가하기. 인터넷에서 마음에 드는 사진을 찾아 자기 웹페이지에 넣고 싶다면 다음 태그를 써야 한다. <img src="URL"> 이 태그는 특이하게 닫는 태그를 쓰지 않아도 문제가 없다(닫는 것이 바람직하다). -
10모든 태그가 열린 뒤 제대로 닫혔는지 확인하기. 웹페이지가 아마 다음과 같은 식으로 쓰여져 있을 것이다:
<title>내 웹페이지</title>
<body bgcolor="yellow">
위키하우 너무 사랑해
<marquee>넌 세계 최고의 사이트야!</marquee>
<img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>
-
11작업한 내용을 저장하기. 저장을 누른 뒤 파일 이름을 .html 확장자로(파일.html과 같이) 저장하도록 한다. 파일 형식은 모든 파일도 괜찮고 텍스트 형식도 괜찮다. 파일 이름 뒤의 확장자만 잘 잡아주면 문제가 없을 것이다. 이제 저장한 장소로 가서 html 파일을 더블 클릭 해보자. 당신이 완성한 웹페이지가 새 창에 뜰 것이다.
팁
- 더 고급스러운 웹사이트를 만들고 싶다면 마이크로소프트 익스프레션 웹과 같은 웹에디터를 사용해보자.
- 어도비 드림위버를 사용해도 좋다. 아마 큰 도움이 될 것이다. 그리고 문제가 있으면 어떤 문제를 어떻게 고쳐야 하는지도 알려준다.
- 인터넷에서 웹사이트를 만드는 방법을 쉽게 찾을 수 있다. HTML 코딩 방법을 찾아서 배워보도록 하자.
- 이 글에서는 간단한 웹페이지를 만드는 법에 대해 소개하고 있다. 관련 위키하우 글을 찾아보면 자기만의 웹페이지를 호스팅하는 법까지도 배울 수 있다.
- 다음은 잘못된 태그 사용의 예이다. <태그1><태그2> 내용 </태그1></태그2>
- 실수가 없도록 모든 코드를 잘 살피고 정리해놓으면 나중에 쉽게 수정할 수 있다.
- 많은 사람들이 다양한 아이디어로 살아있는 디자인의 웹페이지를 만든다. 자기만의 기술을 갈고 닦으면 당신도 그런 디자이너가 될 수 있다.
- 닫는 태그를 아무 곳에서 쓸 수는 없다. 처음 연 태그는 가장 마지막에서 태그를 닫아야 한다. 다음 올바른 예시를 보자: <태그1><태그2> 내용 </태그2></태그1>
- 간단한 웹페이지를 수 분 내에 만드는 모습으로 친구를 놀라게 만들 수도 있다. 어쩌면 친구에게 간단한 웹페이지를 만들어 선물로 줄 수도 있을 것이다. 아마 친구가 당신의 지식에 놀라며 칭찬을 아끼지 않을 것이다.
- 웹페이지가 작동하지 않는다면 위의 예시 HTML 코드를 복사해 붙여넣고 실행해보자. 그리고 그 코드를 바꿔가며 웹페이지를 꾸며보자.
[출처] https://ko.wikihow.com/HTML%EB%A1%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
