반응형 CSS4 [css] float 사용방법 html은 위에서 아래로 출력되지만 옆으로 붙여서 정렬할때 float를 사용합니다. 구조 div{float:left;} div{float:right;} div{float:none;} left : 왼쪽으로 붙음, right : 오른쪽 으로 붙음 none : float을 none함 (float된 것을 없앰) html 부분 1번 박스 2번 박스 3번 박스 css부분 .box1{float:left;width:200px; height:200px;text-align:center; line-height:200px;background:red; color:#fff;border:1px solid #000;} .box2{float:left;width:200px; height:200px;text-align:center; li.. 2022. 12. 6. [CSS] 반응형 중앙정렬 (transform 이용) 반응형일때 이미지나, 배경의 중앙정렬이 골치아플때 자주 이용하는 기법. 부모형태를 작성하고 .boxcenter 부분을 이용 하면 된다. HTML 부분 box style 부분 .container { position: relative; width:300px; height:200px; background:red; margin:0 auto; } .boxcenter{ position: absolute; top:50%; left:50%; width:30%; height:30%; background:blue; text-align:center; transform: translate(-50%, -50%) } 결과 2022. 9. 6. [CSS3] border 사용해서 테두리 넣기 1. 기본적인 사용법 소개 .box1{border:1px solid #000;} //테두리 굵기, 테두리 방식, 테두리 색상 순으로 작성 합니다. 2. 테두리 방식 dotted -점선 dashed - 점선인데 dotted 보다 좀 긴점선 solid - 실선 double - 2줄 여러가지가 있는데 보통 solid 를 가장 많이 사용한다. 3.HTML 작성, 차이점 확인 div{width:200px; height:50px;} .box1{border:5px solid #000;} .box2{border:5px dotted #000;} .box3{border:5px dashed #000;} .box4{border:5px double #000;} 먼저 박스크기는 동일하게 작성, 방식만 다르게 작성했습니다. bor.. 2022. 8. 6. [CSS] width, height HTML 상에서 태그에 css를 이용해서 넓이, 높이를 정해줄수 있다. 보통 px 단위로 해주며 반응형에서는 %로도 작업이 가능하다. box .box{width:200px; height:200px; background:red;} //넓이 200px, 높이 200px;의 빨간색 박스 가로, 세로 200px의 빨간색 박스를 만들 수 있다. 2022. 5. 25. 이전 1 다음 반응형
