🌱용어 정리
- HTML(HyperText Markup Language) : 웹페이지의 구조(Structure), 내용, 틀을 담당하는 마크업 언어
- CSS(Cascading Style Sheets) : 디자인 요소를 시각화(Presentation)하는 스타일 시트 언어
- JavaScript : 단순한 웹페이지를 사용자와 상호작용(Interaction)할 수 있게 하는 프로그래밍 언어
🌱VSCode (Visual Studio Code)
- 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터
- 장점 :
1. macOS, Linux, Windows 등 OS와 상관없이 사용 가능
2. JavaScript, HTML, CSS를 모두 편집 가능
3. 다양한 extension을 제공 (커스터마이징 가능)
4. 디버깅(debugging)이 편리
5. 무료로 사용할 수 있음
유용한 Extention
1. Live Server : 코딩의 수정 결과를 새로 고침 없이 실시간으로 브라우저에서 확인 가능 (가상 웹서버 역할)
2. open in browser : Live Server는 1개의 프로젝트만 확인 가능하여 다수의 HTML 페이지를 확인해야 하는 상황에서 유용
3. Prettier : 코드의 들여쓰기, 줄바꿈을 자동 정렬해주는 기능
4. Auto Rename Tag : 여는 태그나 닫는 태그를 수정하면 쌍을 이루는 태그를 자동으로 수정해주는 기능
🌱HTML 태그(Tag)
- HTML은 tag들의 집합이다.
- 아래와 같은 트리 구조를 가진다.
- Self-Closing Tag도 있다. (ex.
<img>)
<!DOCTYPE html> <!--HTML 문서임을 명시-->
<html lang="en"> <!--HTML 시작 태그로 문서 전체의 틀-->
<head> <!--문서의 metadata를 선언-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!--문서의 제목, 브라우저 탭에 보여짐-->
</head>
<body> <!--문서의 내용을 담는 곳-->
<h1>Hello</h1> <!--heading을 의미, h1~h6까지 있음-->
<div>Contents</div> <!--content division을 의미, 줄바꿈 됨-->
<span>Here too!</span> <!--줄바꿈이 없는 content 컨테이너-->
<img src="https://cdn.pixabay.com/photo/2022/04/09/05/23/tulip-7120784_960_720.jpg"/>
<a href="#"></a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<input type="text" placeholder="ID"></input>
<input type="password" placeholder="password"></input>
<button>Login</button>
<input type="checkbox">Keep Login</input>
<textarea></textarea>
</body>
</html>🌱시맨틱 요소(Semantic Element)
-
정의 : HTML의 최신 버전인 HTML5에서는 시맨틱 웹이 중시되며 여러 시맨틱 요소가 새롭게 만들어졌다.시맨틱이란, '의미론적인'이라는 뜻을 가지고있다.
-
필요성 :
1. 검색 엔진이 시맨틱 요소를 더 좋아하기 때문
2. 여러 개발자가 함께 작업할 때<div>요소를 탐색하는 것 보다 의미있는 코드 블록을 찾는 것과 데이터 유형을 예측하는 것이 훨씬 편리하기 때문 -
종류 :
<article>: 독립적이고 자체 포함된 콘텐츠를 지정하는 요소<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소 (ex. 사이드바, 광고창 등)<footer>: 페이지 가장 아랫부분에 위치하는 요소 (ex. 라이선스, 주소, 연락처 등)<header>: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며 사이트의 제목이 들어가는 요소 (ex. 상단바 검색창 등)<nav>: 네비게이션의 약자로, 상단바 등 사이트를 안내하는 요소. 주로<ul>을 넣어 목록 형태로 사용<main>: 문서의 주된 콘텐츠를 표시
🌱Web App 구조 잡기
- 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계 문서
- 와이어프레임(Wireframe) : UI 중심의 화면 레이아웃
- 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형
- 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
여러 태그를 하나의
<div>로 감싸야 함.
<section>은 보통 제목, 컨텐츠가 포함된 구획을 나눌 떄 사용하며, 렌더링은<div>와 크게 다른 점 없음.
🌱id & class
id: 고유(unique)한 이름을 붙일 때 (중복 허용 X)class: 반복되는 영역을 유형별로 분류할 때
| HTML 태그 | Selector |
|---|---|
<div id="writing-section"> | div#writing-section |
<li class="comment"> | li.comment |
🌱알게된 점 & 느낀 점
- VSCode의 유용한 Extension을 알아보고 적용해 보았다.
- 아무리 기초적이고 이미 아는 내용이라 생각한다 한들 기초공사가 부실하면 그 곳에 집을 짓기는 힘들다는 것을... 게을러지지 말고 집중해서 공부하자...!!
| 참고자료 |
FE developer