코드 상태 프런트엔드 2일차

코딩도 모르는 아마추어

오늘은 코드스테이츠 부트캠프 둘째 날입니다.

HTML의 기본 구조, 문법, 요소 등 “구조를 표현하는 언어”를 배웠습니다.

머릿속에서 상상하는 것을 컴퓨터나 사람이 읽기 쉬운 구조로 만들어야 하는 부분에 있다. 노력이 많이 들어간 것 같습니다!

1-1장. 웹 개발 이해

HTML, CSS, JavaScript 각각의 역할에 대해 알아봅시다!

예) 나는 개집을 짓기 위해 청사진을 그렸다. (하나)

벽의 색상과 재질에 대한 정보가 옆에 간단하게 쓰여 있었습니다. (2)

조금 더 예쁘게 꾸미고 싶어서 밤이 되면 자동으로 켜지는 에그전구를 설치했어요. (삼)

1. 개집을 짓기 위한 설계 도면을 그리는 것은 마크업 언어인 HTML의 역할에 가장 가깝다고 할 수 있습니다.

2. CSS는 화면, 종이, 사운드 또는 기타 미디어에서 요소를 렌더링하는 방법을 지정하는 스타일 시트 언어입니다. 벽의 색상과 재질에 대한 정보를 작성하는 것은 스타일 시트 언어인 CSS의 역할에 가장 가깝습니다.

3. JavaScript는 특정 조건에 따라 상호작용이 가능한 프로그래밍 언어입니다. 전구를 설치하고 밤에 자동으로 켜지는 알고리즘을 작성하는 것이 JavaScript의 작업에 가장 가깝습니다.

웹 개발을 개집 짓기에 비유하며 배웠습니다!

아무것도 모르는 초심자에게는 생소한 용어인 것 같지만 간단하게 비교해보면 조금 이해가 쉬웠던 것 같습니다.

HTML: 구조 / CSS: 스타일 / JavaScript: 상호 작용

1-2장. 비주얼 스튜디오 코드

Visual Studio Code란?

Visual Studio Code(이하 VScode)는 Microsoft에서 개발한 세계에서 가장 유명한 코드 편집기입니다. 프로그램, 웹 사이트, 웹 응용 프로그램 등을 만들 수 있습니다. 배운 코드를 실제로 작성할 수 있을 뿐만 아니라 개발자에게 필요한 다양한 기능을 제공하는 일종의 메모장이라고 생각하시면 됩니다.

비주얼 스튜디오 코드의 장점

macOS, Linux, Windows 등 OS와 상관없이 사용 가능합니다.

JavaScript, HTML 및 CSS를 편집할 수 있습니다.

다양한 확장 기능을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능합니다.

디버깅이 편리합니다.

무료로 사용할 수 있습니다.

2-1장. HTML 기본 구조 및 구문

HTML이란 무엇입니까?

HyperText Markup Language의 약자.

웹 페이지를 구성하는 마크업 언어

2-2장. 로그인 페이지 만들기

VScode를 사용하여 HTML 태그를 작성하여 간단한 로그인 페이지를 만들어 봅시다!

물론 실제 로그인 기능은 JavaScript나 CSS를 사용하지 않기 때문에 동작하지 않습니다

여러 사이트에 접속하여 로그인할 때마다 간단한 기능인 줄 알았습니다.

조잡한 로그인 페이지를 만들기 위해 생각보다 많은 태그를 사용하는 것이 신기했습니다.

사실 태그가 다 이해가 안가서 시간이 많이 걸릴것 같습니다..!

Chpanter2-3. 시맨틱 요소

시맨틱 요소란 무엇입니까?

HTML의 최신 버전인 HTML5에서는 시맨틱 웹이 강조되면서 여러 시맨틱 요소가 새롭게 만들어졌다.

시맨틱은 ‘의미 있는, 의미 있는’으로 해석할 수 있습니다. 즉, 요소를 의미 있게 사용할 수 있는 방법을 찾기 시작했습니다.

시맨틱 요소 중 하나

요소를 예로 들어 보겠습니다. 최상위 표제를 표현하는 데 사용되는 요소입니다.

요소를 사용할 때 브라우저는 큰 글꼴 크기를 적용할 뿐만 아니라 제목처럼 보이도록 위아래로 간격을 둡니다. 이와 같은 효과

요소, 요소에 CSS 속성을 추가하여

요소처럼 보이게 만들 수 있습니다. 하지만

요소를 사용할 때와 같은 의미적 가치가 없다고 할 수 있습니다.

의미 요소를 사용하기 전에 각 영역을 지정하기 위해

요소를 주로 사용했습니다. 결과적으로 하나의 웹 페이지

수십 개의 중첩된 요소

그것은 종종 지옥이었습니다.

시맨틱 요소를 사용하는 이유는 무엇입니까?

의미있는 요소를 사용하기 보다는

요소를 사용할 수 있지만 목적에 따라 스타일을 지정할 수 있는데 왜 시맨틱 요소를 사용하려고 할까요?

여기에 몇 가지 이유가 있습니다. 첫째, 검색 엔진은 의미론적 요소를 더 좋아하기 때문입니다.

네이버, 구글 등은 모두 자체 검색 엔진을 가지고 있습니다. 키워드를 입력하고 검색하면 각 웹 페이지를 방문하여 해당 키워드가 포함되어 있는지 확인하고 결과를 표시합니다. 그러나 검색 엔진은 웹 페이지를 방문할 때 의미론적 요소를 중요한 키워드로 간주합니다. 즉, 검색 결과의 상단 노출은 의미 요소에 포함된 의미에 따라 결정될 수 있다. 둘째, 여러 개발자가 함께 작업할 때

의미 있는 코드 블록을 찾는 것이 요소를 탐색하는 것보다 훨씬 더 편리하기 때문입니다. 뿐만 아니라 요소 내부에 채워질 데이터 유형도 예측하기 쉽습니다.

따라서 HTML 요소를 작성할 때 작성 중인 데이터를 가장 잘 설명하는 요소를 항상 고려해야 합니다.

의미 요소의 유형

시맨틱 요소에는 많은 유형이 있지만 일반적으로 사용되는 몇 가지를 살펴보겠습니다.

• 
  
  : 독립적이고 독립적인 콘텐츠를 지정합니다.
• 
  
• 
  
• 
  
  : 일반적으로 페이지 또는 해당 섹션의 상단에 있으며 일반적으로 사이트의 제목을 포함합니다. 선택적으로 상단 표시줄, 검색창 등을 내부에 배치할 수 있습니다.
•