[Frontend] Media Query & Bootstrap

Chapter #4 태그를 표현하는 CSS와 Advanced CSS

 

Section3. 미디어 쿼리 Media Query

 

✴︎ 미디어 쿼리 개요

: 미디어 쿼리는 미디어 및 화면의 크기에 따라 다른 스타일시트가 적용되도록 지원

✴︎ 사용 방법

: 어디에 작성하는 것이 좋은지를 결정하는 미디어 쿼리 작성 위치와 구문을 작성하는 방법을 알고 있어야 함

: CSS로 구현되고, CSS 구문들 간의 순서를 알고 있어야 효율적으로 기술 가능

: 태그들에 공통적으로 적용할 내용을 기술, 특정 태그에만 적용되는 스타일을 기술

: 마지막으로 미디어 쿼리 기술

• 작성 위치

: HTML 페이지에 <link> 태그를 사용해서 기술하는 방법과, CSS 파일에 미디어 쿼리 구문을 추가하는 방법

→ HTML 페이지에 기술하는 방법 : 화면의 크기에 다라서 각각 다른 CSS 파일을 적용할 때 사용

→ CSS 파일에 미디어 쿼리 구문을 추가하는 방법 : 여러 화면 크기에 대응하는 미디어 쿼리가 각각 필요해서 여러개의 미디어 쿼리를 만들때 사용

• 구문 작성 방법

: 반응형 웹을 구현할 때는 screen을 사용 → @media screen으로 시작

: 조건을 추가해서 사용

@media screen and (조건 추가)...

: 추가할 조건에는 화면의 너비, 높이, 색, 격자 등의 다양한 형태에 적용

 

Section4. Advanced CSS의 추가 기능

 

✴︎ Advanced CSS 개요

: 스타일 시트의 최신 표준, 초기의 버전들과도 완벽하게 호환

: 현재의 CSS → 기존의 CSS + Advanced CSS(추가된 신기능)

 

✴︎ 테두리와 배경

• 테두리 : 영역을 갖는 특정 태그에 둥근 모서리를 지정하거나 그림자 효과 등을 주어 입체감을 줄 수 있음

• Border-radius 속성

: 영역을 갖는 태그에 둥근 모서리를 지정

• Border-shadow 속성

: 영역을 갖는 태그에 그림자 효과를 지정

• Advanced CSS의 색상

: 기존의 색상 및 투명도가 추가된 RGBA와 HSLA 색상을 사용할 수 있음

• Border-image 속성

: 테두리에 이미지를 사용할 수 있음

• 배경

• 배경 이미지 중첩

: 여러 배경 이미지를 중첩해서 표현할 수 있음

: 여러 배경 이미지를 중첩할 대는 각 속성에 여러 이미지의 값을 나열

: 이미지의 위치나 반복 여부도 추가한 이미지 순서대로 속성 값을 주어서 나열

• Background-size 속성

: 배경 이미지의 크기를 조절

 

✴︎ 텍스트 효과 : Text-shadow

: 글자에 그림자 등의 효과를 주어 이미지를 사용하던 기능을 대체

: 이미지를 로딩하는 것보다 빠른 속도로 웹 페이지를 서비스할 수 있음

: Box-shadow와 비슷한 효과

 

✴︎ 그래디언트 : Linear-gradient, Radial-gradient

: 둘 이상 색상간의 변환을 지원, 이미지 사용을 줄일 수 있어서 웹 페이지를 빠르게 서비스 가능

: 선형과 원형, 두개의 타입으로 제공

 

✴︎ 트랜스 폼 : Transform

: 개체나 이미지의 이동, 회전, 확대/축소, 왜곡 등의 효과를 제공

• Translate() : 이동

: 태그를 지정한 픽셀만큼 가로만, 세로만 또는 가로세로 모두 이동

• Rotate() : 회전

: 지정한 각도만큼 회전

• Scale() : 확대/축소

: 주어진 값에 따라 태그를 지정한 크기만큼 확대하고 축소

• Skew() : 왜곡

: 지정한 각도 값을 가지고 개체를 왜곡

 

✴︎ 트랜지션 : Transition

: 어떤 형태에서 다른 형태로의 변환을 주는 기능

: 그 형태로 변환될 때의 지속 시간을 기술해야함

 

✴︎ 애니메이션 : @keyframes, Animation

