※ 이 글을 쓰는 사람은 SW 비전공자입니다.
※ 개인 공부를 위해 정리하는 글이며, 작성한 코드들은 효율성, 깔끔함(?) 등과는 거리가 멀 수 있습니다.
1편 : 2021.04.11 - [코딩/Web & Java Script] - [웹코딩]Front end 및 Back end 개념, 공부 방향
2편 : 2021.04.12 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초
3편 : 2021.04.19 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지
4편 : 2021.04.20 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table
참고 : 2021.04.22 - [코딩/Web & Java Script] - [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법
이전 편에서 다뤘던 코드카데미(www.codecademy.com/)를 통해 HTML을 정리하려고 한다. 그날 그날 공부한 부분에 대해 정리하는 포스팅을 남길 예정이다.
1. HTML, CSS, Java Script 크롬에서 확인하기
이전 포스팅에서 간단히 설명하였지만 웹페이지 개발에 있어서 HTML은 뼈대(스케치), CSS는 색칠, JAVA는 움직이게 하는 것(제어)라고 설명하였다. 현재 크롬을 사용하고 있는데 F12버튼을 누르면 크롬 오른쪽 창에 아래와 같은 창이 나타난다.
아직 제대로 공부하진 않았지만 직관적으로 어느정도는 구분할 수 있었다. <head></head>, <body></body>와 같은 태그는 웹페이지의 뼈대를 나타내는 HTML이다. HTML 내부에 <script></script>는 웹의 동작을 구현하는 Java script 코드라고 한다.(무슨 동작인지는 아직 잘모르겠다.) 밑에 칸으로 구분되어 뭔가 style, font-size, 글씨체 같은 내용이 나와있는 것은 CSS라는 것을 알 수 있었다.
2. HTML 기초
1) HTML 기본 구조
-. HTML 기본 구조는 위와 같다.
-. Opening tag가 있으면 closing tag가 있어야 한다. tag 사이에는 내용이 들어갈 수 있다.
-. 위 구조를 하나의 요소(element)라고 부른다.
2) HTML 계층 구조
코드카데미에서는 HTML 코드를 임의로 실행시킬 수 있는 시스템을 제공한다. 매우 편리하니 공부할 사람은 참고하면 좋을 것 같다. 계층구조는 말그대로 하나의 요소 안에 여러개의 하위 요소가 들어갈 수 있다는 것이다.
아래 코드를 보면 알겠지만 <body></body> 사이에 여러 요소가 들어가있다. 또 그 안에 <div></div> 안에 <p></p> 요소가 들어가있다.
<코드>
<body>
<h1>투손플레이스 티스토리</h1>
<p>HTML 공부</P>
<div>
<p>코딩 공부하기</p>
</div>
</body>
2) 제목을 나타내는 <h> </h> 요소
HTML에서 제목을 나타내는 요소는 위 태그를 사용한다. 아래 코드와 같이 1~6을 사용할 수 있으며 숫자가 클수록 크기가
작아진다.
<코드>
<body>
<h1>아무말</h1>
<h2>대잔치</h2>
<h3>two hands place</h3>
<h4>tistory</h4>
<h5>welcome</h5>
<h6>환영</h6>
</body>
3) Section을 나누는 <div> </div>
div는 어떠한 요소들(tag들)을 그룹화할 때 사용하는 것이라고 한다. 그룹화를 하면 나중에 CSS로 웹을 꾸미게 될 때 그룹화 내부의 요소들에 동일한 스타일을 적용할 수 있게 해준다.
또한, <div> ~ </div> 사이에는 링크, 이미지, 비디오같은 기타 HTML 요소가 포함될 수 있다.
<코드>
<body>
<div>
<h1>Two Hands</h1>
<p>Welcome to the my tistory!</p>
</div>
</body>
4) 각 요소의 태그 속성(id) 설정하기
아래 HTML 코드와 같이 요소의 속성을 설정할 수 있다.(속성의 이름, 값) <div></div>가 많아지면 각 section을 구분하기 위해 id를 설정하여 준다. CSS로 접근할 때 id로 해당 section에 접근할 수 있다.
<코드>
<body>
<h1>이름</h1>
<div id="name">
<h2>와비</h2>
</div>
<h1>나이</h1>
<div id="나이">
<h2>No comment!</h2>
</div>
</body>
5) 문장 영역을 설정하는 <span> </span>
웹페이지에서 어떤 영역을 나눈다는 의미에서 <div></div>와 굉장히 비슷하다. 근데 2가지는 차이가 있다.
아래 코드를 보며 확인해보자.
<코드>
<div>연습1</div>
<div>연습2</div>
<span>연습3</span>
<span>연습4</span>
-. 줄 바꿈 차이
<div></div>의 각 요소는 연습1, 연습2와 같이 줄바꿈이 자동으로 된다.
<span></span>의 경우 줄바꿈이 되지 않는다.(연습3,연습4)
-. 또 다른 차이점은 그룹화 영역의 차이이다. 아래 코드를 보자. 아직 CSS를 공부해보진 않았지만 참고링크를 보고 CSS를 활용하여 Style 코드를 입력하였다.(참고링크 : lktprogrammer.tistory.com/88)
<코드>
<style>
div, span{
border : 2px solid red;
background-color : blue;
}
span{
background-color : green;
}
</style>
<div>연습1</div>
<div>연습2</div>
<span>연습3</span>
<span>연습4</span>
-. 위 결과 이미지에서 색칠한 부분은 각 영역으로 설정되는 부분이 어디까지인가를 나타낸 것이다.
-. div를 사용한 연습1,연습2의 경우 텍스트가 포함된 줄 전체가 영역으로 설정된다.(그래서 자동 개행되는 듯)
-. span은 해당 글자만 강조된다.
-. 나중에 CSS 적용시 2가지의 차이점을 잘 알고있으면 좋을 것 같다.
'코딩 > Web' 카테고리의 다른 글
| [웹코딩] HTML(Hyper Text Markup Language) - 4 : form, textarea (0) | 2021.04.25 |
|---|---|
| [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법 (0) | 2021.04.22 |
| [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table (1) | 2021.04.20 |
| [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지삽입 (0) | 2021.04.19 |
| [웹코딩]Front end 및 Back end 개념, 공부 방향 (0) | 2021.04.11 |
