07.29.월

오늘은 웹 개발의 이해 중간평가가 있었다.

오늘 부터 쭉 한다는데 잘 할 수 있을까?

 

나 진도 못따라가서 자바스크립트에 발목잡혀 있는 중인데..?

하나 빠져먹고 가는 것보다

하나를 어느정도 제대로 아는게 더 좋을 것 같아

내 속도에 맞춰 하고 있는 중

이지만 많이 밀렸...

 

하지만, 오늘의 문제는 나름 괜찮았다!

모르는건 찾아 보며 답을 했다.

따로 여기에 정리해야지

---

무셩

 

1. 시멘틱 태그에 사용되는 7가지 종류

 

<header> : 문서나 섹션의 머리말

                   제목, 로고, 네비게이션 링크 등

<nav> : 네비게이션 링크 모음

             사이트의 주요 메뉴나 링크 모음을 감싸는 데 사용

<section> : 문서의 독립적인 섹션

                   문서의 큰 부분을 나누는데 사용

<article> : 독립적으로 구분 가능한 문서

                 블로그 글, 뉴스 기사 등을 감싸는데 사용

<aside> : 문서의 주요 내용과 간접적으로 관련된 콘텐츠

                사이드바, 광고, 인용구 등

<footer> : 문서나 섹션의 바닥글

                 저작권 정보, 연락처 정보 등

<main> : 문서의 주요 콘텐츠

문서의 중심 내용을 감싸며, 단일 존재

 

2. HTML에서 데이터를 입력받아 전송할 시

사용하는 태그와 속성값, 전송법 2가지

 

A

태그 : <from> - 데이터를 입력하고 전송할 수 있도록 한다

속성값 : method - 데이터 전송 방법을 지정,

action - 데이터를 전송할 url 지정

전송방법 : get - url에 쿼리스트링으로 데이터를 추가해 서버에 전송

- 데이터 조회 시 주로 사용,

post - 요청 본문에 데이터를 포함해 서버에 전송

- 데이터를 생성하거나 수정할 때 주로 사용

- url엔 데이터가 포함 X

ex)

<!-- GET 방식의 폼 -->

<form action="/submit-get" method="get">

<label for="name">Name:</label><input type="text" id="name" name="name">

<label for="email">Email:</label> <input type="email" id="email" name="email">

<button type="submit">Submit (GET)</button> </form>

<!-- POST 방식의 폼 -->

<form action="/submit-post" method="post">

<label for="username">Username:</label><input type="text" id="username" name="username">

<label for="password">Password:</label> <input type="password" id="password" name="password">

<button type="submit">Submit (POST)</button>

 

3. 자바스크립트의 변수 3가지

 

A

변수의 값을 변경하지 않는 키워드 : const

블록스코프에서만 유효한 키워드 : let

함수스코프에서만 유효한 키워드 : var

 

4. 이벤트 객체의 리스너를 선언한 요소,

이벤트가 실제 발생된 요소를 뜻하는 단어 2가지

 

A

이벤트 리스너가 바인딩된 요소 : currentTarget

- 현재 처리되고 있는 대상 요소를 가리킨다.

이벤트가 실제 발생된 요소 : target

- 이벤트가 처음 발생한 요소를 가리킨다.

 

5. CSS 속성 중 가로, 세로 방향으로 정렬하는 display 속성

끝부분의 여백 없이 보여지는 속성값을 순서대로 작성

 

A

속성값 : flex

자식 요소들의 배치에 관한 속성값 : space-between

.items { display: flex;

justify-content/align-items: space-between;}

 

6. CSS에서 다음 조건에 맞는 내용 작성

a. max-width라는 이름을 가진 변수를 1140px로 설정 b. 변수를 가져와서 사용할 수 있는 속성값을 하나 선택하고 속성에 변수를 통해 값을 부여해주세요. (선택자는 작성하지 않고 a, b에 해당되는 내용만 작성해주세요.)

 

A

a. :root { --max-width: 1140px; }

b. .container { max-width: var(--max-width); }

 

7. 미디어 쿼리에서 브레이크 포인트를 768px로 설정

그 이상인 경우 적용되는 CSS값을 부여하고 싶을때의

미디어 쿼리를 선언

 

A

@media (min-widht: 768px) { 768px 이상인 경우에 적용되는 CSS 속성값 }

 

8. CSS grid 속성을 이용해

행마다 동일한 길이를 가진 3개의 요소를 할당하기 위한 속성값 작성

(display속성과 grid의 요소의 크기를 정해주기 위한 속성을 각각 작성해주세요.)

 

A

행마다 동일한 길이의 요소 3개 = 가로줄 마다 동일한 길이의 요소 3개 = 가로가 3개

.items { display: grid;

grid-template-columns: repeat(3, 1fr); }

 

9. 비동기 처리 방식에서 반환하는 객체가 Promise라고 할때, Promise를 처리하기 위해서 사용하는 방법을 2가지 작성해 주세요. (체이닝 방식에 의해 처리할때의 키워드 2가지 이상, 동기 방식으로 처리할때 키워드 2가지 작성)

 

A

1. 체이닝 방식

- then : Promise가 성공했을 때 호출되는 콜백 함수 지정

- catch : Promise가 실패했을 때 호출되는 콜백 함수 지정

2. 동기 방식

- async : 비동기적으로 함수 실행,

awiait을 사용해 Promise가 해결될 때까지 대기 시킴

- await : Promise가 해결될 때까지 대기 후 결과 값 반환

 

10. 비동기 처리 방식에서 반환하는 객체가 Promise라고 할때, Promise를 처리하기 위해서 사용하는 방법을 2가지 작성해 주세요. (체이닝 방식에 의해 처리할때의 키워드 2가지 이상, 동기 방식으로 처리할때 키워드 2가지 작성)

 

A

try, catch

 

11. 자바스크립트에서 동적으로 요소를 변경하거나 이벤트 등의 발생을 위해 접근하는 것으로 HTML문서의 태그(노드) 들을 트리 형태로 구조화 한 것을 뜻하는 용어를 작성해주세요.

 

A

DOM

 

12. 이벤트의 발생과정은 3가지 단계가 있습니다. 3가지 단계를 순서대로 작성해주세요.

 

A

1. 캡처링 단계

부모요소에서 자식요소로 이벤트 전파

2. 타겟 단계

이벤트가 목표 요소에서 처리

3. 버블링 단계

목표 요소에서 부모요소로 이벤트 전파

---

모르는게 꽤 많은 걸,,,ㅜ