상세 컨텐츠

본문 제목

[코드스테이츠 FE 45기] _2023.04.11 _ Day 1

프론트앤드 부트캠프/Day

by 코린’s 2023. 4. 11. 14:56

본문

728x90
반응형

코딩 빔~!!

 

 

오늘은 코드스테이츠 부트캠프 1일 차이다.

오전 9시부터 6시까지 OT와 기본 챕터 관련 강의를 듣게 되었다.

아래에

오늘 강의를 듣고 OT를 들었던 과정을 정리했다~!!

 

오전 9 :00 ~ 11 : 00

45 기수 OT -1부

1부에서는 약 6개월 의 부트캠프 과정 중 앞단 3개월에 관하여 설명해주었다.

 

약 3개월 ~ 4개월 동안은 기초 학습 

이론 + 과제 + 퀴즈 형식의 학습 위주로 진행된다고 한다.

 

주로 HTML, CSS, 자바스크리트 강의라고 생각하면 될 것 같다.

 

또 자기주도 학습이란 무엇이고 어떤 식으로 학습이 진행되는지 

설명을 들었다.

오전 11 : 00 ~ 12 :00 

강의 수강

학습 툴 설치 및 준비

오후  1 : 00 ~ 1:30 

강의 수강

Unit1

Chapter1.

메타인지 학습 

 

메타인지: ‘생각에 관한 생각’

 

- 이해도 자가 점검 리스트 작성

- 자기 주도적 학습 가이드 

- 메타인지적 활동

 

개인 블로그에 회고 작성하기!

 

현재 느낀 감정 표현

오늘 학습 내용 중  떠올릴 수 있는 단어 모두 나열

나열한 단어를 사용하여 오늘의 학습 내용을 설명

설명하기 어려운 단어 파악

파악한 단어 재 확인 및 공부

오후  1 : 00 ~ 1:30 

강의 수강

Unit1

Chapter2.

Pair Programming

페어 프로그래밍은 두 명의 프로그래머가 하나의 컴퓨터를 공유하여 작업하는 소프트웨어 개발 기술입니다. 두 명의 프로그래머는 번갈아가며 타이핑하고 생각하며, 한 명은 코드를 작성하는 드라이버 역할을 하고 다른 한 명은 코드를 검토하고 피드백을 제공하는 내비게이터 역할을 합니다.

 

  1. 개선된 코드 품질: 두 명의 사람이 동시에 작업하므로 코드가 오류가 없고 잘 작성될 가능성이 높습니다.
  2. 지식 공유: 페어 프로그래밍은 두 명의 프로그래머 간에 지식을 공유할 수 있게 해 줍니다. 이는 지식 실로를 줄이고 팀원이 서로의 업무를 이어받기 쉽게 만들 수 있습니다.
  3. 위험 감소: 두 명의 프로그래머가 서로의 작업을 검토하므로 실수와 버그의 위험을 줄일 수 있습니다.
  4. 창의성 증대: 함께 작업하는 것은 문제 해결에 대한 새로운 아이디어와 접근 방법을 자극하는 데 도움이 될 수 있습니다.
  5. 의사소통 개선: 페어 프로그래밍은 두 명의 프로그래머 간에 지속적인 소통을 요구하기 때문에 전반적인 팀 의사소통을 개선하는 데 도움이 됩니다.

 

Chapter3.

의사코드

의사코드란 컴퓨터 프로그램을 작성하기 전에 사용되는 알고리즘을 일반적인 언어로 설명한 것입니다. 즉, 프로그램의 로직과 동작 방식을 일반적인 언어로 설명한 것입니다. 의사코드는 실제 프로그래밍 언어와는 다르게 특정한 문법이나 규칙이 없으며, 작성자가 이해하기 쉽게 작성됩니다.

 

1. 숫자 5를 변수 x에 할당한다.
2. 숫자 3을 변수 y에 할당한다.
3. x와 y를 더한 결과를 변수 z에 할당한다.
4. 변수 z의 값을 출력한다.

 

Chapter4.

개발자 도구 사용법

Console

크롬 콘솔(Chrome console)은 구글 크롬 브라우저에서 제공되는 개발자 도구 중 하나로, 웹 페이지를 디버깅하거나 자바스크립트 코드를 실행하고 테스트하는 데 사용됩니다. 크롬 콘솔은 브라우저의 DOM(Document Object Model) 구조, CSS 스타일, 네트워크 요청 및 응답, 자바스크립트 콘솔, 에러 메시지 및 디버깅 도구 등 다양한 기능을 제공합니다.

 

Elements

Elements(요소)는 웹 페이지의 HTML 문서에서 각각의 요소들을 나타내는 용어입니다. HTML 요소는 웹 페이지를 구성하는 블록을 형성하며, 텍스트, 이미지, 비디오, 입력 폼 등을 포함할 수 있습니다. 예를 들어, <div> 요소는 웹 페이지에서 블록을 만들고, <p> 요소는 문장을 만듭니다.

 

