이 부분이 헷갈려서 정리를 해둬야겠다.
<a>
앵커 태그는 인라인 태그지만 하위 태그에 블록태그가 가능하다.<span>
<h1>제목</h1>
</span>
<!-- 불가능!!!! -->
<ul>
태그의 자식으로는 꼭 <li>
가 와야 되지만, <li>
의 하위요소로는 어느 것이든 가능하다.text-align
으로 맞춰지지 않는다.<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에는 2차원과 3차원이 있는데, 현재는 2차원 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:
}
.box5 {
transform: translate(10px, 20px) rotate(35deg) scale(150%);
}
위치를 맞출 때 transform 속성을 사용하기도 한다.
/* 대충 이해를 위해서 img라는 선택자 사용 */
img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
transition은 transform을 적용할 때, 바뀌는 지연 시간, 속도 등을 설정하는 속성이다.
transition-property
transition-duration
: 트랜지션 진행 시간
transition-timing-function
: 트랜지션 속도 곡선
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; */
}
.box1:hover>div {
background-color: #923;
width: 200px;
height: 150px;
transition: all 2s, 5s, cubic-bezier(.01,1.52,.46,-0.56) 1s, 5s;
}
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는 간단해보이면서도 참 어려운 것 같다.