안녕하세요? 애드소프트입니다.
오늘은 간단한 HTML을 다뤄 볼까 합니다.
오늘다룰 내용은 웹을 개발해 보고 싶지만 기회가 되지 않고 단기간 HTML문법에 대해 알고 싶은 분들을 위한 글이니 중급, 고급 분들께서는 뒤로가기 버튼을 누르시길 권장드립니다.
HTML로 적성된 문서는 htm또는 html이라는 확장자를 가집니다.
전문툴을 사용해도 좋고 단순히 메모장을 이용하여도 문법만 맞춘다면 웹서버가 없어도 웹 브라우저로 소스코드가 작성된 파일을 더블클릭 하는 것 만으로도 직접 실행가능합니다.
▶ HTML의 기본문법
<!DOCTYPE html>
<html>
<head>
<title>기본 HTML 문법입니다.</title>
</head>
<body>
Hello, World!!
</body>
</html>카카오톡과 구글과 같이 많은 기능과 디자인을 담은 웹페이지의 경우 아주 많은 태그 그리고 개발언어를 포함하고 있습니다. 하지만 기본은 HTML의 기본문법을 지키고 있는것을 확인할 수 있습니다.
위의 내용을 보면 감이 잡히시겠지만 모든 웹페이지는 HTML의 표준규격을 준수하고 있습니다.
웹서버를 생성하기 위해서는 많은 지식이 필요하겠지만 이번 블로그에서는 단순한 HTML의 정보만 공유할 것입니다.
따라서 간단한 주제의 내용만으로 HTML를 다룰 수 있도록 하겠습니다.
메모장으로 똑같이 코딩한다음 실행 결과 입니다.
코드를 리뷰해 드리자면 기본적으로 사용하는 태그는 규격일뿐 화면에 따로 표시되지 않습니다.
<!DOCTYPE html>, <html><head><body>가 이에 포함됩니다. 그 외에도 <meta><link><script>와 같이 기능을 위한 태그도 존재합니다.
간단히 설명하자면 <!DOCTYPE html>선언은 HTML 태그는 아니지만, 선언된 페이지의 버전을 나타내는 중요한 선언문입니다. 현재 사용하고 있는 HTML버전은 HTML5입니다. HTML도 제가 처음배울때랑 바뀐부분들이 많습니다.
예전에 !doctype을 선언하기위해서는 좀더 많은 타이핑이 필요했습니다. SGML, DTD등의 개념을 알아야 하기 때문에 복잡한 설명은 생략하도록 하겠습니다. 간단히 HTML의 시작이라고 이해하면될 것 같습니다.
<html> html 태그는 모든 웹사이트에서 한번만 선언되는 웹 코딩의 처음과 끝을 알리는 기능으로 생각하면 됩니다.
<html>사이의 <head>태그 또한 html 태그사이에서 한번만 선언되는 html의 중요 정보나 중요기능을 링크를 포함하는 태그라고 보시면 됩니다. 예로 들자면 웹사이트의 제목이라든지 사용하는 스타일, 문자셋, 기타 웹사이트 한번 정의할만한 것들을 모아놓은 태그라고 생각하시면 이해하기 빠를 것입니다.
<body> 태그는 본문을 의미합니다. 페이지마다 변경되는 부분을 이곳에 코딩하여 페이지 마다 다른 페이지를 만든다고 생각하시면 되겠습니다. 하지만 저희같은 경우에는 HTML파일을 생성하기 때문에 모든 웹페이지 마다 html구문의 맞추어 코딩하여야 합니다.
레이아웃을 설정하면 <html><head>및 배너 등의 모든페이지에 표시되는 정보를 설정하여 본문을 분리하여 개발 할 수 있습니다. 중복된 정보를 지속적으로 코딩하지 않아도 되기때문에 개발 및 성능, 유지보유에 유리합니다. 레이아웃 설정은 다음에 다루도록 노력해 보겠습니다.
▶ HTML의 태그(Tag)
HTML은 tag를 이용하여 개발하는 언어 입니다. 기본적으로 태그라고하는 것은 다음과 같이 표기합니다.
...
<body>
<!-- p tag : 단락 태그라고도 하며, 내용이 바뀌어 단락을 을 바꾸어 줄때 쓰는 것입니다.-->
<p>Hello, World</p>
<p>안녕하세요. 만나서 반갑습니다.</p>
<!-- 아무런 태그도 사용하지 않을 경우 -->
Hello, World
안녕하세요. 만나서 반갑습니다.
</body>
...실행결과
실행 결과를 보시면 알시겠지만 <p> 태그를 단락을 나누어 주는 기능을 합니다.
위의 <p>태그를 사용할 경우는 문단을 끝내고 줄내림이 설정되었지만, 아래의 예시로 아무런 태그를 사용하지 않을 경우 띄어쓰기 정도로 인터프리터는 인식하게 됩니다. 참고로 띄어쓰기를 10번하거나 줄내림을 10번하더라도 한번 입력한 것으로 인식되는 것입니다. 직접 테스트 해보는것이 이해에 도움되리라 믿으며 넘어가도록 하겠습니다.
입력한 그대로 표시 할 수 있는 태그는 <pre> 태그를 이용하면됩니다. <pre> 태그를 이용하면 띄워쓰기 줄내림등 타이핑한 내용 그대로 화면에 표시해 주는 태그입니다.
▶ 태그와 속성
<head> 태그와 <body>등 태그를 제외한 <body>와 </body> 태그의 중간에 위치하는 본문코드 입니다.
<!-- font 태그는 글꼴 및 글자 스타일을 변경 합니다 -->
<font color="green" size="20">Hello,</font> World!!실행결과
위 결과와 같이 HTML에서는 태그에 정해진 속성을 이용하여 색상, 크기, 링크등 많은 기능을 쉽게 변경가능합니다.
<font>태그의 경우에는 색상 크기 글꼴등 폰트에 관련된 것들을 수정가능합니다. 태그의 속성을 이용하지 않더라도 css를 이용하여 똑같은 기능을 구현 하실 수 있습니다. 다음 단락에서 설명하겠습니다.
웹개발을 하다보면 많이 접하게되는 단어 W3C와 관련있습니다. 나중에 궁금증이 생기면 찾아보시면 좋을거 같습니다(웹의 발전과 관련된 내용이니 좋은 공부가 되실 수도 있겠네요).
▶ CSS 스타일 및 스타일시트
태그는 기본적으로 style속성과 class 속성을 제공합니다.
style속성은 CSS 문법을 이용하여 태그의 스타일을 변경하여 다음 예시처럼 글자색이나 테두리등을 설정가능합니다.
class속성은 CSS 문법을 이용하여 style sheet를 생성하여 스타일을 미리 생성한 후 지정할 수 있습니다.
<a href="script:void(0);" style="color:aqua; border: solid 1px;" class="temp" >Hello, World!!</a>
<style>
.temp {
font-size: large;
padding: 20px;
}
</style>실행결과
▶ 스타일시트 파일 생성과 적용
편한 작업을 위해 html과 같은 경로에 style.css라는 파일을 생성하겠습니다.
내용은 다음을 입력합니다.
p {
margin: 0;
padding: 20;
color: green;
font-size: 16px;
}
a:hover {
color: yellow;
}
Html파일은 다음과 같이 수정합니다.
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel='stylesheet' type='text/css' />
<title>기본 HTML 문법입니다.</title>
</head>
<body>
<p>Hello, World!!</p>
<a href="script:void(0);">Hello, World!!</a>
</body>
</html>실행결과
스타일시트 파일내용을 보면,
a:hover는 마우스 오버시 색상을 노란색으로 지정하고 있습니다.
아무스를 올리면 다음과 같이 표시됩니다.
그리고 나머지 <p>태그의 경우 전역적으로 글자색은 녹색을 지정하였고, 글자크기는 16픽셀을 지정한 것을 볼 수 있습니다.
이렇게 지정한 style sheet 파일은 본문 코드의 다음 구문으로 임포트 할실 수 있습니다.
<link href="./style.css" rel='stylesheet' type='text/css' />
오늘은 HTML 기본문법을 공부해 보았습니다.
이 기본 문법이 무슨 내용이 있겠냐고 하시겠지만 모든 개발이 이렇게 기본적인 문법으로 발전하게 된 것을 이해해야합니다. 소개된 태그는 많지 않지만 HTML에 존재하는 태그만해도 엄청 많은 태그들이 있습니다. 모두 사용할 필요는 없지만 충분히 이해하고 쓸만한 태그들을 습득하시길 바랍니다.
HTML의 기본과 CSS의 기본만을 충분히 익히고 응용가능하다면 기본만을 충실히 한것만으로도 훌룡한 웹을 만들 수 있습니다.
물론 웹디자인을 잘 디자인해야하겠지만, 기본적인 기능만으로도 충분히 디자인을 개발할 수 있다는 점 알아주셨으면 합니다..
꼭 고급기술을 먼저 습득하기 위해 시간을 할애하기 보다는 기본에 충실한 코딩을 하길 권장드립니다.
충분히 익숙해 진뒤 고급 라이브러리 같은 것을 접한다면 새로운 세계를 맛볼 수 있기 때문입니다.
기본에 충실하지 못하다면 아무리 잘만들어진 라이브러리를 손에 넣더라도 100프로 자신의 것으로 만들기 어렵기 때문입니다. 오히려 이해가 되지 않기 때문에 거치장 스러울수도 있습니다.
지금까지는 UI의 구현에 대한 기본적인 기능을 소개해 봤습니다.
다음엔 Javascript와 javascript를 이용해 만들어진 프레임워크 Jquery를 한번 다뤄 보겠습니다.
html과 css는 디자인을 구현하기 위한 것이었다면 Javascript와 Jquery의 경우에는 화면을 동작시키는 기능을 합니다.
예로들자면 햄버거 메뉴(세줄 아이콘 메뉴), 버튼이나 태그 선택시 동작, 데이터 연동, 로딩화면 구현, 스크롤시 에니메이션 기능등 웹화면에서 보이는 일반적인 동작들을 구현 할 수 있는 개발입니다.
javascript는 HTML과 개발 문법이 다르고, 분야도 다양하기 때문에 정리한 후 다음 블로그에 작성해 보도록 하겠습니다.
오늘도 행복한 하루 되세요.
'개발기록 > 웹개발' 카테고리의 다른 글
| Visual Studio Entity Framework Code First for MariaDB 연동하기 (0) | 2021.03.29 |
|---|---|
| C# ASP.NET MVC RSS Feed Parsing (파싱하기) (0) | 2021.03.24 |
| Javascript 개발 이 것만 익히면된다. (0) | 2020.11.28 |
| asp.net mvc(c#) 구글 트렌드 RSS Feed 분석하기 (0) | 2020.11.24 |