Elements 패널은 브라우저 개발자 도구에서 제공되는 패널 중 하나로, 웹 페이지의 HTML 문서의 요소들을 탐색하고, 스타일을 조정하거나 수정하는 데 사용됩니다. Elements 패널을 사용하면 HTML 요소를 선택하고, 요소의 속성을 검사하거나 수정할 수 있으며, 요소를 드래그하여 위치를 변경하거나 삭제할 수도 있습니다.

 

Elements 패널에서는 또한 CSS 스타일을 미리 보기 하거나 수정할 수 있습니다. 선택한 요소의 스타일 속성을 확인하거나, 스타일을 수정하거나, 새로운 스타일을 추가할 수 있습니다. 또한 Elements 패널에서는 자바스크립트 코드를 실행하여 동적으로 HTML 요소를 생성하거나 수정할 수도 있습니다. Elements 패널은 웹 페이지 개발자가 HTML, CSS 및 자바스크립트 코드를 디버깅하고 수정하는 데 매우 유용한 도구 중 하나입니다.

 

Chapter5.

Agora States

아고라스테이츠는 학습과 관련한 질문 또는 질의를 통해 코드스테이츠 교육 엔지니어와 소통하고 동기들과 함께 의견을 교환할 수 있는 광장입니다. 🏛️

모르고 해버린 다음 강의 ... / 맛 보기 HTML

HTML 기초 개요

HTML(HyperText Markup Language)은

JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어입니다.

 

학습 목표

  • HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
  • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
  • 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
    • <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
    • <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
    • <input> 요소에 type을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
  • id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
  • HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
  • 시맨틱 요소가 무엇인지 설명할 수 있다.
  • 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
  • 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.

HTML 

문서의 틀을 만드는 뼈대 역할을 하는 언어입니다.

  • 기본적으로 텍스트 위주 / Tag들의 집합
  • html 확장자 사용
  • Tag : 부등호 (<>)로 묶인 HTML의 기본 구성 요소

Tree structure _ 트리 구조

  • HTML 문서 시작
    • html
      • head
        • title : Page title
      • body
        • h1 : Hello world
        • div : Contnts here
          • span : Here too!

 

HTML 트리 구조 참고 이미지 (이미지 출처: w3schools.com)

 

아래는 HTML에서 가장 일반적으로 사용되는 태그들입니다.

  • <html>: HTML 문서의 루트 요소를 나타냅니다.
  • <head>: 문서의 메타데이터를 정의합니다.
  • <title>: 문서의 제목을 정의합니다.
  • <body>: 문서의 본문을 정의합니다.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 나타냅니다. 숫자가 작을수록 큰 제목을 나타냅니다.
  • <p>: 단락을 나타냅니다.
  • <a>: 하이퍼링크를 만듭니다.
  • <img>: 이미지를 삽입합니다.
  • <ul>, <ol>, <li>: 목록을 나타냅니다. <ul>과 <ol>은 각각 순서 없는 목록과 순서 있는 목록을 나타내며, <li>는 각 목록 항목을 나타냅니다.
  • <table>, <tr>, <td>, <th>: 표를 나타냅니다. <table>은 표 전체를, <tr>은 행을, <td>와 <th>는 셀을 나타냅니다.
  • <form>, <input>, <label>, <button>: 폼을 만듭니다. <form>은 폼 전체를, <input>은 입력 필드를, <label>은 입력 필드의 라벨을, <button>은 버튼을 나타냅니다.

이 외에도 많은 다른 태그들이 있습니다. HTML 문서의 목적에 따라 적절한 태그를 사용해야 합니다.

 위의 태그를 사용한 예시 코딩

<!DOCTYPE html>
<html>
  <head> //문서의 본문을 정의합니다.
    <title>HTML Example</title>  // 문서의 제목을 정의합니다.
  </head>
  <body>
    <h1>Welcome to my Website</h1>  // 제목을 나타냅니다. 숫자가 작을수록 큰 제목을 나타냅니다.
    <p>This is a paragraph of text.</p>
    <a href="https://www.google.com/">Click here to go to Google</a>
    <br>
    <img src="image.jpg" alt="Image description">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

 

728x90
반응형

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

[코드스테이츠 FE 45기] _2023.04.18 _ Day 6  (0) 2023.04.18
[코드스테이츠 FE 45기] _2023.04.17 _ Day 5  (0) 2023.04.17
[코드스테이츠 FE 45기] _2023.04.14 _ Day 4  (0) 2023.04.15
[코드스테이츠 FE 45기] _2023.04.13 _ Day 3  (2) 2023.04.13
[코드스테이츠 FE 45기] _2023.04.12 _ Day 2  (0) 2023.04.12

관련글 더보기

티스토리툴바