Develop

21일차_Front(CSS-media query, 프레임워크 활용, JS-기초 문법) 본문

백엔드/KDT_Programmers

21일차_Front(CSS-media query, 프레임워크 활용, JS-기초 문법)

230801 2025. 4. 2. 02:15

안녕하세요 !

 

데브코스 21일차(5주 2일차) 입니다.

오늘은 CSS 마무리, JS 기초문법을 배웠습니다. 벌써 자스라니...! 

 

아 그리고, 어제 회고록을 작성하고 누웠을 때 들었던 생각이..

'이대로 하다간 아무것도 안되겠다..' 싶어서 저녁 이후 시간을 좀 더 알차게 활용하려 합니다.

상반기에는 자격증공부를 끼워넣어서 상부상조하게끔.. 치이진말고..

 

아무튼 오늘은 리눅스 기초 공부 성공!

내일은 정처기 실기도 간단히 훑어봐야겠습니다.

 

 

CSS

프레임워크 가져다쓰기

 

대표적인 CSS 프레임워크로는 Bootstrap과 Materialize가 있습니다.

오늘은 머터리얼라이즈에서 가져다 써보겠습니다.

 

https://materializecss.com

 

Documentation - Materialize

 

materializecss.com

 

 

접속해서 GET STARTED 를 누르면 다양한 방식(다운로드, CDN, npm 등)으로 사용하는 방법이 나와있습니다.

 

저는 CDN (Content Delivery Network) 방식을 이용해보겠습니다.

CDN 코드를 복사해서 프로젝트 HTML 파일의 <head> 부분에 넣어줍니다.

 

이제 컴포넌트를 가져다 쓰기위해서 좌측상단에 햄버거 메뉴를 눌러 원하는 항목을 검색해줍니다. (icon, table, navbar 등등.. )

예시로, navbar를 적용시켜보고 싶다면, 코드를 복사해서 부분에 넣어줍니다.

 

 

 

그리고 인텔리제이 HTML 파일 위에 뜨는 툴바를 이용해서 원하는 브라우저에서 실행할 수 있습니다. 

 

 

오늘 배운 Materialize를 활용해 개인 프로젝트에 간단한 반응형 페이지를 적용해봤습니다.

근데 reset.css 파일을 까먹고 나중에 연결하니 가져온 컴포넌트들이 질서가 깨짐...흑흑 더 이뻤는데 아쉽네요 (내일해야지..)

 

나중엔 원하는 모양대로 만들 수 있을 것 같아서 설렙니당 (이제 첫 걸음이지만) 

 

 

Java Script

자바 스크립트는 미지의 세계였는데 (기억해보니 AWS EC2 강의들을때 잠깐써보긴했음;)

오늘 수업이후로 자바와 비슷한점이 많다고 생각이 들었습니다.

 

자바스크립트 특징

  • 순수객체지향(모든것이 객체)
  • 타입추론 지원
  • 변수 선언 시 let 사용
    var 라는 변수도 있는데, es6 이전 버전에서 사용되었고, 변수 호이스팅이 가능해 의도치 않은 동작을 유발할 수 있기 때문에,  지금은 let 을 더 많이 쓴다고 합니다.
  • 상수 선언 시 const 사용
  • 호이스팅
    호이스팅이란, 아직 선언되지 않은 변수나 함수를 코드 상단으로 끌어올려 사용하는 자바스크립트의 동작 방식입니다. 어디서든 호출이 가능해 코드 구조의 유연성이 생기지만, 예상치 못한 값이 할당되거나 의도와 다른 동작을 유발할 수 있다는 단점도 있습니다.
  • 일치 연산자(===)
    ==동등연산자는 타입이 달라도 값 같으면 true를 반환 하고, ===일치연산자는 타입과 값 둘다 일치해야 true를 반환합니다.
  • Closure(클로저)
    함수안에서 함수를 사용할 때 바깥 함수의 변수를 기억하고 있는 상태로, 바깥 함수가 종료돼도 변수는 사라지지 않습니다. 주로 데이터 은닉, 상태저장, 콜백함수, 이벤트핸들러, 모듈패턴 등에 자주 쓰입니다.

 

 

 

오늘도 수고하셨습니다!

'백엔드 > KDT_Programmers' 카테고리의 다른 글

23일차_Front(JS-Fetch, DOM, API 연동 및 config.js 설정)  (0) 2025.04.04
22일차_Front(JS-Function, Callback, Closure, Constructor, this, Blocking vs Non-Blocking 등)  (0) 2025.04.03
프로그래머스 데브코스 웹백엔드 1개월차 회고  (3) 2025.04.01
20일차_Front(HTML-input, lable, datalist, CSS-selector, transform, display, position, flex 등)  (0) 2025.04.01
19일차_Annotation, Reflection, Front(HTML)  (0) 2025.03.31
'백엔드/KDT_Programmers' Related Articles more