안녕하세요 길잃은 문돌이입니다. 오늘은 저번의 비전공자 IT 코딩독학 #7 이후의 몇가지 제가 오늘 배운 것들을
하나하나 작성하고자 합니다. 오늘 기본적으로 HTML기초 2편에는 1편의 연장선으로 기본 태그 및 문서의 구조를 살펴볼 예정입니다. 물론 제가 배우면서 노트하는 식으로 진행되며, 강의 내용은 생활코딩을 보고 하나씩 노트해 나갔습니다.
비전공자 IT 코딩독학 #7 : HTML 기초 1편 기본 태그
안녕하세요 길잃은 문돌이이예요. 오늘부터 HTML 강의를 들으면서 끄적끄적 글을 작성해볼까 합니다. 그래서 약간 문맥이 안맞거나 그러한 부분이 있는데, 너그러이 이해해 주시길 바랄께요. 저
lostedhelloworld.tistory.com
비전공자 IT코딩독학#8 목차
1. 큰 제목 구조 만들기
2.문서의 구조
3.여러 태그들 소개
가장 큰 제목 구조를 만들기
H1,H2 태그를 이용해서 구분을 짓기,
<title> 길잃은 문돌이 </title>
→ title 태그의 경우 해당 페이지의 탭에 페이지의 제목이 나타나게끔 수정하는 태그
<meta chatset= "utf-8">
→ 한글의 글자 기준이 utf-8이기 때문에 글자가 깨진 상태에서 웹페이지에 표시가 될 경우 한글을 읽을 수 있는 형태.
문서의 구조
<!DOCTYPE html>
:Document type declaration 의 약자로서,
html태그는 전체적으로 이 파일, 모든 태그들이 html임을 컴퓨터에게 알려주는 역할.
<html>
<head>
: head 태그의 경우 문서 자체를 꾸며주는 역할,
문자는 어떻게 저장 되는지, 문서의 제목은 무엇인지 등등
ex) title 태그, meta 태그 등
<body>
: body 태그의 경우 문서의 내용을 채워주는 역할
본문의 내용을 채우고, 수정하고 꾸미는 역할.
실제 사용자가 확인하고 사용하는 웹사이트 그 자체
*웹페이지 만들기
140개 태그정도가 현재까지 있지만, 현실적으로 다 알 수도 없고 알 필요도 없다. 최소한의 태그들을 알며 효율적으로 배우는게 중요하다.
전체적인 내용을 담고 있는 메인 html파일을 만들기
1.html
2.html
3.html 등을 따로 구분하여,
링크를 달아서 이동하게끔 만들기.
<a href="1.html"> 1로 이동하기</a>
<a href="2.html"> 2로 이동하기</a>
<a href="3.html> 3로 이동하기 </a>
등등
웹페이지의 소스를 확인하기
: 웹페이지에 들어가서 마우스 오른쪽 편을 클릭하여, "페이지소스 보기" 클릭 하거나 ctrl+U를 클릭하면 소스를 다 나온다.
어느정도만 배우고 나면 전체적인 감이 오고 모르는 태그들의 경우 구글링해서 각자의 지식을 쌓는게 중요하다.
<p> 단락으로 나눌 수 있다 </p>
: p태그의 경우에는 paragraph 의 약자로서, 단락을 표현 할 수 있는 태그이며 웹사이트를 구성하는데 빈도수가 5위 안의 자주쓰는 태그이다.
단락을 구성하여, html의 고유하게 줄바꿈이나, 단락을 나눌 수 없는 것을 단락만을 만드는 태그이며,
h 태그나 ul, ol 태그와 같이 다르게, 어떠한 기능과 꾸밈이 없이 단락만을 나누는 태그이다.
*단락을 조금 더 넓게 생성하고 싶다면, css를 통해서 가능하며, html를 이용해서 하고자 한다면 br태그를 이용해서 강제적으로 줄바꿈을 할 수 있다.
<br>
:<br>태그의 경우 몇 없는 태그 중에서 닫힘태그가 필요없는 태그다. p태그를 대신해서 억지로, 강제적으로 줄바꿈을 할 수 있다. 간격을 조절하기 위한 용도이며, 시각적으로 표시하는 것이지만, 검색엔진이 보기에는 하나의 단락으로 정보를 표현하기 위해서는 p태그를 이용하는것이 좋다.
<img src= " " >
: img 태그는
*속성
src= " " : img 의 소스 경로를 지정해주는 속성으로 필수 속성이다.
width = " " : 가로의 길이를 지정 해주는 속성
height = " " : 세로의 길이를 지정 해주는 속성
alt = " " : 이미지의 이름을 정해주는 속성인데 사진의 의미를 지정해주는 것인데, 눈으로 제대로 보이진 않지만,
검색엔진이 확인 할 수 있으며, 시각장애인들의 경우 정보를 얻을 수 있는 경로.
title = " " : 튤팁을 통햇 마우스를 일정시간을 사진 위에 올려 두면 이미지를 설명해주는 제목이 표시.
'문돌이의 Hello, World! > 리얼 컴맹의 왈가왈부' 카테고리의 다른 글
| 비전공자 IT 코딩독학 #10 : HTML 기초 4편 HTML5 속성 (0) | 2022.07.08 |
|---|---|
| 비전공자 코딩독학 #9 : HTML 기초 3편 table, form 요소 (0) | 2022.07.06 |
| 인생의 목적 / 나만의 가치관과 삶의 모토 정의하기 (0) | 2022.07.02 |
| 비전공자 IT 코딩독학 #7 : HTML 기초 1편 기본 태그 (0) | 2022.06.30 |
| 어쩌다 서른 #3 : 신입사원의 56일간의 행보 (0) | 2022.03.29 |