[사전스터디-1주차] 1) Html 주요 내용 정리
사전스터디 1주차는 HTML/CSS를 학습하고, 자기소개서 페이지를 완성해보는 것이다.
앞으로 2번의 포스트는 HTML/CSS를 학습하면서 실제 자주 쓰이는 내용들 위주로 간략히 정리하고, 실제 코드의 쓰임새에 대해서 정리한다.(추후 위코드 실제 과정을 시작하면서 자세한 내용들을 마저 정리할 예정이다.)
1. HTML의 정의 / 쓰임새
- HTML 또는 하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다.
- 쉽게 말해 웹페이지를 작성하기 위한 언어.
2. HTML 코드의 실제 구성.
<!DOCTYPE html>
<html>
<head>
<title>Who is Moon Sung Ho?</title>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width">
<link rel="stylesheet" href="introduce.css">
</head>
<body>
<p> 안녕하세요 </p>
</body>
</html>- head와 body로 이루어져있고, head는 해당 웹페이지의 Title과, 문자셋에 대한 정보, 해당 페이지에 대한 기본 설정, 참조할 CSS문 등을 먼저 설정하는 부분이다.
- body는 실제 페이지에 들어갈 Content들을 작성하는 부분이다.
3. 태그와 엘리먼트
-
HTML은 모든 내용이 Element(요소)로 이루어져있고, 그 Element는 시작태그, 종료태그로 이루어져있다. 따라서 HTML은 태그로 이루어진 요소들의 합이라고 볼 수 있다.
-
위 코드에서 ... 와 같이 괄호를 태그라고 하고, 시작태그는 <태그네임>
종료태그는 </태그네임>으로 나타낸다. -
태그의 종류에 따라 이미지링크를 위한 태그, 텍스트를 작성하기 위한 태그, 표 형태의 테이 블을 만들기 위한 태그 등으로 나뉜다.
4. 자주 쓰이는 주요 태그
(1) p : 한 단락을 만들기 위한 텍스트박스 태그.
(2) br : 줄바꿔주는 태그.
(3) table : 표 만들어주는 태그.
(4) tr : 표의 행에 채우는 태그.
(5) td : 표의 열을 채우는 태그.
(6) div : 웹페이지를 구획으로 구분해주는 태그. CSS에서 Box Model과 함께 자주 쓴다.
(7) h1, h2, h3, h4, h5, h6 :
텍스트의 크기를 결정해주는 태그. h1이 가장 크고, h6가 가장 작다.
(8) img : 이미지 파일이나 웹페이지의 이미지를 링크할 때 쓰는 태그.
(9) a href = ~ : 내가 이동하고자 하는 페이지나, 타 사이트로 이동할 때 쓰는 태그다.
- 태그에는 속성을 부여할 수 있는데, 가령
<body>
<p style = "color : red"> 안녕하세요. </p>
</body>이렇게 텍스트 태그인 <p>태그 옆에 style, href 등을 설정할 수 있다.
style은 Content에 여러 효과를 주는 태그이고, color : red를 설정하면
안녕하세요가 빨간색 글씨로 출력된다.- 가장 중요한 속성 중 하나는 class와 id 속성이 있다. 쉽게 말하면 해당 태그에 이름을 부여하는 태그다. 웹 페이지 상의 모든 p 태그가 아닌 어떤 특정한 p 태그에만 속성을 부여하고 싶거나 웹 페이지상에서 클릭을 했을 때 어떤 특정 태그의 내용으로 이동하고 싶게 만들려면 그 구획의 이름이 필요하고, 그러기 위해선 class나 id 속성을 부여한다.
<div class = "intro"> <h1> Introduction </h1> <p> ...</p> </div>
5. 자기소개 페이지 코드 중 일부.
<!DOCTYPE html>
<html>
<head>
<title>Who is Moon Sung Ho?</title>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width">
<link rel="stylesheet" href="introduce.css">
</head>
<body>
<div class = "nav">
<p style = "margin: 0 auto"> <a href = "Introduce.html#main" >Introduction</a> </p>
<p style = "margin: 0 auto"> <a href = "Introduce.html#prof">Profile</a> </p>
<p style = "margin: 0 auto"> <a href = "PetIntroduce.html"> My Pet</a> </p>
<p style = "margin: 0 auto"> <a href = "http://facebook.com/mshgood" target = "_blank">SNS</a> </p>
</div>
<div class = "main" id = "main">
<div class = "who">
<br><p style = "color : white">Who is Moon Sung Ho?</p><br>
<img src = "MSH.jpg" style = "width :250px">
</div>
<!-- intro -->
<div class = "intro">
<h1> Introduction</h1>
<p> 게임, 레고 등 창작물에 관심이 많아 프로그래머를 꿈꾸며 컴퓨터공학과에 진학했다.<br>
졸업 후 인프라 엔지니어보다는 다양한 어플리케이션 및 시스템을 제작하는 프로그래머에 관심이 많아
Wecode 12기로 함께하게 되었다.</p>
</div>
<div class = "prof" id = "prof">
<h1> Profile </h1>
<ul>
<li>2008-2011 Sangmoon High School,Seoul</li>
<li>2012-2016 BS, Inha University (Major : Computer Engineering)</li>
<li>2017-2019 Military Service</li>
<li>2020.08 12th Wecoder</li>
</ul>
</div>
</div>
</body>
</html>
6. 마치며
- HTML의 기본적인 태그와 속성에 대해 정리하였다.
- 공부도 단권화가 중요하듯이, 포스트도 단권화하여 HTML에 관한 대부분의 내용들을
복습할 수 있게 정리해두도록 해야겠다.
