[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day7

 

 

 

들어가기전에

금일 강의로써는 CSS로 구성할때 기준점을 잡아줄 수 있는 제공해주는 레이아웃에 관한 속성들에 대한 이론과 실습예제를 통하여 알아보았으며, 나아가 반응형과 적응형의 차이 및 반응형 실습예제를 통하여 반응형에 대한 전반적 지식과 사용법 등을 확인하는 시간을 가져보았고 해당 블로그에는 이론만 작성하고 실습은 배제하였습니다.

 

 

강의를 보며 나의 주관적인 생각이 들어가 정리한것임으로 반드시 '내가 적은것이 맞다' 라는 것이 아니므로 읽어보시고 이상한부분이 있다면 저에게 알려주시거나 꼭 다른곳도 검색해서 찾아보기를 바랍니다.

 

---

 

 

 

목차

1. 학습 주제

• CSS 레이아웃
• 반응형 알아보기

2. 주요 메모 사항 소개

3. 공부하며 어려웠던 내용

 

 

 

학습 주제.1
CSS 레이아웃

CSS에서 Layout?이란

다양한 요소들을 적절한 위치에 배치하고 정렬할 수 있도록 하는 기눙

 

float

문맥의 흐름으로부터 빠져 좌우측에 배치되는 속성으로 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능

 

position

문서 상에 요소를 배치하는 방법

- static (기본값) : 문서의 흐름에 따라 배치되고 offset 및 z-index 제어 불가능

- relative : 문서 흐름에 따라 배치하고 현재 위치 기준으로 offset과 z-index 제어가능

- absolute : 문서 흐름에서 제거하고 가장 가까운 위치의 relative 요소에 상대적으로 배치

- fixed : 문서 흐름에서 제거하고 브라우저의 화면 기준으로 배치

- sticky : 문서 흐름에 따라 배치되나, 요소가 스크롤에 닿으면 따라다님

 

Flexbox

유연함을 가진 일차원 레이아웃을 만들 수 있는 기능

- 가로축 정렬 : justify-content

- 세로축 정렬 : align-items

- 유연성 조절 : flex-grow, flex-shrink

- 크기 조절 : flex-basis

- 축 변경 : flex-direction

- 여백과 순서 : gap, order

 

Grid

수평선과 수직선을 가진 2차원 레이아웃을 만들 수 있는 기능

- 그리드 조절 : grid-template

- 반복하기 : repeat

- 셀 확장 : grid-row, grid-column

- 영역 지정하고 배치하기 : grid-template-areas, grid-area

- 여백과 순서 : gap, order

 

학습 주제.2
반응형 알아보기

반응형이란?

하나의 웹사이트에서 접속하는 기기의 화면크기에 맞게 사이트가 자동으로 반응하는 기법

 

적응형

접속하는 기기에 따라 PC, Tablet, Mobile 의 하나만 웹사이트로 보여주는 기법

 

 

반응형 페이지를 만들기 위한 메타 태그

viewport meta 태그를 추가하여 페이지가 호출이 될 때 보이는 화면을 어떻게 계산해서 보여줄지 정의

<meta name="viewport" content="width=device-width, initial-scale=1.0">

neme

- 메타태그 중 viewport를 사용 하겠다고 선언

content

- viewport가 가진 content 값을 지정하여 사용

- width : 브라우저에게 "페이지의 가로 너비"를 계산하는 방법을 알려주며, "device-width"를 지정하면 접속하는 기기의 브라우저 너비에 맞게 페이지를 맞춘다. 

- initial-scale : 최초 화면 확대 값으로, 1.0을 두는 것으로 페이지를 확대하지 않고 1배율로 보겠다고 정의

 

 

미디어 쿼리 (Media Query)

기기의 유형과, 어떤 특성이나 수치에 따라 스타일 수정 가능

@media 로 시작하며, and 연산자를 통해 조건을 계속 추가할 수도 있다.

기기 유형	규칙
all : 모든장치	뷰포트 너비 (가장 많이 사용)
print : 인쇄 출력 미리보기	뷰포트의 가로세로비
screen : 화면	등등 · · ·

 

---------------------------------------------------------
/* 미디어 쿼리 기본 문법 */
@media 기기유형과 연산자 (규칙) {
	스타일
}
---------------------------------------------------------
/* 뷰포트 너비가 1024px 이하인 구간에서 적용 */
@media all and (max-width: 1024px) { 
	div {
    	font-size: 16px;
    }
}
---------------------------------------------------------
/* 768px 이상 ~ 1024px 이하인 구간에서  적용 */
@media (min-width: 768px) and (max-width: 1024px){ 
    div {
        font-size: 32px;
    }
}

 

반응형 작업 시 주의사항

1. 레이아웃의 "고정 크기" 사용 지양

- width 값을 고정하면 반응형 매 구간마다 고정값을 변경해야 하는 불편함 발생

    - max-width를 사용한 "최대 너비" 활용 추천

- height 값을 고정하면 유동적으로 변하는 높이에 대응 불가능

    - max-height를 사용한 "최소 높이" 활용 추천

 

2. 인라인 스타일은 반응형 처리 불가능

- width 값을 고정하면 반응형 매 구간마다 고정값을 변경해야 하는 불편함 발생

 

 

 

---

 

주요 메모 사항 소개

Flexbox

- 플랙스박스 프로그 라는 게임도 같이 해보면서 많이 사용하니 잘 알아둘 것

반응형 과 적응형

- 단어의 사용빈도가 높으니 단어의 의미, 정의를 잘 이해할 것 

미디어 쿼리 (Media Query)

- 반응형 작업시 많은 빈도수로 사용하게 될 터이니 더 알아볼 것

반응형 작업 시 주의사항

- 작업 할 때, 다양한 디바이스를 생각하기에 생각을 잘 하고 작업 해야 함

 

 

공부하면서 어려웠던 내용
레이아웃 과 반응형

레이아웃과 반응형을 실습예제를 통해 직접 사용했을때, 이론과 달리 생각처럼 안 움직이는 것도 있었으며, 많은 곤란에 빠지곤 했다.

내가 겪은 것은 대표적으로 반응형 코드를 작성했지만, 768px이하에서는 작동이 안되는거같은 일 또는 반응형에 flex를 이용하여 row에서 column으로 변경됐을 시 레이아웃이 깨지는..? 그런 현상들을 겪으면서 많은 시행착오를 겪으며, 많이 써봐야겠다 생각했다.