안녕하세요~ 저는 보라해바라기입니다.
어제부터 '생활코딩'님 영상을 보면서 아주 얕게나마 HTML을 접하고 있는데요.
사실 어제부터 기록하려고 했으나 저의 귀차니즘 때문에...ㅎㅎ 오늘부터 기록하는 습관을 들이려고 합니다!
아직 아무것도 아는게 없어서 "겨우 저거 만들었어?" 라고 생각하실 수 있지만..
저에게는 이것도 큰 성과랍니다^_^
시작이 반이라는 말도 있듯이 이 블로그를 시작으로 꾸준히 공부하는 저의 모습을 지켜봐주세요!
공부를 하면서 만들어보고 싶던 웹페이지는 저를 가장 잘 소개해줄 수 있는, 제 인생 이야기를 담은 웹페이지입니다.
저는 컴퓨터 언어를 "자신"을 표현하는 수단으로 사용하고 싶었기 때문이죠^_^
자신이 만들고 싶은 웹에 대한 설계를 마친 후, 본격적으로 수업을 듣기 시작했어요.
이 때까지 배운 내용을 정리하고 마지막에 제가 만든 웹 페이지를 보여드릴게요~
1. 태그 ( <> )
태그는 HTML의 꽃이라고 할 수 있죠? 태그는 HTML의 가장 기초적인 문법이기 때문이에요. 예를 들어 완성된 자동차를 웹페이지라고 한다면 태그는 자동차를 구성하는 필수 부품이라는 생각이 들어요 ㅎㅎ
아주 많은 태그들이 존재하고 있고 제가 배운 태그들은 다음과 같아요.
- <strong> 문장 </strong> : 태그 사이에 속해있는 문장을 굵게 표시. ex. 문장
- <u> 문장 </u> 태그 사이에 속해있는 문장에 밑줄 긋기 ex. 문장
- <h1> 문장 </h1> : 제목을 나타낼 때 사용. h1~h6까지 존재. h뒤의 숫자가 커질수록 문장의 크기는 작아짐.
- <br> : 문장을 줄바꿈. </br>가 필요없음.
- <p> 문장 </p>: 태그 사이에 속해있는 문장을 이전 문장으로부터 한 줄 띄우고 한 단락 띄우기. 코드 생성/ 분석 시 효율적.
<h1>부터 <h6>의 크기 차이는 다음과 같아요.
강조하고 싶은 제목은 작은 숫자를, 소제목 등에 사용하는 제목은 큰 숫자를 이용해서 표현하면 되겠죠?!
사실 이런 제목은 폰트의 굵기과 크기를 사용해서 시각적으로 "제목처럼" 보이게 만들 수 있답니다.
그럼에도 제목 태그를 따로 사용하는 이유는 무엇일까요?
우리가 검색 엔진에 똑같은 문장을 검색하더라도 제목 태그를 사용한 문장과 제목처럼 보이는 문장의 노출 정도에는 확연한 차이가 나요.
즉, 제목 태그를 사용하면 그렇지 않은 것보다 상단에 노출된다는 이야기입니다.
웹은 신체적인 불편함을 가진 사람도 정보에 쉽게 접근하도록 돕는 것을 목표로 합니다.
그렇기에 제목 태그를 활용한 정보들이 더 좋은 접근성을 가지게 되는거랍니다!
2. 속성 (source)
속성을 설명하기 위해서는 <img>태그에 대해 알아 볼 필요가 있어요!
<img>태그는 사진을 삽입할 때 사용되지만 이 태그 자체만으로는 이미지 자체를 표현하지 못해요.
그렇다면 어떻게 이미지를 표현할 수 있을까요?
이 때 필요한 개념이 바로 속성이랍니다.
속성을 이용해서 이미지를 표현하는 방법은 다음과 같아요.
<img source="이미지 주소" width="100%">
이미지 주소란 파일에 저장된 이미지를 말해요.
내가 삽입하고 싶은 이미지가 있다면 그것을 HTML파일이 있는 폴더에 같이 저장해야 한답니다!
저의 예시에서는 coding.jpg가 이미지 주소가 되는 것이고요.
또한 width는 이미지의 크기를 결정해주는데 위 예시에서는 화면 맞춤으로 사진이 보여지게 됩니다.
source와 width의 순서는 바뀌어도 상관이 없어요!
3. 부모-자식과 목록
HTML에서도 유기적인 관계를 가지는 태그들이 있어요.
그 대표적인 태그들이 <ul>과 <li>입니다.
- <li>: list의 약자로 목록을 구성하는 태그
- <ul>: 태그에 있는 목록들을 각 그룹으로 구분하기 위한 태그
즉, <ul>과 <li>는 각각 부모와 자식의 역할을 하고 있답니다!
우리가 목록을 구성할 때, 넘버링(ex. 1, 2, 3 ..)을 많이 하게 됩니다.
그렇다면 만약 상사가 '상단에 있는 한 문장을 지우고 다시 넘버링해 줘.' 라고 지시했다면 어떻게 해야 할까요?
제가 만든 웹페이지는 목록이 3~4개 밖에 없기 때문에 숫자를 다시 작성해주면 됩니다.
하지만.. 목록이 1억개가 있다면? 모든 문장에 다시 숫자를 매기는 것은 비효율적이겠죠!
그래서 나온 태그가 바로 <ol>태그 입니다.
<ol>은 목록을 자동으로 넘버링하여서 숫자를 다 바꿔야하는 고통을 없애준답니다^_^
<ol>... 참 착한 친구죠?
정리하자면, <li>와 같이 쓰이는 태그는 <ul>, <ol>이 있고 ul = unordered list, ol =ordered list의 뜻을 가지고 있어요.
4. HTML의 구조
앞서 본 목록들의 관계와 같이 HTML도 구조를 가지고 있답니다!
- <title> 문장 </title> : 웹페이지의 제목
- <meta charset="utf-8"> : utf-8로 문서를 읽어라! (이를 작성해주지 않으면 한국말이 인식되지 않는 경우 발생)
- <head> 본문을 설명하는 문장 </head> : 본문을 설명하는 문장을 묶는 태그
- 맨 위에 관용적으로 <!doctype html>을 넣어줌. => 더 간결하게 정리됨.
- <body> 본문 </body> : 본문을 묶는 태그
- <html> : <head>와 <body>를 묶는 태그
즉,
<!doctype html>
<html>
<head>
<title> 문장 </title>
<meta charset="utf-8">
</head>
<body>
본문 내용
</body>
</html>
이런 식으로 구성되는 것 입니다!
** 링크를 삽입하는 태그 <a>
약간 부록...? 느낌인데요! 유용하게 잘 쓰일 것 같아서 가져왔답니다~
<a> 문장 </a>는 문장 1에 링크를 다는 태그랍니다.
하지만 윗 문장 자체로는 링크가 실행되지 않고 부수적인 것들이 필요해요!
예를 들어 <a href="링크주소" target="_blank" title="문장2"> 문장1 </a> 를 살펴볼게요.
이 코드는 문장 1에 "링크 주소"를 단다는 의미랍니다.
target="_blank"는 하이퍼링크를 클릭했을 때 새로운 탭에 생성되도록 해요.
원래는 기존 웹페이지가 링크 주소에 있는 웹페이지로 바뀐답니다.
title="문장2"는 하이퍼링크에 마우스를 올려놨을 때, 툴팁에 문장2가 뜨도록 해요.
설명란, 주석과 비슷하다고 생각하시면 될 것 같아요.
말로만 설명하기에는 부족한 점이 있어서 사진도 따로 첨부했어요!
여기서부터는 제가 작성한 코드와 웹페이지 결과인데요! 아직 배운게 많이 없어서 어설픈 점이 많아요..
하지만 웹개발자가 되기 위한 첫걸음을 내딛은 것 같아서 기분이 좋아요 ㅎㅎ
<!doctype html>
<html>
<head>
<title>보해의 인생</title>
<meta charset="utf-8">
</head>
<body>
<h4>목차</h4>
<ol>
<li> 과거</li>
<li> 현재</li>
<li> 미래</li>
</ol>
<ul>
<li>초등학교</li>
<li>중학교</li>
<li>고등학교</li>
<li>대학교</li>
</ul>
<h1>보라해바라기의 삶</h1>
<p>나는 현재 <a href="http://www.knu.ac.kr/wbbs/" target="_blank" title="KNU">대학교</a> 3학년에 재학 중이다.
나의 꿈은 <strong><u>웹개발자</u></strong>이다. <u>3학년 여름방학</u> 전까지는 막연하게 개발자가 되어야겠다고 생각했다.
<br>하지만 여러 영상을 찾아보며 내가 입문하기 가장 쉽고 흥미를 느낄 수 있는 개발자 분야가 웹개발자라는 것을 차츰 알게 되었다.</p>
<img src="coding.jpg" width="450">
<p style="margin-top:25px;">웹 프로그래머가 되기 위해서는 HTML, CSS, JavaScript를 필수로 알아야한다.
나는 현재 생활코딩님의 영상을 보며 HTML을 아주 얕게나마 배우고 있다.</p>
</body>
</html>
오늘은 여기에서 마무리하도록 하겠습니다!
궁금한 점이 계신 분은 댓글 남겨주세요:)
'HTML & CSS' 카테고리의 다른 글
| [CSS] 생활코딩 8~11 _ 박스모델, 그리드 (0) | 2021.07.07 |
|---|---|
| [CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자 (1) | 2021.07.06 |
| [HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석 (1) | 2021.07.05 |
| [HTML] 생활코딩_복습 겸 웹페이지 보강 (1) | 2021.07.04 |
| [HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅 (2) | 2021.07.03 |
댓글