본문 바로가기
  • Build Up Routine
Basic/노마드코더

노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#2- Learning HTML

by 까느.dev 2022. 3. 15.
  • VSC사용시 반드시 지켜야할 주의사항.

 

1. VSC로 만들어준 폴더안에 파일을 만들어주어야한다.

2. 폴더명은 소문자로만 작성해야한다.

3. 파일명 또한 소문자로 작성해야한다.

 

나중에 위 문제들로 에러가 나올수 있는 사항들이니 반드시 체크해주어애한다.

 

  • 웹사이트의 구성

웹사이트는 크게 Head부분과 Body로 나누어진다.

 

head : 웹사이트의 환경을 설정함, 외부적으로 보여지지않는 설정을 해준다.(ex. 타이틀, 메타태그 등)

헤드에서 작성된 글은 웹사이트에서  content로 나타나지 않는다.

 

body : 사용자가 볼 수 있는 contnet를 보여준다.

 

  • tag와 attribute

 

tag : "<tagname>내용</tagname>"  형태로 쓰인다. 웹에서 어떤 타입(?)인지 알려주는 요소이다.

 

attribute(속성) : "<tagname attrname = "attrvalue"> 내용 </tagname>" 의 형태로 쓰인다. 특정 태그에 따라 쓸 수 있는 특정 속성이 있어 사용시 주의가 필요하며, 기능이 없는 속성을 입력할시에는 어떤 작동도 안되게된다. 특정 tag에서 특정 attribute가 작동된다.    

 

 

  • 자주 쓰이는 tag같아 보이는것은 조금 정리했다.
<html lang=“en”></html>
<head></head>
<title></title>
<link />
<meta />
<meta charset="utf=8" /> ->
<label for=""></label>
<input />
id = "" //unique identifier(고유식별자) element당 하나의 id만 가질 수 있다. id는
body 안에 어떤 태그에든 넣을 수 있는 attribute임

<body></body>
<form></form>
<header></header>
<a></a>
<h1></h1>
<p></p>
<header></header><main></main><footer></footer><div></div>
-> 모두 같은 div태그이지만 자주쓰이는 형식은 이름을 붙여준 태그들이있다.
웹사이트를 이해하기쉽게 html문서를깔끔하게 만들고 다른사람이 보았을 때 이해하기 쉽게 만들기 위한 태그 들이다.

 

 

  • contents Sectioning(콘텐츠 구획)

div태그의 기능이지만 자주쓰이는것은 html5환경에서는 이름을부여하고 속성값이 들어가있다.

자료참조 : "https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%BD%98%ED%85%90%EC%B8%A0_%EA%B5%AC%ED%9A%8D"

 

자료참조 : "http://tcpschool.com/html/html5_element_semantic"

댓글