- IDE
- 주요 기능으로는 코드 편집기, 디버거, 빌드 자동화 도구, 프로젝트 관리 도구, 소스 코드 버전 관리 시스템 등이 있습니다. IDE를 사용하면 개발자는 하나의 환경에서 코드 작성, 디버깅, 컴파일, 테스트, 배포 등의 작업을 편리하게 수행할 수 있습니다.
- 대표적인 IDE로는 Eclipse, IntelliJ IDEA, Visual Studio 등이 있습니다. 각각의 IDE는 특정 언어나 프레임워크를 위해 최적화되어 있으며, 개발자는 자신이 사용하는 언어나 프레임워크에 맞는 IDE를 선택하여 사용할 수 있습니다.
- IDE는 "Integrated Development Environment"의 약자로, 통합 개발 환경을 의미합니다. 개발자가 소프트웨어를 개발할 때 사용하는 다양한 도구와 기능을 한 곳에 통합하여 제공하는 소프트웨어입니다.
- Head 태그
- 일반적으로 <head> 태그 내에는 다음과 같은 요소들이 포함됩니다:
- <title>: 문서의 제목을 정의합니다. 웹 브라우저의 제목 표시줄이나 북마크에서 사용됩니다.
- <meta>: 메타 데이터를 정의합니다. 주로 문자 인코딩, 뷰포트 설정, 검색 엔진 최적화 등에 사용됩니다.
- <link>: 외부 리소스를 문서에 연결합니다. 주로 스타일 시트나 아이콘 파일과 같은 리소스를 포함합니다.
- <style>: 문서에 직접 스타일을 적용하는 CSS 코드를 정의합니다.
- <script>: 자바스크립트 코드를 포함합니다. 외부 스크립트 파일을 로드하거나 내부 스크립트를 작성할 수 있습니다.
- 기타: 기타 메타 데이터 및 설정 요소를 포함할 수 있습니다.
- <head> 태그는 HTML 문서의 시작 부분에 위치하며, 문서의 메타 데이터 및 다양한 설정을 포함하는데 사용됩니다. 웹 브라우저에게 문서의 제목, 스타일 시트, 스크립트 파일, 문자 인코딩 및 기타 중요한 정보를 제공합니다.
- 일반적으로 <head> 태그 내에는 다음과 같은 요소들이 포함됩니다:
- semantic 태그
- <header>: 문서나 섹션의 머리말을 정의합니다. 일반적으로 로고, 제목, 검색 폼 등을 포함합니다.
- <nav>: 네비게이션 링크 그룹을 정의합니다. 주로 웹 사이트의 메뉴나 내비게이션 바를 나타냅니다.
- <main>: 문서의 주요 콘텐츠를 정의합니다. 페이지의 핵심 내용을 포함하며, 한 문서에는 하나의 <main> 요소만 있어야 합니다.
- <section>: 문서의 섹션을 정의합니다. 일반적으로 콘텐츠의 그룹을 나타내며, 주제나 목적에 따라 구분됩니다.
- <article>: 독립적인 콘텐츠 조각을 정의합니다. 블로그 포스트, 뉴스 기사, 포럼 게시물 등과 같이 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 나타냅니다.
- <aside>: 주요 콘텐츠와는 관련이 적은 부가 정보를 정의합니다. 주로 사이드바나 콘텐츠 옆에 배치되는 광고, 사이트 소개, 관련 링크 등을 포함합니다.
- <footer>: 문서나 섹션의 바닥글을 정의합니다. 보통 저작권 정보, 연락처, 사이트 링크 등이 포함됩니다.
- Semantic HTML 태그들은 웹 페이지의 구조와 콘텐츠를 의미론적으로 정의하고 설명하는 역할을 합니다. 이러한 태그들은 웹 페이지를 작성할 때 적절한 의미를 부여하여 가독성을 향상시키고 검색 엔진이나 스크린 리더 등의 보조 기술이 콘텐츠를 이해하는 데 도움을 줍니다. 몇 가지 주요한 semantic 태그들과 그 의미는 다음과 같습니다:
- 코딩
- 직접 해보기 & 협업
- 이미 구현된 기술을 조립해서 원하는 서비스 만들기
- 모를땐 검색하자
- 메타인지
- 버그에 익숙해지자
- 컴퓨터
- 0과 1로 이루어진 세계
- 분해 : 작은 문제로 분해
- 패턴인식 : 패턴 파악
- 추상화
- 알고리즘 : 문제해결
- 사용자 -> 컴퓨터 언어 -> 기계어(컴파일러) -> 실행
- 웹
- 여러 분야 중 하나
- 프론트엔드 : HTML, CSS, JavaScript
- 백엔드 : 서버, 데이터베이스
- API : 서로 다른 소프트웨어가 소통하기 위한 통신규약
- 웹페이지 참고자료
Dribbble - Discover the World’s Top Designers & Creative Professionals
I only know one Elton John joke, it's a little bit funny... 🎹✨
dribbble.com
- 프론트엔드
- HTML
- head 태그 : 메타정보
- body 태그 : 내용
- CSS : 디자인
- JavaScript : 동적 요소
- 역할
- 디자인 및 레이아웃
- 사용자 경험 개선(UX/UI)
- 백엔드, 디자이너, 기획자와 소통
- HTML
- VS code
- 장점 : 사용자 정의 확장앱 제공
- 유용한 확장앱
- korean
- Prettier - Code formatter
- 설정 -> formatter 검색 -> Editor에서 설치한 것 설정
- Editor : Format on Save 설정 체크
- material icon theme
- HackTheBox
- in your face
- git graph
- open in browser
- GitLens
- indent-rainbow
- html 태그
- <div> : 아웃라인 태그, 문단
- <header> : 아웃라인 태그, 문단
- <span> : 주로 텍스트 작성 시 사용, 인라인 태그
- 태그 검색
- html : mdn
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org
'슈퍼코딩 > 기초' 카테고리의 다른 글
| 2024.04.08(월) 슈퍼코딩 신입연수원 2주차 Day 1 후기 - 타이머 구현 (0) | 2024.04.08 |
|---|---|
| 2024.04.05(금) 슈퍼코딩 신입연수원 1주차 Day 5 후기 - JavaScript (0) | 2024.04.05 |
| 2024.04.04(목) 슈퍼코딩 신입연수원 1주차 Day 4 후기 - 당근클론 화면 구현 (0) | 2024.04.05 |
| 2024.04.03(수) 슈퍼코딩 신입연수원 1주차 Day 3 후기 - CSS (0) | 2024.04.05 |
| 2024.04.02(화) 슈퍼코딩 신입연수원 1주차 Day 2 후기 - HTML (0) | 2024.04.05 |