LogicalMaster
HTML 강좌 - Part 3 (문구, 이미지, 버튼 삽입) 본문
지난 Part 1, 2 동안 글을 써왔으나
초보자분들이 알아듣지 못하게 써서, Part 3 부터 재 작성을 시작합니다.
이번 강좌에서는 기본적은 문구 삽입, 이미지와 버튼을 삽입해보도록 하겠습니다.
먼저 Html 이란 Hyper Text Markup Language 의 약자이며
홈페이지를 만드는데 있어서 기본적인 프로그램 언어라고 생각하시면 됩니다.
먼저 HTML 구조는 <으로 시작하여 > 으로 끝나는것을 태그라 칭합니다.
예를들면, <html> 와 같습니다.
먼저 HTML 로 기초적인 문법을 사용하여 페이지를 한번 제작 해 보도록 하겠습니다.
- 소스코드
<!doctype html>
문서 타입을 지정하는 태그입니다.
<html lang="ko">
html 기본 태그입니다. HTML 시작할때 처음으로 삽입하는 태그 입니다.
<head>
head 태그는, 스크립트 혹은 CSS 스타일시트를 지정하거나
기타 웹 문서들의 설정값을 지정하는 곳입니다.
<body>
body 태그안에는 페이지의 내용이 들어가는 곳입니다.
정리 해 보자면,
이와 같이 된다.
- 결과화면
결과가 잘 나왔다.
이제부터 본격적으로 HTML 를 사용 해 봅시다.
이미지, 버튼, 자바스크립트를 사용한 알림창도 만들어 보도록 합시다.
- 소스코드
<button> 은 버튼을 뜻하며, 안의 onclick 속성은 대부분 자바스크립트 문법이 들어갑니다.
<button>버튼1</button>
을 사용하여 버튼을 지정할 수 있습니다.
- 결과화면
이미지와 함께 버튼이 지정되었음을 볼 수 있습니다.
버튼을 클릭하면
이처럼 onclick 속성 안에 선언했던 함수가 실행되어
위와같이 알림창이 뜨는 것을 볼 수 있습니다.
이번 강좌는 여기까지 입니다.
읽어주셔서 감사합니다.
'IT > 개발일기' 카테고리의 다른 글
| 시험삼아 커뮤니티 사이트를 제작해 보았다 (0) | 2020.09.04 |
|---|---|
| 초간단) jQuery (제이쿼리) 로 시계를 만들어보자 (0) | 2020.08.30 |
| HTML "반응형" 레이아웃 만들기 - Part 2 (0) | 2020.08.27 |
| CSS 에 대해 알아보자 (0) | 2020.08.26 |
| HTML 레이아웃 만들기 - Part 1 (0) | 2020.08.26 |
