🔍 웹 개발의 시작
디자이너 리소스를 구하기 힘들때 이용하는 홈페이지.
다양한 웹 디자인을 무료로 제공하며 사이드 프젝를 만들 때 디자인을 참고하자.
🔍 HTML, CSS, JavaScript
◆ 💻 HTML의 기본 구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>웹 페이지 제목</h1>
<p>여기에 콘텐츠를 작성합니다.</p>
</body>
</html>- <head> : 이 문서가 어떤 특징이 들어가 있는지 문서에 대한 설명이 들어가 있다.
- <title> : 웹 페이지의 제목을 정의, 검색 엔진 최적화(SEO)에 중요한 역할
- <meta> : 웹 페이지의 메타데이터(저작자 등)를 정의
- <script> : JavaScript 코드
- <style> : CSS 코드 지정
- <body> : 실제 사용자에게 보여지는 내용이 들어간다.
◆ 💻 CSS란?
Cascading Style Sheet의 줄임말.
HTML이 골격, 그 골격을 색상, 크기, 폰트, 레이아웃 등을 사용해 예쁘게 꾸며주는 역할이다.
◆ 💻 JavaScript란?
예쁘게 꾸며놓은 웹페이지를 동적으로 만드는 것.
- 동적인 요소 추가
- 사용자 입력에 대한 이벤트 처리 등
- 백엔드와 연락 주고받기
◆ 💻 결론
- html : 뼈대
- css : 옷 입히고 살 입히는
- javascript : 웹 페이지의 중추 신경 역할을 한다
html은 뼈대고, 그 html에 옷을 입히는 게 css고, javascript는 그 html를 동작하게, 중추 신경 역할을 한다.
🔍프론트엔드 개발자의 역할
- 디자인 및 레이아웃
- 사용자 경험 개선
- 백엔드와 연락
🔍IDE란?
통합 개발 환경(Integrated Development Environment)의 약어.
개발 하는데에 있어서 필요한 것들을 다 모아놓은, 소프트웨어 개발을 위한 종합적인 개발 도구를 제공하는 애플리케이션이다.
- 소스 코드 작성
- 코드 빌드
- 디버깅
VS code, IntelliJ, Eclipse 등 다양하게 존재하며 개발 생산성을 향상시키기 위해 사용한다.
'Coding > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 06. CSS 5가지 position 속성값 (0) | 2024.12.27 |
|---|---|
| [HTML/CSS] 05. CSS 요소 정렬과 배치 (0) | 2024.12.27 |
| [HTML/CSS] 04. CSS 박스 모델 (2) | 2024.12.26 |
| [HTML/CSS] 03. HTML에 CSS를 적용하는 3가지 방법 (0) | 2024.12.26 |
| [HTML/CSS] 02. 시맨틱 마크업 (Semantic Markup)이란? (2) | 2024.12.26 |
