반응형 IT/html + css28 [반응형] 반응형 컨텐츠 div 사이간격 #tab li 사이간격 , .tabcontent li 사이의 간격을 각각 padding:5px; , padding:15px; 로 주고 전체를 감싸고 있는 태그에 margin:0 -5px; margin:0 -15px; 를 하게되면 양끝 padding이 빠지고 가운데에 겹쳐지는 요소에 간격만 벌어지고 전체적인 width값은 동일하게 된다. 반응형. 전체 날씨 천둥 번개 햇빛 바람 폭우 우박 쨍쨍 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터 소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다. 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터 소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다. 기상청 2020년 7월 날씨 안내 - 기상청 날씨 예.. 2020. 7. 14. [CSS] input custom css input 체크박스나 라디오 버튼을 그대로 가져다 쓰면 모양이 예쁘지 않아서 CSS를 통해 체크되는 모양을 바꿀 수 있는 input custom css 입니다. 글씨를 클릭해도 (display:none 해놓은) input태그에 체크가 될 수 있도록 글씨를 label 태그 안에 넣어주고 클릭을 하면 글씨 앞에 있는 i태그가 체크되는 박스 모양입니다. 큰 체크박스 큰 체크박스 큰 라디오버튼 큰 라디오버튼 /*스크립트 사용하지 않은 체크박스 커스텀 css*/ input.chkBasic[type="checkbox"] {display:none; vertical-align:middle; } input.chkBasic[type="checkbox"] + label.chkBasic {vertical-align:middl.. 2020. 6. 25. [menu] 한줄로 나열되는 탭메뉴(반응형) div와 div 사이를 margin으로 여백을 주는것도 좋지만 반응형을 하게되면 줄어들때마다 여백을 새로 지정해줘야하기 때문에 번거로움이 있어서 좀더 편한방법으로 할수 있는 css를 정리했다. html구조는 너무 간단. 평소와 같다. 111 222 333 444 555 666 777 888 999 #container{max-width:1400px; width:100%; margin:50px auto 0; } #tab{margin:0 -5px; border:1px solid blue;} #tab li{float:left; display:table; width:20%; height:65px; padding:5px;} #tab li a{display:table-cell; vertical-align:middle.. 2020. 5. 18. [gnb] gnb menu 스크립트 사용없이 마우스 오버 효과만으로 작동하는 sub_gnb menu 배경 효과. 메뉴에 마우스 올렸을 때 header부분 배경, gnb 글씨 색 변경 및 하단 sub_menu width:100% 배경이 생기고 상단 메뉴를 기준으로 하위메뉴가 정렬됨. GNB 메뉴1 서브메뉴1 서브메뉴2 메뉴2 서브메뉴3 서브메뉴4 서브메뉴5 메뉴3 서브메뉴6 서브메뉴7 서브메뉴8 서브메뉴9 서브메뉴10 메뉴4 서브메뉴11 서브메뉴12 메뉴5 .header{position:absolute; left:0; top:0; width:100%; height:100px; transition:all 0.5s; z-index:100;} .header:hover{background-color:#fff;} .header > h1{po.. 2020. 5. 6. [animation] 간단한 애니메이션 효과 .box{position:relative; width:260px; height:300px; background-color:orangered;/*background:url(이미지 주소) no-repeat;*/} .box:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); /*background:url(이미지 주소) no-repeat;*/ opacity:0; transition:0.5s all;} .box:after{content:"+"; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); .. 2020. 4. 30. [css] overflow-x:scroll 생성하기 html 에서 ul li가 여러번 반복되는데 너무 길어질것 같아서 li는 한번만 보이게 밑에 부분은 지웠어요~ 스크롤 안녕하세요 티스토리입니다. 10%1000원~ #new_item_wrap{position:relative; margin-top:-1.563em; width:800px; height:200px; padding:2.25em 0 4.153em 1em; border-radius:1.56em 1.56em 0 0; box-shadow:-2px -3px 5px 1px rgba(0,0,0,0.15); background:#c2f3dc; } .new_item_box{margin-top:1.438em; box-sizing:border-box; width: 100%; overflow: hidden; overf.. 2020. 3. 10. [CSS] display:tabel 을 이용한 연혁표 만들기 2019 11.24 on sunday 티스토리 블로그 개설 11.24 첫 포스팅 시작함 11.25 on sunday 바람개비마을 포스팅 11.26 서촌 준수방키친 포스팅 2019 on sunday 티스토리 블로그 개설 11.24 첫 포스팅 시작함 11.24 on sunday 바람개비마을 포스팅 11.25 서촌 준수방키친 포스팅 11.26 * { margin: 0; padding: 0; box-sizing: border-box; } ul,li { list-style: none; } a { text-decoration: none } #history { width: 1200px; margin: 0 auto; } #history h2 { text-align: center; font-size: 24px; colo.. 2020. 1. 19. [css] display:table-cell;을 이용한 갤러리 만들기 갤러리 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 * { margin: 0; padding: 0; box-sizing: border-box; } ul,li { list-style: none; } a { text-decoration: none } #content_box { height: 400px; background-color: slategray; } #gallery { width: 580px; height: 230px; } .gallery_title { height: 45px; border-bottom: 1px solid #dfdfdf; mar.. 2020. 1. 18. [css] display:table-cell 을 이용한 원형에 배경넣기 on sunday tistory html+css javascript jquery re:view 2020. 1. 17. 이전 1 2 3 4 다음 반응형
