Grid" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소를 2차원 배치 시킬 수 있는 CSS 모듈 Grid의 여러 속성" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스grid-template그리드의 열과 행을 정의하는 속성.container { display: grid; grid-template-rows: 100px 200px 200px; grid-template-columns: 100px 300px 100px; width: 500px; height: 500px; margin: 200px auto; border: 5px dashed gray;}1. grid 요소의 가로, 세로 크기를 gird-template-colums, grid-te..

HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; box-shadow: 0 25px 25px rgba(0, 0, 0, 0.5); } box-shadow : x축 오프셋, y축 오프셋, 흐림 반경, 그림자 색상 애니메이션 적용하기 HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .box:hover { transform: translate..

HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: transform 0.5s ease; } 1. transform : 변화가 일어날 속성 2. 0.5s : 변화가 일어나는 시간 3. ease : 변화가 일어나는 속도 (ease, linear, ease-in, ease-out, ease-in-out) .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .bo..

width" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. width의 기본 값은 100%가 아닌 auto이다2. auto는 부모 요소의 너비를 넘을 수 없고, 100%는 부모 요소의 width 값과 똑같이 가진다.3. width값을 직접 설정하면, width값은 content영역의 크기가 된다. 4. box-sizing 속성의 border-box를 사용하면, 요소의 크기는 content box가 아니라 border를 기준으로 잡아준다. https://cdpn.io/pen/debug/adLPwv

Flex" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소들을 유연하게 배치시켜주는 레이아웃 속성 flex-direction" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스컨테이너의 주축을 설정하는 속성 .container { display: flex; border: 1px solid black;}.item { width: 100px; height: 100px;}1. flex의 기본 flex-direction 값은 가로 row 이다..container { display: flex; flex-d..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. user agent stylesheet(브라우저 기본 스타일) 은 CSS 스크립트보다 우선 순위가 낮음. 2. HTML style attribue는 우선 순위가 가장 높음. 3. 동일한 요소에 대한 여러 CSS규칙이 있을때, 가장 나중에 정의된 스타일이 우선 순위가 높음. 4. 명시도 점수 순에 따름.(https://specificity.keegan.st/) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. static 1.기본 포지션 값, 요소의 원래 위치에 배치. 2. relative 1. 요소의 원래 위치를 기준으로 이동가능. 2. 요소의 원래 자리는 그대로 차지하고 있으며, 다른 ..