FE | CSS, JS 기초

728x90

RWD(Responsive Web Design)

반응형 웹 디자인을 위해 알아두면 좋은 몇 가지 태그가 있다.

meta 태그

viewport(html)

웹 페이지의 보이는 영역의 크기 등을 조절할 수 있는 속성이며, meta태그 내에 inline형식으로 선언한다.

Viewport는 이름에서 유추할 수 있듯 사용자에게 보이는 영역을 뜻하는데, meta태그의 속성에서 사용자에게 보이는 영역에 대해 설정할 수 있다.

특히, 뷰포트의 크기에 관한 설정을 할 수 있다.

뷰포트의 기본 크기나 크기(기종)에 따른 웹 디자인을 하는데 사용할 수 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag

Viewport meta tag - HTML: Hypertext Markup Language | MDN

이 문서에서는 "viewport" <meta> 태그를 사용하여 뷰포트의 크기와 모양을 제어하는 방법에 대해 설명합니다.

developer.mozilla.org

@media(CSS)

뷰포트의 크기에 따라 웹 페이지의 요소들이 정렬되는 등 유동적인 배치를 하는 반응형 웹 디자인을 하는데 사용하는 쿼리이다.

CSS 내에서 동작하며, 기본 구문은 다음과 같다.

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

media-type에 페이지 종류(일반적인 페이지 - screen, 인쇄 화면 - print 등)를 설정할 수 있고, media-feature-rule 부분에 크기에 관한 퀴리(max-width : 767px) 등을 넣을 수 있다.

CSS 문법

flex와 grid

예전에 참고했던 블로그에 정리가 잘 되어있어서 참고하면 좋을 것 같다.

flex

간단하게 정리하면 display:flex; 로 선언하며 웹페이지 구성 요소들을 유연하게 배치할 수 있도록 도와준다.

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

studiomeal.com

grid

역시 간단하게 정리하면 display:grid; 등으로 선언하며 flex의 유연함과 html태그인 table 태그의 깔끔(?)함을 합친 느낌의 속성이다. flex보다 좀 더 기능이 많은 것 같다.

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

studiomeal.com

bootstrap

HTML + CSS + JS의 결합된 라이브러리이다. 프론트 측에서 작동하는 프레임워크라고 볼 수 있으며, CDN(Content Delivery Network) 방식으로 사용할 수 있다.

CDN이란?

https://aws.amazon.com/ko/what-is/cdn/

CDN이란 무엇인가요? - 콘텐츠 전송 네트워크 설명 - AWS

콘텐츠 전송 네트워크(CDN)의 주 목적은 대기 시간을 줄이거나 네트워크 설계로 인해 발생하는 통신 지연을 줄이는 것입니다. 인터넷의 글로벌하고 복잡한 특성으로 인해 웹 사이트(서버)와 사용

aws.amazon.com

JavaScript 개요 및 기본

자바와 자바 스크립트 차이가 뭘까?

	JAVA	JavaScript
용도	주로 서버 측 애플리케이션, 안드로이드 앱, 대규모 시스템 및 기업용 애플리케이션을 개발	주로 웹 브라우저에서 동적인 웹 페이지를 만들기 위해 사용. Node.js와 같은 런타임 환경을 통해 서버 측 개발.
언어 유형	정적으로 타입이 지정된 객체 지향 프로그래밍 언어 컴파일 후 JVM(Java Virtual Machine)에서 실행	동적으로 타입이 지정되고, 프로토타입 기반의 객체 지향 언어이며, 스크립트 언어
실행 환경	JRE(Java Runtime Environment) 또는 JDK(Java Development Kit)가 설치된 환경에서 실행	웹 브라우저나 Node.js와 같은 런타임 환경에서 실행
비동기성	동기적으로 동작하며, 멀티 스레딩을 통해 비동기 작업을 처리할 수 있음.	비동기 작업을 지원하는데, 콜백(callback), 프로미스(promise), async/await와 같은 기능을 활용하여 비동기 코드를 작성 가능.
문법	C++에서 영감을 받아 만들어진 문법을 갖고 있음. 세미콜론으로 문장을 종료하고, 중괄호로 코드 블록을 구분	문장 끝에 세미콜론을 붙이지 않아도 되며, 함수는 function 키워드를 사용하여 정의
타입 시스템	적 타입 시스템을 사용하여 컴파일 시간에 타입을 확인	동적 타입 시스템을 사용하며, 실행 중에 변수의 타입이 동적으로 결정

컴포넌트란?

구성요소, 화면을 만들 때 각각의 요소(헤더, 푸터 등)를 조립하여 웹페이지를 완성할 수 있도록 각각 구성한 요소이다.

네트워크의 기초에 대해서도 공부했는데 나중에 찬찬히 살펴보면서 정리해봐야겠다.