개발야옹

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의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

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

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

& Ampersand

상위 선택자 참조.

ex 1)

.btn {
	position : absolute;
}

.btn.active {
	color : blue;
}


/* Ampersand 활용 */

.btn{
	position : absolute;
    
    // & 가 btn으로 치환된다. 
    &.active{
    	color : blue;
    }
}

ex 2)

.list li : last-child {
	margin : 20px;
}

/* Ampersand 적용 */
.list {
	li{
    	// &가 li로 치환된다. 
    	&:last-child{
    		margin : 20px;
        }
    }
}

출처 :

https://sso-feeling.tistory.com/232

https://velog.io/@jch9537/CSS-SCSS-SASS