||강의메모|| 코코아톡 클록코딩 #2 LEARNING HTML

윤코코·2021년 10월 6일
0

강의메모

목록 보기
2/2

👉 바로 가기

노마드코더 [코코아톡 클록코딩] 무료
https://nomadcoders.co/kokoa-clone/lobby

🚩 수강 목표

html 태그 공부가 필요해서
div, button만 주구장창 쓰니까 시맨틱 html을 만들 수 없음

📖 강의 메모

2.0 Our First HTML File

vsc에서 html 파일은 이렇게 만든다.
폴더, 파일명, 열기는 어떻게 하는지 기본 중 기본

2.1 Setup and Errors

그냥 텍스트만 넣은건 html이 아님
vsc를 쓰는 이유는 브라우저에서는 어찌됐든 띄워주기 때문에 에러를 알 수 없음
장점은 유저에게 에러가 안보인다는거 / 단점은 개발자에게도 에러가 안보인다는거
vsc 세팅 (Material Icon Theme, Community Material Theme)

2.2 Our First HTML Tag

<>열고 닫으며 그 안에 들어가는 무언가가 브라우저에 표시된다.
태그의 종류에 따라 디자인이 자동으로 적용된다.
<h1>~<h6>

2.3 More Tags and Prettier

<ul>
<ol>
<li>
prettier

2.4 Tag Attributes

태그의 속성 = Attribute

<a href=“” target=“”>
href = Hypertext REFerence

<img src=“” alt=“”/> 는 self closing tag

2.5 More Tags and Head

<!DOCTYPE html>
브라우저에 이게 html 파일이라는걸 알려줌
<head>
환경설정을 해주는 부분
여기에 적히는 건 대부분 밖에서 보이지 않음

2.6 Its All About the Head

<meta> 부가적인 정보
<meta name=“description” content=“” >
검색결과에 타이틀 바로 아래 나오는 소개글
<meta charset=“uft-8”>
필수필수
<html lang=“”>
우리 페이지의 주된 언어가 무엇인지 알려주는 곳
<link rel=“shortcut icon” sizes=“” href=“”>
타이틀에 이미지를 넣어줌

2.7 More Tags

개발에 대해 뭔가를 검색할때에 뒤에 mdn을 붙여서 검색해라
Mozilla Developer Network
파이어폭스 브라우저를 만든 회사가 제공하는 web에 관한 정보 문서

w3schools는 절대 사용하지 않길 바람
와이...?
MDN are the ones that create the standards, MDN is non profit, W3C has commercial interests + the source of W3C is MDN :)

2.8 Form Tags

<form> <input required type="" placeholder="" value=""/> </form>
type

  • button
  • text (default)
  • password
  • submit
  • checkbox
  • file
  • email
  • url

2.9 More Tags and IDs

<label for=""></label>
input 태그와 함께 작동함
label의 for 속성값 = input의 id 속성값이 동일해야 함
label을 클릭하면 연결된 input이 실행됨

id는 어느 태그에도 넣을 수 있는 속성
고유 식별자임

2.10 Semantic HTML

semantic
문서를 보기만해도 그 의미를 짐작할 수 있는 걸 의미

<div>
아무런 의미가 없는 박스
<header>
div와 같이 박스이지만 website의 헤더라는 의미가 있음
head 태그와 다름
<main>
<footer>

예전에는 전부 div 였지만 이제는 의미가 있는 박스태그가 생겼음

2.11 Recap

오오 찰떡 비유
HTML = 뼈
CSS = 근육
JS = 뇌

attribute에는 항상 큰따옴표 사용
절대 외울필요 없음. 구글링하셈.

🔍 추가정보: html tags usage statistics (2020)

( 링크 : https://www.advancedwebranking.com/html/#faq )

<html> html 파일 전체를 감싸는 기본 태그
<head> 환경설정
<body> 화면에 그려지는 것들이 들어있는 곳
<title> 웹사이트 제목
<meta> 부가적인 정보를 담는 태그
<div> division / 박스 / 한 줄을 전부 차지함
<a> 링크 연결
<script>
<link>
<img> 이미지 태그
<span> 짧은 텍스트
<p> 긴 텍스트. 단락
<li> 리스트 아이템
<ul> unordered list
<style>
<br>
<h2> 2단계 head
<input>
<h1> 1단계 head
<form>
<h3> 3단계 head
<nav>
<footer>
<header>
<iframe>
<button>
<strong> 강조 / b 태그와 다른점은 의미가 있느냐 없느냐
<i>

🍇 더 공부하고 싶은 것

form - input
label
nav
select - option

profile
Web Front-End Developer

0개의 댓글