뇌 채우기 공간

css속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 .box{ width:100px; height: 300px; background: gray; margin: 30px; transition-property: width, background; transition-duration: 1s; } .box:hover{ width:300px; background: dodgerblue; } transition은 변하기 전 요소에 적어주면 된다. transition: width 1s, background 1s; 이렇게 단축 속성으로 적을 수 있다. transition-property 전환 효과를 사용할 속성 이름을 설정 transition: all 1s; transition: 1s; 둘다 같은 뜻이다...

inline span{ width:100px; height: 300px; background: gray; margin: 30px; position: absolute; } 인라인 요소인 span태그에 position을 넣으면 블럭요소로 바뀐다.

어떤 요소가 더 위에 쌓이는지? 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관) 2. position이 모두 존재한다면 z-index값이 높을수록 위에 쌓임 3. postion 속성의 값이 있고, z-index 값이 같다면 html의 마지막 코드일 수록 위에 쌓임 position> z-index> html마지막 코드 1 2 3 4 5 .box-group{ display: flex; } .box-group .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 30px; font-size: 30px; display: flex; justify-conte..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성값 static (기본값): 유형의 기준이 없음 , 배치 불가능 relative: 요소 자기 자신이 원래 있었던 위치 기준으로 배치 absolute: 위치 상 부모 요소를 기준으로 배치 fixed: 브라우저(뷰포트)를 기준으로 배치 sticky : 스크롤 영역을 기준으로 배치 .parent{ width:400px; height: 300px; border: 4px dashed lightgray; position: relative; } .child{ width: 150px; height: 100px; background: tomato; border: 4px dashed red; position: absolute; top: 50px; left:1..

■float 요소에 float속성을 적용하면 적용된 요소 주변으로 text가 흐르게 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining ess..

overflow 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을때, 내용의 보여짐을 제어 visible : 넘친 부분을 자르지 않고, 그대로 보여줌 hidden : 넘친 부분을 잘라내고, 보이지 않도록 함 scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 ( 무조건 스크롤 바 만듬) auto : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 1 2 3 .parent{ width:300px; height: 250px; border: 4px solid; overflow: scroll; } .parent .child{ width: 100px; height:100px; background: blue; border: 4px solid red; display: flex; j..

box-sizing 요소의 크기 계산 기준을 지정 속성값 content-box : 너비(width, height)만으로 요소의 크기를 계산 border-box : 안쪽 여백과 테두리 선을 포함하여 요소의 크기를 계산

padding 요소의 내부 여백을 지정 % : 부모 요소의 너비에 대한 비율로 지정됨 padding: 위 우 아래 좌; padding: 위 (좌,우) 아래; padding: (위,아래) (좌,우); padding: (위 아래 좌 우); padding-top / bottom/ right / left 개별 속성도 가능 크기 증가 추가된 padding값만큼 요소의 크기가 커지는 현상 div{ width:100px; height:100px; background: skyblue; padding:20px; } padding을 넣기 후 -> 전 크기가 커졌다. 안쪽 여백을 사방으로 주었기 때문이다. 크기가 이렇게 커지게 되면 매번 계산을 해야하므로 자동으로 계산되는 것은 box-sizing: border-box; 속..

margin % : 부모 요소의 가로 너비에 영향을 받는다. .parent{ width:400px; height:200px; border: 4px solid red; } .child{ width:100px; height:100px; border: 4px solid; margin: 50%; } margin: 위 우 아래 좌; margin: 위 (좌,우) 아래; margin: (위,아래) (좌,우); margin: (위 아래 좌 우); margin-top / bottom/ right / left 개별 속성도 가능 마진 중복(병합, Collapse) 마진의 특정 값들이 중복 되어 합쳐지는 현상 1. 형제 요소들의 margin-top과 margin-bottom이 만났을때 2. 부모 요소들의 margin-top과..

background: 색상 이미지경로 반복 위치 스크롤특성; ■background-color(background) div{ width:200px; height:100px; background: skyblue; } ■background-image 요소의 배경에 하나 이상의 이미지를 삽입할 수 있다. div{ width:1000px; height:1000px; background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832"); } div{ wid..