HTML 문법 공부를 시작했습니다.
학생때부터 관심이 많았지만 시간을 내야지 하면서도 놀기 바뻐 그동안 미루어 오다가 이번에 어떤 기회를 통해 HTML 공부를 시작하게 되었는데요, 막상 시작해보니 저에겐 조금 어려운듯했습니다.
그래서 제가 공부한 내용을 조금 이해하기 쉽도록 나누어볼까 합니다.
1.HTML 구조
html은 크게 보면 head(헤드)와 body(바디)로 나누어져있습니다.
head 부분에는 어떤 내용을 쓰냐면, 주로 타이틀 제목과 클래스를 작성합니다.
타이틀 제목은 말 그대로 제목이고요, 클래스는 음..일단은 쉽게 페인트 통이라고 생각하시면 될 것 같습니다.
무슨 말이냐면, 본문은 body에 작성하는데 이 본문 글자 모두를 빨간색으로 할 계획이라면 A라는 클래스에 '글자는 빨간색'이라고 지정해 주는겁니다.
그리고 A클래스를 넣는 곳의 글자는 빨간색으로 바뀌게 됩니다.
글자 하나, 하나씩 빨간색으로 지정해 줄 필요없이 클래스를 이용하면 조금 더 간결하고 빠르게 문법을 작성할 수 있으니까 사용하는 것입니다.
2.HTML 기본 문법 정리
※참고 : 팁 = 컨트롤+알트+L 은 줄정리
1.여기 헤드와 헤드 사이의 title에는 말그대로 제목이 들어간다.
head>헤드입니다.
title>코딩개발일지 | HTML 기초</title
/head>헤드 닫기입니다.
2.div는 상상으로 박스를 씌운다고 상상하면된다.
div와 div사이는 박스? 구역?으로 감싼다.
div>나는 구역을 나눕니다.</div
박스를 만든다고 생각하면 편합니다.
3.p와 p사이는 한줄 작성하는거다.
p>p는 문단입니다.</p
4.리스트는 ul로 감싸주고 리스트 내용 항목은 li로 감싸준다.
ul>
li> bullet point!1 </li
li> bullet point!2 </li
/ul>
5.h1은 제목을 나타내는 태그입니다.
페이지마다 하나씩 꼭 써주는 게 좋아요.
그래야 구글 검색이 잘 되거든요.
h1>큰 제목입니다.</h1
h2>소제목입니다.</h2
h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3
6.CSS에서 글자를 꾸며야 하지만, html에서 글자를 꾸밀때 span을 사용한다.
span 태그입니다: 특정 span style="color:red">글자</span를 꾸밀 때 써요
7.a 태그입니다. a태그는 링크를 걸어서 누르면 다른사이트로 이동합니다.
a href="http://naver.com/"> 하이퍼링크 </a
8.이미지 넣는 방법은 img 태그입니다.
img src="https://주소를 넣으면됩니다.
9.검색창과 같이 입력창을 만들때 사용하는 input 태그입니다.
input type="text" /
10.버튼만들 때 사용하는 button 태그입니다.
button> 버튼입니다</button
11.이건 찾아봐야한다. 아직모른다. textarea 태그
textarea>이건 찾아봐야겠다</textarea
3.마치며
오늘은 제가 공부했던 html 기본 구조와 기본 문법을 정리하여 다른분들이 보고 알기 쉽게 풀어봤습니다.
이해가 안되거나 설명이 부족한 부분도 있을텐데요, 저도 처음이라 아직 익숙하지가 않습니다.
포기하고 싶을때는 리소스를 줄이면됩니다.
html이 어려워 포기하고 싶을때 하루에 3시간 공부했다면 1시간으로 줄이면서 끝까지 포기하지 않도록 하는 습관을 기르도록 하겠습니다.
저를 위한 말이기도하고, 이 글을 보시는 분을 위한 말이기도 합니다.
그럼 다음에 또 봐요!