Front-end/CSS8 CSS 반응형 브라우저의 텍스트 크기 조절 (-webkit-)text-size-adjust 📌 text-size-adjust 아이폰의 경우 viewport가 변경되면 자동으로 텍스트 크기를 자동으로 조정한다. 이처럼 디바이스의 상태가 변경되었을 때 원치 않는 결과가 렌더링될 수 있기 때문에 이를 방지할 수 있는 장치가 필요하다. 그 장치 중 하나가 바로 text-size-adjust 이다. text-size-adjust: none; 기본값. 텍스트의 크기를 자동으로 조절하지 못하게 한다. text-size-adjust: auto; 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다. text-size-adjust: 100%; 폰트 크기를 명시적으로 지정해준다. 모든 디바이스에서 동일한 output을 낼 수 있다. text-size-adjust: inherit; 부모 요소의 속성값을 상속받아 적.. 2021. 9. 30. CSS overflow 속성 📌 overflow 콘텐츠가 너무 커서 element의 Block Format Context를 맞출 수 없을 때의 처리법을 지정한다. 필요한 속성 (택 1) 📍 블록 레벨 컨테이너의 높이 (height / max-height) 📍 white-space: nowrap (※ white-space 속성은 element가 공백 문자를 처리하는 방식을 나타낸다.) ◾ overflow : visible; See the Pen by ciocio97 (@ciocio97) on CodePen. 기본값 / 콘텐츠를 자르지 않는다. ◾ overflow : hidden; See the Pen by ciocio97 (@ciocio97) on CodePen. 해당 element의 크기(정해진 크기)에 맞춰 컨텐츠를 과감히 잘라버.. 2021. 9. 26. styled-component, useState 사용해서 Modal창 만들기 📌 Modal 창이란? 평소에 우리는 "팝업창이 차단되었습니다" 란 메세지를 종종 접한다. 여기서 말하는 팝업창은 현재 위치한 브라우저 이외에 또 다른 브라우저 페이지를 띄운 것을 말한다. 홈페이지에 접속했을 때 광고나 공지 등이 파바박 떠올라서 해당 창을 일일이 닫아줬던 경험이 있을 것이다. 그에 반해 기존의 브라우저 위에 하나의 레이어를 까는 것을 말한다. "새로운 창"이 아니다. 팝업창과 달리 브라우저 단에서 차단할 수 없기 때문에 반드시 표시해야하는 정보를 다루기 좋다. 그리고 개인적으로 UI적으로 정리가 잘 된 느낌을 받아서, 앞으로도 애용할 것 같다. 📌 Modal 창의 장단점 (feat. Pop-up 창의 장단점) 그렇다면, Modal 창은 장점만 있나 ? Nope. Pop-up 창과 비교해.. 2021. 9. 14. CSS font-size 속성 ◾ medium : 웹브라우저에서 정한 기본 글자크기입니다. ◾ xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다. ◾ smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. ◾ length : px, %, em, rem 등으로 크기를 정합니다. ◾ initial : 기본값으로 설정합니다. ◾ inherit : 부모 요소의 속성값을 상속받습니다. 2021. 8. 9. CSS flex-box 의 부모 속성 align-items 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 align-items: stretch / flex-start / flex-end / center / baseline ❗ item들이 한 줄일 경우 ! align-items 속성을 사용한다. 왜냐 ?? flex-wrap을 통해 2줄 이상일 경우에는 align-content속성이 우선시된다. --> align-items를 사용하려면 align-content속성을 기본값(stretch)로 설정하거나 아예 사용하지 않아야한다. --> 그래서, justify-content와 align-items의 조합을 많이 사용하는 게 아닌가 싶다 --> justify-content로 flex-line 정리하고, align-items로 item들 라인 정리하.. 2021. 8. 8. CSS flex-box 의 부모 속성 justify-content & align-content 📌 Flex-Box? 말 그대로 어어엄청 힙한 아이 부모요소에 꼭 flex-box를 넣어줘야 자식요소들이 flex속성을 활용할 수 있다 helloflex abc helloflex 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 display: flex .container { display: flex; } item들이 가진 내용물의 width만큼 너비를 차지한 채, inline요소들처럼 다닥다닥붙는다. 여기서 container에 height을 설정해주면 item들도 부모 높이 따라서 좌라락 예쁘게 놓여진다. 🏁 display: inline-flex .container { display: inline-flex; } flex가 div처럼 화면 한 줄을 잡고 촤라락이라면 inline-fle.. 2021. 8. 7. CSS padding /* 네 면 모두 적용 */ padding: 1em; /* 상하 | 좌우 */ padding: 5% 10%; /* 상 | 좌우 | 하 */ padding: 1em 2em 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 -> 시계 방향 */ padding: 5px 1em 0 2em; /* 전역 값 */ padding: inherit; padding: initial; padding: unset; 2021. 7. 28. CSS box-sizing: content-box와 border-box의 차이 📌 CSS 기본 박스 모델 Content-box 크기에만 width와 height가 적용된다. (Padding X, Border X, Margin X) 따라서 원하는 크기의 박스를 그리려면, Padding 값이나 Border 값을 고려해야한다. ^아오 귀찮아^ 🏁 그래서 등장한 box-sizing! 솔직히 우리, Parent container안에 있는 Child container들 ... Parent가 정한 영역에서 빠져나오지 않았으면 하는 것들이 대부분이잖아 ... ◾ box-sizing: content-box CSS 기본 박스 모델을 따른다 ! 에라 모르겠고 ! 난 그냥 Content에만 width, height 줄거야 ! Padding, Border 나몰라라~ 100px width를 설정하게 되면 .. 2021. 7. 27. 이전 1 다음
