개발야옹

position

positon property는 요소의 위치를 결정하는 속성이다. top, bottom, left, right 속성들을 함께 사용하여 요소의 위치를 지정할 수 있다.

position property의 값으로는 아래 다섯개의 값을 가질 수 있다.

1. static

2. relative

3. absolute

4. fixed

5. sticky

position 속성의 각 값들에 대해 살펴볼 것이다.

1. static

static은 position 속성의 기본 값으로 position 속성값을 지정하지 않았을 때와 같다. 일반적으로 요소 배치 순서에 따라 배치되며 bottom, left, top, right, z-index속성들에 대해 아무런 영향을 받지 않는다. 

따라서 static은 왼쪽에서 오른쪽, 위에서 아래로 배치되며, 부모 요소 내의 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다.

2. relative

relative는 요소를 문서의 흐름에 따라 배치를 한다. static과 다르게 자기 자신을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 그렇기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 동일하다. static과 relative의 차이는 좌표 프로퍼티(right, top, bottom, left)의 동작 여부 뿐이다.

3. absolute

relative와 static과 다르게 요소가 일반적인 문서의 흐름에 따라 위치하지 않는다. 부모 요소 또는 가장 가까이 있는 조상 요소 (static 제외) 를 기준으로 좌표 프로퍼티 ( top, bottom, right, left )만큼 이동한다. 즉, position이 relative, absolute, fixed 로 선언되어 있는 가장 가까운 부모 또는 조상 요소를 기준으로 요소의 위치가 결정된다.

만약 부모 또는 조상 요소가 static인 경우 body tag를 기준으로 위치하게 된다. 

다른 요소가 먼저 위치를 점유하고 있더라도 뒤로 밀리지않고 위에 덮어씌운다. ( 이런 특성을 부유 또는 부유 객체라고 한다. )

4. fixed 

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티( top, bottom, right, left )을 사용하여 위치를 이동시킨다. 

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

아래 사진의 빨간네모에 위치한 버튼 처럼 항상 고정된 자리에 위치하는 것들은 fixed를 사용하면 된다.

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는 조사오가 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

➡️ 많이 사용해본 적이 없어서 잘 이해가 가지 않는다. 다음에 더 자세히 알아봐야 겠다.

전통적인 웹 페이지

전통적인 웹 페이지는 아래의 그림과 같이 동작한다.

사용자가 다른 페이지로의 이동을 요청하면 서버에서 페이지에 해당하는 html 파일로 응답을 해주고, 브라우저가 해당 파일을 받아 해석한 후 사용자에게 보여주는 방식으로 사용자에게 보여주는 화면을 서버측에서 준비를 했다. 

요즘에는 웹에서 제공되는 정보가 매우 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 페이지를 준비하게 되면 성능상의 문제가 발생할 수 있다. 

ex)

1. 트래픽 과다

2. 사용자가 동시간대에 몰릴경우 서버에 무리를 줄 수 있다.

3. 새로운 페이지로 이동( 화면 전환 ) 할 때 마다 새로운 html 파일을 계속해서 유저와 서버가 요청/응답 하게 되면 상태 유지가 번거로울 뿐만 아니라 불필요한 페이지 로딩이 발생하게 되어 비효율적이다. 

► React같은 라이브러리 or 프레임워크를 사용하여 유저의 브라우저가 뷰 렌더링을 담당하도록 하면 이러한 성능상의 문제를 해결할 수 있다. 

Single Page Application

SPA는 이름 그래도 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. SPA의 동작 방법은 아래의 그림과 같다.

사용자가 처음 서버에 접속 요청을 보내면 html 파일과 함께 정적 리소스 파일들을 함께 보내준다. 이후에 유저가 서버에게 요청을 하면 해당 요청에 필요한 JSON 파일들만 응답해주며 브라우저는 서버에게 받은 JSON파일을 해석하여 변경된 사항만을 반영하여 유저에게 보여준다. 

► SPA의 경우 페이지는 한 종류이지만, 해당 페이지에서 로딩된 JS와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. ( 다른 주소에 다른 화면을 보여주는 것을 라우팅 이라고 한다. ) 

