HTML,CSS (5) 썸네일형 리스트형 %, vh, vw, em, rem 차이점 % .parent { position: flex; height: 600px; width: 600px; margin: 0px 0px; background: rgb(201, 179, 125); } .child { height: ??? width: 60%; margin: 0 auto; background: rgb(92, 170, 206); } height: 50% height: 100% 부모 엘리먼트(.parent) 크기에 따라 %가 차지하는 모습을 볼 수가 있다. vh vh는 Viewport height의 축약어 이며, Viewport는 웹사이트에서 보여지는 영역을 뜻한다. 만일 1vh로 속성값을 설정할 경우 뷰포트 너비의 1% 만큼 계산이 된다. 1vh = 1% .child { height: 20vh; w.. styled-components Styled Components 1. 스타일? Styled Components를 왜 배우는가! SASS 코드를 설치 없이 사용하고 CSS 파일 없이 CSS 코드를 짜고 게다가 이 코드를 React Native 앱으로 공유할수 있습니다. 가장 큰 장점은 기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있다는 점입니다! 2. 셋업 npx create-react-app 을 통해 환경을 설치합니다. 그리고 /src 디렉토리에 App.js와 index.js을 제외한 모든 파일을 제거합니다. 가장 먼저 버튼을 만드는데 hover, active state, 배경색을 바꿔보겠습니다.(js와 css를.. position: [static,relative,absolute,fixed] .button { position : static; /* 기준이 엄서요 */ default값 좌표설정x position : relative; /* 기준이 나요 */ : 원래위치부터 좌표변경 position : absolute; /* 기준이 바로 위 부모요 */ : position:relative 가지고있는 부모에게 달려듬 position : fixed; /* 기준이 브라우저 창이요 (viewport) */ : 화면이 스크롤되어도 해당 버튼이 고정됨 } top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. 1. static div{ border:5px solid tomato; mar.. display: flex,grid . 참고:이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com) 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 참고:이번에야말로 CSS Grid를 익혀보자 – 1분코딩 (studiomeal.com)Beautiful CSS » 포지셔닝 : Flexbox Beautiful CSS » 포지셔닝 : Flexbox 이 게시물은 2020년 10월 25일 수정판입니다. Image from Introducing Flexbox Fridays 이야기에 앞서 Flexbox Lay.. display : block ,inline , inline-block display : block 한줄에 나열하지 않으며 해당 태그 자체를 한줄로 표현합니다. (기본적으로 width 100%) margin,width,height,padding속성 정의 가능합니다. 박스를 가운데 하기위한 조건들 display:block 좌우 마진 : auto div pppp h1 h2 display : inline 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 ex: a태그 (width 와 height 속성이 적용되지 않음 margin-top,margin-bottom 속성 적용 X) 최소한의 간격 유지를 위해서 기본 내부 margin 5px 발생 (웹브라우저에 의해) inline 태그는 높이와 너비가 품고있는 내부 요소의 부피에 맞게 맞춰 집니다. AAA span BBB di.. 이전 1 다음
