[DAY 2] HTML 기초

98__dj·2023년 2월 14일

SEB_FE_후기

목록 보기
2/22
post-thumbnail

아직 아침은 힘들다.... 커피를 마셔도 몽롱하다... 빨리 적응을 해야겟다..

HTML

콘텐츠의 구조를 정의하는 마크업 언어이다.

내가 만들고 싶은 웹사이트의 구조를 만든다고 생각하면 될 것 같다. 물론 구조만으로는 원하는 결과물을 만들긴 힘들겠지만 앞으로 배울 CSS나 JavaScript를 통해 멋진 웹사이트를 만들수 있다.

Tag

부등호 <>로 묶인 HTML의 기본 구성 요소


간단하게 Input 태그에 type값을 text와 password로 주어 ID와 Password를 입력할 수 있게 했고 button 태그로 로그인 버튼, checkbox로 간단하게 만들어 보았다.

시맨틱?

  • 시맨틱(Sementic) - 의미가 있는, 의미론적인

왜 시맨틱 요소를 사용해야 하는가?

  1. 검색 엔진이 시맨틱 요소를 더 좋아하기 때문이다. 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다
  2. 여러 개발자가 함께 작업할 때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문이다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

시맨틱 요소의 종류는 너무 다양하므로...

MDN 문서 참고

id와 class 비교

id - 고유(Unique)한 이름을 붙일 때
class - 반복되는 영역을 유형별로 분류할 때





마무리 과제



이건 그냥 대충 만들어본 과제.... 다른 작업 할게 있어서 급하게 요구사항만 맞춘거라... CSS입힐 때 꾸며줘야겠다...

0개의 댓글