[ + ] 리액트 라우팅 라이브러리 종류 

1. react-router

2. reach-router

3. Next.js .. 등

SPA의 단점

1. SPA의 단점은 앱의 규모가 커지면 JS 파일의 크기가 너무 커진다는 것이다. ( 페이지에 첫 방문 시 정적 리소스들을 html 파일과 함께 모두 보내주기 때문에 )  페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 JS도 함께 불러오게되기 때문이다. 

→ 코드 스플리팅 ( code spliting ) 을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다. 

2. SEO ( Search Engine Optimization ) 검색엔진최적화 문제

JS를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해가지 못하여 검색 엔진의 검색 결과에 페이지가 나타나지 않을 수도 있다. → 검색엔진에 나타나지 않는다는 것은 큰 문제 ( 광고, 홍보, 유저가 구글, 네이버 등 포탈에서 검색을 통해 유입되지 못함. )→ SSR ( Server Side Rendering ) 을 통해 해결할 수 있다. 

3. JS가 실행될 때까지 페이지가 비어 있기 때문에 JS 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다. → SSR ( Server Side Rendering ) 을 통해 해결할 수 있다. 

flexbox

flexbox는 viewport( 웹페이지가 사용자에게 보여지는 영역 )나 요소의 크기가 불명확 또는 동적으로 변하는 경우 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

아래는 flexbox 사용 예시이다.  

.flex-container{
	display : flex;
}

.flex-items{
	<!-- flex item에 대한 css 속성 설정 -->
    width : 50px;
    height : 50px;
}

display : flex 속성이 적용된 요소는 flex -container가 되고, flex-container의 자식 요소들은 flex-item이 된다. 

flex item은 메인축에 따라 결정되는데 메인축의 방향은 flex-direction 속성으로 결정되며 기본값은 row이다.

flex-container 속성

1. flex-direction ( main axis )

- row ( 기본값 ) : 왼쪽 -> 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column : 위 -> 아래

