[멋사12기] 심화 HTML, CSS, 기초 JS | 2주차 세션 및 과제 제출

 

 

2주차 세션

 

 

2주차 세션에서는 html, css 심화 개념과 자바스크립트에 대한 세션이 진행됐다.

 

먼저 지난 주에 배웠던 html, css를 점검하기 위해 레이아웃을 만드는 시험이 간단하게 진행됐다.

 

 

어려운 레이아웃은 아니었지만, 10분정도의 시간이 주어졌고, 과제에서 사용하지 않았던 새로운 방법으로 레이아웃을 만들어보려고 했는데 div를 묶어주는 section 하나에 height 비율을 빠뜨려서 시간 안에 완벽히 완성해내지는 못했다.

 

그렇지만 바로 문제를 찾아서 height을 부여했고, 레이아웃은 완성해냈다.

 

 

=> 레이아웃을 구성할 때는 큰 요소부터 구성해나가는 것이 좋다고 피드백을 들어서 먼저 구조를 만들었다.

다음으로 큰 요소부터 하나씩 css를 적용하기 시작했다. 큰 요소에는 고정 크기로 px단위를 이용해 크기를 지정해주었고, 내부 요소들은 비율을 활용해 자율적으로 본인의 크기를 갖게끔 코드를 작성해보았다.

 

 

완성한 코드는 맨 아래에 있는 깃허브 주소에서 확인 가능하다.

 

 

레이아웃 테스트

 

 

---

 

 

js 심화

 

 

1. 함수

: 논리적인 일련의 작업을 하는 하나의 단위

• 표현식 : function 키워드를 선두로 함수를 표현
• 선언식 : 변수에 할당하는 것처럼 함수의 이름을 변수에 할당하고 함수 작성

: 원하는만큼 함수 실행 반복

: return값이 있어야 값을 반환할 수 있다.

 

• 매개변수가 없는 함수 : 변수를 함수 내부에서 정의, 100번 실행 → 100번 같은 결과
• 매개변수가 있는 함수 : 외부에서 값을 전달받을 수 있다. → 외부 입력에 따라 값이 변함

 

2. 객체

: 자바스크립트 기본 타입

: 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합

→ 프로퍼티의 값으로 함수가 오면 = 메소드

 

 

3. DOM

: 문서객체모델, XML이나 HTML문서에 접근하기 위한 일종의 인터페이스

: 문서 내 모든 요소 정의하고 각각의 요소에 접근하는 방법 제공

 

 

4. const  vs  var, let

: const는 변수의 재할당이 불가하지만, var과 let은 변수를 재할당할 수 있다.

 

 

 

728x90

 

 

---

 

 

자바스크립트에 대해 더 심화적으로 배워볼 수 있었고, 차이점과 용도에 대해 확실하게 학습할 수 있었다.

 

 

2주차 과제로 1주차와 비슷하게 레이아웃을 구성하는 것이 주어졌다.

다만 심화적으로 미디어 쿼리를 이용해 반응형 레이아웃을 구성하는 과제였다.

 

 

반응형은 posistion과 display 등의 속성을 이용해 구현했고, html 구조를 다시 한번 복습하고 보완해볼 수 있어서 도움이 많이 됐다.

 

 

완성된 결과물은 다음과 같다.

 

먼저 심화적인 구조의 레이아웃을 간단하게 만들었으며, 다음으로 미디어 쿼리를 이용한 반응형 레이아웃도 만들어봤다.

 

 

레이아웃 A

 

 

 

반응형 레이아웃 1

 

반응형 레이아웃 2

 

 

 

 

마지막으로 세션과 과제를 진행했던 깃허브 주소를 올리고 글을 마치겠다.
https://github.com/BB545/likelion/tree/main/02_session