나의 개발일지

1. 생활코딩으로 HTML 배우기 본문

HTML

1. 생활코딩으로 HTML 배우기

heew0n 2023. 10. 3. 20:20

 

내일배움 부트캠프에 참여하게 되었다. 본격적으로 시작하는 것은 10월 4일이지만, 사전캠프라고 해서 미리 지급된 강의로 공부하고 자기주도적 학습의 루틴을 익히고자 개강 전부터 참여하는 것이다! 게더타운에 모여 조원들과 화면 공유를 하면서 같이 공부를 하니까 의욕이 더 생기는 기분!

 

게더타운에서의 나의 모습이다 ^^

지금 쓰는 것은 스파트타코딩클럽에서 강의가 지급되기 전 생활코딩 유튜브로 공부한 내용이다.

 

 

HTML

 

HyperText Markup Language의 약자

Hyper Text : 링크로 연결되어 있는

Markup : 문법적 특성이 있는

Language : 기계와 인간과의 컴퓨터 프로그래밍 언어

(기계와 인간 사이의 약속)

 

기본 문법과 태그

<!DOCTYPE html> // 이 문서에는 HTML이 담겨있다는 뜻
<html lang="en"> // <head> 와 <body>를 감싸는 최고위층 태그
<head> // 본문을 설명하는, 즉 <body>를 설명하는 태그
    <meta charset="UTF-8"> // html 파일의 인코딩을 알려주는 태그
                           // 웹브라우저, 컴퓨터의 HTML파일을 웹브라우저에서 표시될 수 있도록 변환하는 처리작업
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //뷰포트너비를 단말기 너비에 맞추고, 초기배율을 1로 한다                                  
    <title>Document</title> // 페이지 제목 바꾸기
</head>
<body>
    
</body>
</html>

// 'html5'를 입력하면 자동으로 기본 세팅이 되어진다
 
 

* viewport 란

- 현재 화면에 보여지고 있는 영역을 의미

- 기기 별로 뷰포트가 다르기 때문에 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해

   화면의 크기가 다르게 보이는 현상이 나타남

- 반응형 웹 디자인을 구현하고 모바일 친화적인 사용자 경험을 제공함

 

본문 태그

<body></body> //HTML 문서 정보의 구조, CSS로 꾸미지 전에 화면에 출력되는 요소, 본문에 해당되는 태그
 

제목 태그

<h1>글자크키</h1>  // Heading
<h2>글자크키</h2>  // 숫자가 작을수록 글자의 크기가 큼
.
.
.
<h6>글자크기</h6>  //숫자가 클수록 글자의 크기가 작음
 

줄바꿈 태그

<br> // 줄 바꾸기 *닫히는 태그 생략가능, 여러 번 사용하면 단락처럼 보여짐

<p>단락생성</p> // Paragraph
 

글자 강조 태그

<strong>글자강조</strong>

<u>밑줄긋기</u> //underline
 

링크 추가 및 이미지 삽입 태그

<img src=”파일명.파일형식” width=”100% 또는 300px”> // 이미지 첨부 태그 및 이미지 사이즈 조절

<a href=”URL” target=_blank title=”툴팁”>텍스트</a> // 링크 삽입, 새탭으로 열기, 툴팁생성(*마우스커서를 올려 보면 툴팁이 생성됨) 
                                                   // hypertext 의 h와 reference의 ref


<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html specipication">Hypertext Marakup
Language (HTML) </a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.
<p><img src="coding.jpg" width="300"></p>
 

목차 및 목록 태그

<li>목차, 목록</li> // List

   <li>HTML</li>
   <li>CSS</li>
   <li>JAVAscript</li>
 
<ul>목록 Grouping 하기</ul> // Unordered list

 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
 </ul>
  <ul>
    <li>hello</li>
    <li>world</li>
 </ul>
 
 
(왼)목록을 Grouping 하기 전, (오)<ul>태그를 써서 Grouping한 후
<ol>리스트숫자매기기</ol> // ordered list

 <ol>
     <li>HTML</li>
     <li>CSS</li>
     <li>Javascript</li>
     <li>hello</li>
     <li>world</li>
 </ol>
 

목록에 링크 추가 태그

<h1><a href="index.html">WEB</a></h1>    // 파일을 연결시켜 WEB을 클릭했을 때 페이지 이동
    <ol>
        <li><a href="1.html">HTML</a></li> 
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JAVAscript</a></li>
    </ol>
 

<사이트 추천>

아름다운 무료 이미지 및 사진 | Unsplash : 무료이미지 사이트

코딩의 시작, TCP School : 태그검색

W3Schools Online Web Tutorials : 태그검색

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com) : 태그검색

 

 

 

 

 

 

'HTML' 카테고리의 다른 글

Semantic Tags(Markup) 개념 및 태그 정리  (0) 2023.10.05
'HTML' Related Articles more