[HTML] 노마드코더 코코아톡 클론코딩 1일차

SASS를 공부하려고 했다.

이전에 노마드코더에서 바닐라 JS 강의를 재밌게 들었던 기억이 있어서 들어가서 강의를 보는데,

SASS를 시작하기 전에 HTML, CSS부터 복습하는 건 어떨까? 라는 생각이 들었다.

 

회사에서 쓰는 코드는 생각보다 한정되어 있고, 쓰는 태그만 쓰다보니 (사랑하는 flex)

다른 태그들에게 소홀해졌기에 복습도 할 겸 강의 들여다보다가 평생수강권 결제해버렸다.

 

커리큘럼을 보니 거의 아는 내용이었지만, 기초부터 탄탄하게 복습해보자는 생각!!!

커리큘럼에 git 강의까지 포함되어 있어서 이 강의로 선택했다.

 

또한 2주 챌린지로 14일동안 매일매일 과제 12개를 해내야한다. 2번 이상 결석 시 가차없이 탈락...

퇴근하고 집에서 공부하기 쉽지 않았는데, 강제성이 필요할 것 같아서 챌린지도 신청했다!!!

챌린지 시작하기 전까지 강의 다 들어야지.

(9/9 - 9/23)

 

📌 시맨틱 태그

시맨틱 태그 : HTML5에서 도입된 태그들로, 웹 페이지의 구조와 의미를 명확하게 나타내기 위해 사용

 

<header> 머리말. 로고, 내비게이션 메뉴, 사이트 제목 등

<nav> 내비게이션 링크

<main> 문서의 주요 컨텐츠, 문서의 핵심 내용

<section> 문서의 주요 컨텐츠 영역 내에서 특정 주제, 기능을 구분. 일반적으로 각각의 제목을 가지며 독립적인 주제

<article> 독립적이고 자족적인 컨텐츠. 블로그 포스트, 뉴스기사 등 문서 내에서 개별적으로 의미를 가지는 부분에 사용

<aside> 주요 콘텐츠와는 관련이 있지만, 부가적인 정보를 나타냄. 사이드바 등

<footer> 바닥글. 저작권 정보, 소셜 링크, 추가적인 내비게이션 링크 등

<figure> 이미지, 차트, 다이어그램 등 독립적인 컨텐츠를 포함하는 영역

<figcaption> <figuer> 태그에 포함된 컨텐츠에 대한 설명 제공

 

시맨틱 태그의 장점

1. 접근성 향상

2. SEO 개선

3. 유지보수 용이성

 

📌 자주 사용하는 태그

<h1> ~ <h6> 제목

<ol> (orderd list) 순서가 있는 목록

<ul> (unorderd list) 순서가 없는 목록

<li> (list item) 목록 요소

<a> 앵커 태그, 페이지 연결. href="이동 경로"

<img> 이미지, src="이미지 경로"

<span> 짧은 텍스트 

<p> 긴 텍스트, 문단

<abbr> 준말/머릿말, title="설명" 작성 시 마우스 hover하면 출력됨

<q> 짧은 인용문 

<blockquote> 긴 인용문

<cite> 인용 출처
<code> 짧은 코드 조각
<mark> 하이라이트

 

📌 form 태그

<form> HTML에서 사용자 입력을 받아 서버로 전송할 때 사용되는 태그. (코코아 클론코딩에서는 JS를 다루지 않기 때문에 단순 구조만 작성했다.)

<input> 사용자로부터 데이터를 입력받는 여러 종류의 필드. type 손성에 따라 다양한 입력 필드 생성

<input> type 속성

button	기본 동작이 없는 버튼
checkbox	단일 값을 선택/선택 취소 할 수 있는 체크박스
color	컬러팔레트 입력
date	날짜 입력 (년,월,일 시간x)
datetime-local	날짜, 시간
email	이메일 입력
file	파일 선택, (accept로 선택할 수 있는 파일 유형 선택)
hidden	표시되지 않지만 값이 서버로 제출됨
month	년, 월 입력
week	년, 주
time	시간
number	숫자 입력
password	값이 가려진 텍스트
radio	하나의 값을 선택할 수 있는 라디오버튼
range	범위 컨트롤
reset	폼의 내용 리셋 (권장하지 않음)
search	검색. (줄바꿈은 입력값에서 자동으로 제거)
submit	양식 제출
tel	전화번호
url	url 입력
test	기본값 (줄바꿈은 입력값에서 자동으로 제거)

 

<textarea> 여러 줄의 텍스트 입력

<label> 입력 필드에 대한 설명(레이블) 제공. 레이블을 클릭하면 해당 입력필드에 포커스 이동

<label for="name">이름</label>
<input id="name" type="text" />

 

<select> 드롭다운 목록 생성. <option>과 함께 사용

<label for="fruit">favorite fruit</label>
<select name="fruit" id="fruit">
    <option>apple</option>
    <option>banana</option>
    <option>orange</option>
</select>

 

<button> 클릭 가능한 버튼 생성 type 속성에 따라 제출/리셋/일반 버튼 으로 사용 가능

 

<fieldset> 관련된 입력 필드들을 그룹화하여 폼의 일부로 묶음

<legend> <fieldset>과 함께 사용되어 그룹의 제목 정의

<output> 계산 결과나 사용자 입력에 따른 결과 표시

 

니꼬쌤이 알려준 내용 말고도 추가로 몇 개 더 적어서 정리해봤다.

 

 

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon

11,072종의 무료 html 아이콘