: 개체나 이미지 등에 움직임 효과를 주는 것, 기존의 JavaScript나 Flash 등에서 하던 작업을 대체

 

✴︎ 필터 : Filter

: 이미지 등에 사진에서 사용하는 블러, 밝기 조절, 세피아와 같은 필터 기능을 줄 때 사용

• Blur(px)

: 퍼져보임

• Brightness(%)

: 밝기(명도)를 지정

• Contrast(%)

: 대비를 지정

• Drop-shadow(h-shadow v-shadow blur color)

: 그림자를 지정

: Box-shadow와 유사

• Grayscale(%)

: 회색조를 지정

• Hue-rotate(deg)

: 색도를 지정

• Invert(%)

: 전도를 지정

• Opacity(%)

: 투명도를 지정

• Saturate(%)

: 채도를 지정

• Sepia(%)

: 적갈색을 지정

 

✴︎ 이미지 스타일

• 라운드 이미지(Round Image)

: Border-radius 속성의 값은 %로도 지정 가능

• 썸네일 이미지(Thumbnail image)

: 모바일 웹 사이트에서는 화면의 크기가 작아서 원본 이미지가 제대로 표현되지 못하는 점을 보완하기 위해, 이미지를 클릭하면 원본 이미지가 별도의 창에 표시되는 것

• 반응형 이미지(Responsive Images)

: 화면의 크기에 따라 최적의 이미지 크기를 제공

• 이미지에 텍스트 추가

: Position 속성과 Top, Bottom, Left, Right 속성을 결합해서 위치를 지정하고 추가

• 폴라로이드 이미지

: Box-shadow 속성을 사용해 폴라로이드 사진과 같은 느낌을 주는 이미지 생성 가능

 

✴︎ 웹 폰트

: Advanced CSS에서 추가된 것

: 사용자의 컴퓨터상에 폰트를 다운로드 하지 않아도 해당 폰트를 사용 가능

: @font-face로 사용할 폰트명과 폰트파일명을 정의

@font-face { // 웹 폰트 정의
font-family: notoFont; // 폰트명 정의
srcL url(../font/NotoSansCJKkr-Black.otf); // 사용할 폰트 파일명
}

p { // 정의된 웹 폰트 사용
font-family:notoFont; // 사용할 폰트명
}

 

✴︎ 웹 폰트

: 신문과 같은 텍스트의 다단을 쉽게 사용 가능

 

Section5. 부트스트랩 Bootstrap

 

✴︎ 부트스트랩?

• HTML, CSS, JavaScript 반응형 웹 사이트를 쉽게 작성할 수 있도록 해주는 무료 프레임워크

✴︎ 사용법과 기본 기능

• 사용법1.

: getbootstrap.com 에서 부트스트랩을 다운받아 웹 애플리케이션 프로젝트에 추가하는 방법

• 사용법2.

: 부트스트랩 CDN을 HTML 페이지에 추가하는 방법

✴︎ 그리드 시스템

• 12개의 칼럼을 필요에 따라 합쳐서 모양을 구현

✴︎ 색상, 이미지, 버튼

• 색상

: 색을 통해 의미를 아는 방식으로 제공

: muted - 어떤 기능이 꺼져 있는 것을 의미

: danger - 위험을 의미

: class의 속성 값으로 "text-색상의미"

• 이미지

: 라운드 이미지, 썸네일 이미지, 이미지 배치 방향, 반응형 이미지를 쉽게 작성할 수 있는 class 속성 값을 제공

• 버튼

: btn, btn과 btn-색상 의미를 같이 사용해서 버튼을 표현

✴︎ 주요 기능

• 캐러셀

: 특정 태그가 자동으로 슬라이딩되면서 다음 이미지를 보여주는 것을 회전하면서 반복하는 기능

Ex) 메인 화면에서 사이트의 주요내용을 슬라이딩하며 보여줄 때 사용 → 뉴스

• 이미지 모달(Modal)

: 이미지를 표시하는 일종의 대화상자

: 모달(Modal) → 모달 대화상자(Modal Dialog Box)를 의미, 표시된 상태에서는 다른 작업을 할 수 없음

: 이미지가 화면 전면에 표시된 상태에서는 다른 작업을 할 수 없음

• 팝오버

: 팝오버 컨포넌트는 작은 툴팁을 마우스 버튼을 클릭하거나 마우스를 호버해서 팝업으로 제공

: 구현 → data-bs-toggle="popover" 속성