CSS 한번에 정리

"": 없는 것 styled-component
"": 있는 것 그냥 스타일 대신 -있으면 없애고 앞부분 대문자!

 

background-color: #FFFAFA; ------> 배경색	float: left; ------> 왼쪽 정렬
color: slateblue;   ------> 글자색	display: "block" ------> https://www.daleseo.com/css-display-inline-block/ 참고!
display: "grid"  https://studiomeal.com/archives/533	display: "flex" 그리고 flexBox https://learncoderepeat.tistory.com/38?category=882138  https://blogpack.tistory.com/862
text-align: center;   ------> 글자 위치	font-size: 14px(body) font-size: 12rem(div) ------> 바디 기준으로 14*1.2 = 16.8px width: 70rem; /* 70 * 14px = 980px */
margin: 16px 10px;  ------> 주변 여백 0 0 0 0 상 우 하 좌	width: calc(100%-50px) ------> 전체 width 100%에서 50px을 제외한 길이만큼 영역 지정
padding: "5px" ------> 안으로 밀기 0 0 0 0 상 우 하 좌
border: 2px dotted #ddd;  ------> 테두리
border-radius: 10px;  ------> 테두리 굴곡

 

WIDTH, HEGHT

 

width, height: 20vw; //넓이, 속성을 명시하지 않으면 auto라는 키워드가 값으로사용!

------> 넓이 px는 절대값, 비율은 vw,% 속성이 없으면 auto가 키워드로 알아서 들어감!

width, height: max-content; 

------> 엘리먼트 값을 최대한으로 주고 싶을때(엘리먼트만 배경색을 줄때 유용함)

width, height: min-content; 

------> 엘리먼트 값을 최소한으로 주고 싶을때

max-width, max-height: 350px;

1. max-width

1) 반응형 웹에서

화면이 엄청 커지면 20%로 설정해 놨던 이미지나 부분도 엄청 커지겟죠,
근데 그 부분은 크게 키우고 싶지 않을 때! 전체 화면의 20%이지만 500px이상으로 커질 땐
더이상 커지게 하고 싶지 않을 때! 
width: 20%
max-width: 500px;
라고 함께 써주시면 되요! width = 400px max-width = 300px면 max 먼저!

min-width, min-height: 350px;

디바이스의 크기가 확 줄어들었을 때 '이 부분은 이 크기 이하로 줄어들지마!" 컴퓨터한테 말하려면
min-width를 써요!
퍼센트는 70% 로 지정했지만 700px 보단 작아지지말라 할 때
width: 70%;
min-width: 700px;

width, height: fit-content; 

------> 가용 너비이 부족하지 않는 경우에는 max-content 키워드처럼 담고 있는 컨텐트의 최대 너비를 엘리먼트의 width 속성값으로 사용 그러나 가용 너비이 부족하다면 auto 키워드처럼 가용 너비에서 여백(margin)을 제외한 너비를 엘리먼트의 width 속성값으로 사용

 

 

vh & vw (vertical height & vertical width)

반응형 웹디자인 테크닉은 퍼센트 값에 상당히 의존하고 있습니다. 

하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아닙니다. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다.

 

만약 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값에 맞게 사용할 수 있다면 어떨까요? 

바로 vh와 vw 단위가 그런 의도에 맞는 단위이고 vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 

 

이 규칙에는 무궁무진한 사용방법이 있습니다. 

예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다.

CSS

.slide {
    height: 100vh;
}

 

스크린의 너비값에 꽉 차는 헤드라인을 만든다고 가정해 봅니다. 

vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다. 

해당 사이즈는 브라우저의 너비에 맞춰 변할 것입니다. (브라우저 크기를 늘였다 줄였다 해보세요)