.flex_container{
    display : flex;
    flex-direction : column;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- row-reverse : 오른쪽 -> 왼쪽

.flex_container{
    display : flex;
    flex-direction : row-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column-reverse : 아래 -> 위

.flex_container{
    display : flex;
    flex-direction : column-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

결과에서 flex-item 2는 반정도만 보이고, flex-item3가 안보이는 이유는 flex-container의 height이 50px로, flex-item 3개의 크기보다 작기 때문에 더이상 보이지 않는다. height의 값을 더 크게 해주면 flex-item3까지 모두 보이는 것을 확인할 수 있다. 

2. flex-wrap

위에서 본 flex-direction 예제에서는 flex-wrap값을 따로 지정해주지않아 기본값인 nowrap으로 설정되어서 flex-item이 flex-container의 크기를 벗어나 한줄에 배치가 되어 있는 것을 확인할 수 있다. 

- nowrap ( 기본값 ) : flex-item이 부모요소인 flex-container를 벗어나더라도 한 줄에 배치

- wrap : flex-item이 부모요소인 flex-container를 벗어나면 여러 행에 걸쳐서 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- wrap-reverse : 여러행에 걸쳐 요소가 나열되는 순서가 시작점과 끝점이 반대로 되어 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap-reverse;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

3. justify-content

justify-content는 메인축 방향으로 item들의 정렬을 결정하는 속성이다.  

- flex-start ( 기본값 ) : item들을 시작점으로 정렬 ( flex-direction 기준으로 ) 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : flex-item들을 끝점으로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-end;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item 들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : center;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between : item들의 사이에 균일한 간격을 만들어준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-between;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around : item들의 둘레에 균일한 간격을 만들어줌

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly : itme들 사이와 양 끝에 균일한 간격을 만들어 준다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-evenly;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

4. align-items

align-itmes 속성은 cross-axis 항목의 정렬을 제어한다. cross-axis는 flex-direction 속성 값과 반대이다. 

- normal ( stretch ) ( 기본값 ) : 아이템들이 수직축 방향으로 끝까지 늘어난다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start : item들을 시작점으로 정렬한다. flex-direction이 row일 경우 위, column일 경우 왼쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : item들을 끝점으로 정렬한다. flex-direction이 row일 경우 아래, column일 경우 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

5. align-content

flex-wrap 속성이 wrap으로 설정된 상태에서, item들의 행이 2 이상일 경우 수직축 방향 정렬을 결정하는 속성이다.

- stretch ( 기본값 ) 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-between;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-around;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-item 속성

1. flex-basis

flex-basiss 속성은 flex-item의 기본 크기를 설정하는 속성이다.flex-direction이 row일 경우에는 너비의 기본 크기를 지정하고, flex-direction속성이 column일 경우에는 높이의 기본 크기를 지정한다.

기본 크기를 지정해주는것이기 때문에 원래 flex-item의 크기가 flex-basis로 지정한 값보다 작다면 flex-basis에 맞춰서 크기가 늘어나지만 flex-item의 크기 값이 flex-basis로 설정한 값보다 크다면 원래 item의 크기로 유지된다. 

만약 모든item들의 크기를 하나로 고정하고 싶을 경우에는 그냥 width를 사용하여 속성을 설정해주면 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

2. flex-grow

flex-grow 속성은 flex-basis 속성으로 정해놓은 크기 값보다 커질 수 있는지를 결정하는 속성으로 flex-grow의 기본값은 0이다. flex-grow속성이 적용되어 있지 않거나 값이 0 인 경우에는 flex-container의 너비가 flex-item들의 너비의 합보다 크더라도 여백을 매워주지 않는다. 아래 예시 그림을 참고하면 더 쉽게 이해된다. 

만약 flex-grow값을 1로 설정한 경우 아래 그림과 같이 위 그림에서는 남았던 container의 여백을 item들의 너비를 넓혀서 채우게 된다. 모든 item들에게 flex-grow : 1 속성을 줬기 때문에 모두 같은 크기로 여백을 채우게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-item5 에만 flex-grow 속성을 주게 되면 아래와 같은 결과가 나오게된다. 다른 flex-item 1,2,3,4의 크기는 flex-basis로 설정한 100px; 이 되고, flex-item5 의 경우 flex-grow 값을 1로 주었기 때문에 container의 여백을 혼자서 모두 채우게 너비가 커지게 된다. container 의 너비는 1000px, flex-item 1,2,3,4 는 각각 flex-basis가 100px 임으로 총 400px이기 때문에 flex-item5의 너비는 600px이 되게 된다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

.flex_item5{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

3. flex-shrink 

flex-shrink는 flex-grow와 반대로 flex-basis 속성으로 정해진 값보다 작아질 수 있는지를 결정하는 속성이다. flex-shrink 속성의 기본값은 flex-grow 속성과 다르게 기본값은 1 로, flex-basis보다 작아질 수 있다. 

아래 예시를 보면 flex-item5에만 flex-shrink 속성 값을 0으로 주어 다른 flex-item1,2,3,4 와 달리 너비가 유연하게 줄어들지 않고 width : 100px 값그대로 고정되어 있는 것을 확인할 수 있다. 그와 반대로 flex-item 1,2,3,4의 경우 container 너비가 60px로, flex-basis 값보다 20px 작아져 그에 맞춰 너비가 줄어든 것을 확인할 수 있다. 

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 60px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 80px;
    flex-shrink : 1;
}

.flex_item5{
    color : red;
    width : 100px;
    flex-shrink : 0;
    padding : 5px;
    border: 1px solid black;
}

출처 :

https://studiomeal.com/archives/197

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

https://d2.naver.com/helloworld/8540176

CSS media queries

media queries 는 단말기의 유형과 어떡 특성이나 수치 ( 화면 해상도, view port, 너비 등 ) 에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용.

media queries는 CSS3에 포함되어 있으며, media type ( screen, tv, print ... ) 와 하나 이상의 expression으로 구성된다. 

ex) 

아래 예시의 경우 width (너비) 가 500px 이하 일 때의 배경색상을 white로 적용한다는 의미이다. 

@media ( max-width : 500px ) {
	background : white;
}

출처 :https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries