프론트엔드/HTML & CSS4 [CSS] display display 속성 요소를 화면에 어떻게 드러나게 할지를 결정하는 속성이다. display 속성 display: none | block | inline | inline-block 알고 넘어가자! 요소 (즉 태그)는 inline 요소와 block 요소로 나뉜다. inline: 줄 속에 넣는 요소이며, , , 등 특정 문자열을 선택할 때 사용하는 태그가 그 예이다. 특징: 줄 바꿈이 되지 않는다. block: 좀 더 넓은 범위를 지정할 때 사용하는 같은 태그로 block 요소를 사용할 때는 가로 화면 100%를 차지하기 때문에 자동으로 앞뒤 줄 바꿈이 된다. 특징: 줄 바꿈이 있다. See the Pen Untitled by heerachoi (@heerachoi) on CodePen. display: no.. 2022. 3. 31. [CSS] background 와 background-color의 차이점 결론 적으로 background와 background-color 모두 배경 색상을 지정할 수 있다. 다만 background-color은 background 의 속성 중 하나이다. background-color 는 색깔만 지정할 수 있는 반면, background 는 color 이외의 다른 background 옵션들까지 지정해줄 수있다. color 글씨 색깔 background 다양한 백그라운드 속성을 부여할 수 있다. background 속성 background-color: color | transparent | initial | inherit; 요소의 배경색을 설정한다. TIP! 요소의 배경은 padding 과 border 을 포함한 요소의 전체 크기이다. ( margin 은 포함하지 않는다.) ba.. 2022. 3. 27. [CSS] transform transform 속성 scale: 확대/축소 효과 rotate: 회전 효과 translate: 이동 효과 skew: 비틀기(기울임) 효과 transform:scale() - X 또는 Y 축으로 확대/ 축소 scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킨다. transform:scaleX(x축 비율); /* x축으로 확대, 축소 */ transform:scaleY(y축 비율); /* y축으로 확대, 축소 */ transform:scale(x축 비율,y축 비율) /* x축, y축으로 확대, 축소 */ transform:rotate() - 지정 요소 회전 rotate는 요소를 지정한 각도만큼 회전시킨다. 횐전 각도가 플러스 값일 경우 시계 방향으로 , 마이너스 값일 경우 반시계 방향으로 회전한.. 2022. 3. 20. [CSS] box-sizing 속성 box-sizing padding 과 border 을 width 와 height 에 속하게 할지 설정해주는 기능입니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : box-sizing의 기본값으로 content 영역의 너비만 포함합니다. border-box : content , padding , border 영역이 너비에 포함됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성 값을 상속받습니다.. 예제 box-sizing 의 content-box , border-box 차이점. See the Pen box-sizing by heerachoi (@heerachoi) on CodePen... 2022. 3. 5. 이전 1 다음 728x90
