[KUIT] 2주차 워크북 보충(CSS)

이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다.

---

box-sizing: border-box

box-sizing : border-box로 설정하고

border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다.

→ border값이나 padding 값이 지정한 width값이나 height값에 포함이 된다.

 

출처: https://juicyjerry.tistory.com/entry/css에서-box-sizing-을-border-box로-하는-이유

---

position sticky가 적용이 되지 않는 이유

1. sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됨
2. 부모 태그는 무조건 height 높이 값이 들어가 있어야 함.
3. 부모요소 중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.

출처: https://shadesign.tistory.com/40

---

whitespace 속성

whitespace 속성은 요소가 공백 문자를 처리하는 방법을 지정합니다.

normal: 연속 공백을 하나로 합친다.

→ 개행 문자도 다른 공백 문자와 동일하게 처리되며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

nowrap: 연속 공백을 하나로 합친다.

→ 줄 바꿈은 <br> 요소에서만 일어난다.

 

pre: 연속 공백을 유지한다.

→ 줄 바꿈은 개행 문자와 <br> 요소에서만 일어난다.

 

pre-wrap: 연속 공백을 유지한다.

→ 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

pre-line: 연속 공백을 하나로 합친다.

→ 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

break-spaces: pre-wrap과 유사하지만, 연속 공백이 줄의 끝에 위치하더라도 공간을 차지한다.

→ 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있다.

 

---

overflow 속성

overflow 속성은 요소의 콘텐츠가 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리 방법을 지정한다.

visible: 기본값으로 내용이 더 길어도 그대로 보인다. (내용이 흘러넘침)

hidden: 내용이 넘치면 자릅니다. 자른 부분은 보이지 않는다.

scroll: 내용이 넘치지 않아도 항상 스크롤바가 보인다.

auto: 내용이 잘릴 때만 스크롤바가 보인다.

 

---

반응형 웹 디자인

다양한 디바이스와 디바이스 크기에 대응하는 디자인 접근 방식으로, 태블릿, 휴대폰, 텔레비전, 시계 등 어떤 디바이스에서 콘텐츠를 보든 화면에 맞게 자동으로 조정할 수 있음

 

미디어 쿼리

일련의 테스트(예: 사용자의 화면이 특정 너비 또는 특정 해상도보다 큰지 여부)를 실행하고 CSS를 선택적으로 적용하여 사용자의 요구에 맞게 페이지의 스타일을 지정할 수 있다.

출처: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

• 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.
• 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
• CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용

 

예시

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

→ 가로 길이가 400px 보다 좁은 경우 색을 파란색으로 만들어준다.

---

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 된다.

 

---

px, em, rem의 차이

• px (pixels): 픽셀은 디지털 화면에 표시되는 가장 작은 단위이다.
• 고정된 크기를 가지며, 따라서 다른 요소나 설정에 영향을 받지 않는다.
• em: em 단위는 상대적인 단위로, 해당 요소의 부모 요소의 글꼴 크기에 상대적이다.
• 예를 들어, 부모 요소의 글꼴 크기가 16픽셀이고 자식 요소의 글꼴 크기가 1em으로 설정되면, 자식 요소의 글꼴 크기도 16픽셀이 된다. 만약 자식 요소의 글꼴 크기가 2em으로 설정되면, 그것은 부모요소의 두 배인 32픽셀이 됩니다.
• rem (root em): rem도 상대적인 단위지만, HTML 문서 최상단 루트(root)요소()의 글꼴 크기에 기반한다. 이렇게 하면 사이트 전체에서 일관된 스타일링을 쉽게 유지할 수 있다.

---

반응형 웹을 만들기 위해 추천하는 단위는?

rem이 가장 적절한 듯

→ rem의 기본값은 웹 브라우저에 의해 결정되지만, 개발자가 CSS를 통해 이 값을 변경할 수 있고 사용자 또한 브라우저의 글꼴 크기를 변경시켜 rem 단위에 영향을 끼칠 수 있다.

→ 웹사이트가 다양한 환경과 사용자 요구 사항에 유연하게 대응할 수 있도록 도울 수 있음.

출처: https://velog.io/@xnelb013/CSS-px-em-rem의-차이-vw-vh에-대한-이해

 

즉 정리하자면,

 

px → 고정된 절대값

rem → 지정한 루트 글꼴 크기의 배수

em → 엘리먼트에 지정한 폰트 크기의 배수(부모 요소의 글꼴 크기)

 

출처: https://yozm.wishket.com/magazine/detail/1410/

 

다른 시각:

1. 픽셀은 문제가 많으니 사용 x
2. 크기와 간격에는 REM 단위를 사용
3. 미디어 쿼리에는 EM 단위를 사용
4. 출처: https://brunch.co.kr/@clay1987/170

---

vw와 vh에 대해서

• vw (viewport width) : 하나의 vw는 뷰포트 너비의 1%이다. 예를 들어, 뷰포트 너비가 500px일 때, width:50vw;는 해당 요소가 화면 너비의 절반(250px)을 차지하도록 한다.
• vh (viewport height) : 마찬가지로 하나의 vh는 뷰포트 높이의 1%이다. 예를 들어, 뷰포트 높이가 800px일 때, height:20vh;는 해당 요소가 화면높이의 5분의 1(160px)을 차지하도록 한다.

---

반응형 브레이크 포인트

일반적인 화면 크기 범위는 아래와 같다.

• 모바일: 320px ~ 480px
• 태블릿: 481px ~ 768px
• 작은 데스크탑: 769px ~ 1024px
• 대형 데스크탑: 1025px 이상

출처: https://velog.io/@xnelb013/CSS-px-em-rem의-차이-vw-vh에-대한-이해

---

align-items와 align-content의 차이

align-items: 교차 축을 기준으로 아이템들을 정렬 만약 flex-wrap 속성이 wrap으로 설정되어 있다면, 가상의 공간 내에서 아이템들이 정렬된다. 예를 들어, 세로 방향으로 아이템들을 정렬할 때 사용됩니다.

align-content: 컨테이너 내부를 하나의 덩어리로 취급하여 교차 축을 기준으로 정렬 여러 줄의 아이템이 있을 때, 각 줄의 윗쪽이나 중앙에 배치하거나 여분의 공간이 있는 경우 간격을 조절 주로 여러 줄의 아이템을 수직으로 정렬할 때 사용됩니다.

요약하자면, align-items는 한 줄 내의 아이템들을 수직으로 정렬하고,

align-content는 여러 줄의 아이템들을 수직으로 정렬하는 데 사용

---

웹 사이트에서 무슨 글꼴을 썼는지 확인하는 크롬 확장 프로그램

크롬 웹 스토어에서 ‘어떤 글꼴?’(혹은 ‘What Font?)’라고 이름의 크롬 확장 프로그램을 다운받고

웹사이트에서 무슨 글꼴을 썼는지 마우스 포인터를 갖다대면 확인할 수 있다.

---

padding-top: 100%

1. 부모 요소에 padding-top: 100%를 준다.

→ 부모의 width만큼 부모 요소의 위에 공간이 생성된다.

1. 자식 요소에 absolute 속성을 부여하고, 아까 padding-top: 100%으로 생성한 공간만큼 자식 요소인 이미지를 집어넣는다.

→ 자식 요소의 height는 부모의 width가 된다.

이 기법을 통해 비율을 유지하면서 이미지를 적절하게 삽입할 수 있습니다!

(자식 요소에 object-fit: cover 속성을 주면 더 좋겠죠?)