TIL(2022.05.09)-[CSS] box-sizing & 변형방법

박세진·2022년 5월 12일
0

블록태그 하위태그

이 부분이 헷갈려서 정리를 해둬야겠다.

  • 블록 태그의 하위 태그로는 블록 태그, 인라인 태그가 가능하다.
  • 인라인 태그의 하위 태그로는 인라인 태그는 가능하지만, 블록 태그는 가능하지 않다.
    • !!! 예외가 있다. <a> 앵커 태그는 인라인 태그지만 하위 태그에 블록태그가 가능하다.
<span>
  <h1>제목</h1>
</span>
<!-- 불가능!!!! -->
  • <ul> 태그의 자식으로는 꼭 <li>가 와야 되지만, <li> 의 하위요소로는 어느 것이든 가능하다.
  • 블록 요소들은 text-align으로 맞춰지지 않는다.

box-sizing

<p class="txt1">
  세로중앙<br />
  세로중앙<br />
  세로중앙
</p>
p {
  width: 150px;
  /* height: 150px; */
  background-color: powderblue;
  float: left;
  margin: 15px;
  text-align: center;
  line-height: 20px;
  padding-top: 45px;
  height: 105px;
}
/* padding-top이 늘어난만큼 height 값이 줄어들어야 150px을 유지할 수 있다.*/

이러한 것을 box-sizing을 이용해서 할 수 있다.

  • box-sizing 속성
    • 기본값은 content-box로 콘텐츠 영역 너비 값으로 사용
    • border-box - border, padding까지 너비 값으로 사용

transform

transform에는 2차원과 3차원이 있는데, 현재는 2차원 transform에 대해서만 배웠다.

  • 2차원 transform은 x, y축을 이용하고, transform의 값을 줄 때는 변형함수를 줘야 된다.
  • 변형함수에는 translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew(ax, ay), skewX(ax), skewY(ay)가 있다.
  • skew, rotate에는 deg 단위를 사용해야 된다.
.box1 {
	transform: translate(10px, 50px);
}
.box2 {
	transform: scale(150%);
}
.box3 {
	transform: skew(-20deg);
}
.box4 {
	transform: rotate(60deg);
}
  • transform-origin : 변형 기준점 설정(px, 백분율, 위치(left))
img {
	transform: 
}
  • 여러 transform 속성을 사용하고 싶다면 따로 속성을 적용해줄 경우에는 덮어 쓰게 되기 때문에 띄어쓰기를 이용해서만 구분해줘야 된다.
.box5 {
	transform: translate(10px, 20px) rotate(35deg) scale(150%);
}

위치를 맞추기 위해서 쓸 때

위치를 맞출 때 transform 속성을 사용하기도 한다.

/* 대충 이해를 위해서 img라는 선택자 사용 */
img {
	position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

transition

  • transition은 transform을 적용할 때, 바뀌는 지연 시간, 속도 등을 설정하는 속성이다.

  • transition-property

    • all을 지정하면 모든 속성(기본값)
    • none
    • 트랜지션을 걸 속성
  • transition-duration : 트랜지션 진행 시간

    • 진행 시간동안 속성이 자연스럽게 바뀐다.
    • transition-property가 여러 개일 경우에는 쉼표로 구분해서 진행시간도 여러 개 작성할 수 있다.
  • transition-timing-function : 트랜지션 속도 곡선

    • ease : 천천히 -> 빨라지다가 -> 천천히
    • linear : 똑같은 속도
    • ease-in : 느리게 시작
    • ease-out : 느리게 끝남
    • ease-in-out : 느리게 시작 -> 느리게 끝남
  • transition-delay : transition이 적용되기까지의 시간 설정

.box1 > div {
  width: 100px;
  height: 100px;
  background-color: blue;
}
/* background-color, width, height의 값이 바뀐다. 
.box1:hover>div {
           background-color: #923;
           width: 200px;
           height: 150px;
           transition-property: all;
           transition-duration: 1s, 0.5s;
           transition-timing-function: cubic-bezier(.01,1.52,.46,-0.56);
           /* transition-delay: 0.5s 1.5s; */
       }
  • transition 속성을 축약해서 한번에 사용할 때는 순서에 맞게 적어야 된다.
.box1:hover>div {
	background-color: #923;
    width: 200px;
    height: 150px;
    transition: all 2s, 5s, cubic-bezier(.01,1.52,.46,-0.56) 1s, 5s; 
}
  • transition을 이용할 때, transform-origin은 적용되지 않는다.
  • transform-origin : 기준점을 변형해주는 속성이다. x축 y축 z축을 기준으로 설정할 수 있다. (단위는 길이값, %, left 같은 위치 사용)
<div>
  <div class="box3"><div>text-box</div></div>
</div>
.box1 > div {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.box3:hover>div {
  transform: rotate(45deg);
  transform-origin: left top;
  background-color: green;
  transition: all 1s linear .75s; 
}

꾸준히 올리고자 노력하는데 생각보다 잘 되지 않는다.
역시 html과 css는 간단해보이면서도 참 어려운 것 같다.

profile
경험한 것을 기록

0개의 댓글