본문 바로가기

📚 FrontEnd -Study/HTML, CSS

[HTML 기초]

by ChaeLOTUS 2023. 2. 14.

728x90

웹 개발 이해하기

HTML - 구조를 만드는 마크업 언어

CSS - 스타일을 담당하는 디자인 언어

JavaScript - 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할, user와 상호장용하는

HTML

문서의 구조를 만드는 언어
Tag들의 집합
Tree 구조
<head> : 문서의 메타데이터 선언
<body> : 문서의 내용 담는 곳
<div> : content division 을 의미, 한 줄 차지
<span> : 줄 바꿈이 없는 content
<ul> : Unordered list
<li> : List item
<textarea> : 줄바꿈 되는 입력 폼
input 속성 중 radio 와 checkbox의 차이점은 '하나만 선택 가능한가, 중복선택이 가능한가' 이다.

시멘틱 요소란?

HTML5부터 시멘틱 웹이 중시되면서 여러 시멘틱 요소가 새롭게 만들어졌다. 시멘틱이란 '의미가 있는, 의미론적인'이라 해석되는데 => 즉, 의미를 가진 요소를 사용하는 방식이 추구되었다.

시멘틱 요소 사용 이유?

검색엔진이 시멘틱 요소를 더 좋아한다. 시멘틱 요소에 담긴 의미에 따라 검색결과가 상위 노출이 결정될 수 있다.
개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미있는 코드를 찾는 것이 더 편하다.

대표적인 종류

<article> : 독립적이고 자체 포함된 콘텐츠 지정
<aside> : 본문의 주요부분을 표시하고 남은 부분을 설명하는 요소. 특별한 일이 아니면 사이트 바나 광고창 등 중요하지 않은 부분에 사용.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치, 사이트의 제목이 보통 들어감.
<nav> : 네비게이션 약자, 일반적으로 상단바 등 사이트 안내하는 요소에 사용. 보통은 안에 <ul>을 넣어 목룍 형태로 사용.
<main> : 문서의 주된 콘텐츠 표시.

와이어 프레임

'와이어로 설계된 모양' 의미, 단순한 선언이나 도형으로 웹이나 앱 인터페이스를 시각적으로 묘사.

레이아웃 형태를 잡는 단계.

class와 id

id : 고유한 이름을 붙일 때 사용.

class : 반복되는 영역을 유형별로 분류할 때 사용.

728x90

'📚 FrontEnd -Study > HTML, CSS' 카테고리의 다른 글

TIL - [HTML/CSS 기초] (0)	2023.02.16
TIL - [CSS 기초] (0)	2023.02.15
css/ initial vs inherit vs unset (0)	2022.12.10
css/list sytle type (0)	2022.12.10
position (0)	2022.10.24

댓글

티스토리툴바