본문 바로가기

퍼블리싱/HTML&CSS

(23)
[CSS]div 3개 레이아웃 만들기( calc() 사용법) html로 레이아웃을 짜다보면 객체들에게 똑같은 가로값을 주고 싶은데 계산하기 쉽지 않을때가 많습니다. 또 반응형으로 웹사이트를 만들다보면, 값을 딱 지정해 놓으면 브라우저 크기마다 다르게 설정해 줘야하는 번거로움이 있는데 이렇때 사용하면 좋은 CSS 속성중에 하나가 calc 입니다! 사용가능한 브러우저! 이정도면 크게 무리없이 사용가능할 것 같아요! (공무원분들이 많이 사용할것 같은 사이트에는 쓰기 무리가 있겠네욤) 작성 방법 예시 1 2 3 4 5 6 7 8 div { width : 95%; /* calc() 를 지원하지 않는 브라우저를 위한 fallback */ width : -webkit-calc(100% - 20px); /* WebKit */ width : -moz-calc(100% - 20px..
구글 웹폰트 CDN 사용법 폰트를 다운받아 파일을 연결시키는 방법도 있긴하지만(@font-face 정의) 귀찮으니깐 구글 웹폰트를 사용하곤 한다. 하지만 구글 CDN를 사용하면 편리하긴 하지만 단점들이 있다. 사용법 전에 단점부터.. ㅎㅎ 구글 웹폰트 CDN 사용의 단점 01. 서버에 직접 업로드하는 것보다 속도가 느리다. 02. 구글 CDN서버가 제대로 동작하지 않을때 웹폰트를 제공받지 못함 구글 웹폰트 CDN사용법 01. https://fonts.google.com/ 구글 웹폰트에 접속 02. 원하는 폰트의 오른쪽 상단의 주황색 플러스버튼을 눌러준다. 플러스버튼을 누르면 마너스버튼으로 바뀌면서 하단에 Family Selected가 나옵니다. 03. CUSTOMIZE를 눌러 원하는 폰트 굵기와 언어를 선택합니다. 04. EMBE..
[css]div 가로 중앙 정렬 하는 방법 가로 중앙 정렬 하는 방법(세로정렬은 다른 포스팅에 있어요! ) 세로정렬포스팅 -> div 세로 가운데 정렬하는 방법 요소를 가로 정렬하는 방법은 몇가지가 있다. 그런데 css초창기 어떤 방법을 적용해야하는지 또 왜 적용이 되지 않느지에 대해 혼란스러웠던 기억이 있다. 그래서 가운데 정렬하는 방법과 어떤 상황에 쓰면 좋은지 적어보려고 한다. 01. text-align: center가장 기본적이고 쉬운 방법입니다. - text-align은 블럭요소 안에 있는 인라인 요소에게 적용됩니다. 인라인 요소는 다음이 있어요.- b, big, i, small, tt- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var- a, bdo, br, img, map, ob..
[CSS]float 이해하기 & clear하는 방법 1. float 이해하기우선 float의 작성 방법입니다. 123div{float:left;}div{float:right;}div{float:both;}cs 이렇게 float는 왼쪽, 오른쪽, 양쪽으로 사용가능합니다. 객체를 어느쪽으로 띄울 것인가 결정하는것인데, 보통은 문서을 왼쪽에서 오른쪽으로 읽기 때문에 float:left의 사용빈도가 높습니다. float를 사용하는 방법에 대해 좀 더 설정하자면!float는 블록상태의 객체를 정렬할때 많이 사용하는 속성입니다. 블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없습니다. 그럴때 사용하는 속성 중 하나가 float입니다. 블록요소인 div 태그는 한자리 가득 차지 하고 있습니다. 다른 요소와 나란히 놓기 위해 css에..
[CSS] 회원가입폼 체크박스 체크박스를 활용하는 회원가입 폼을 만들어 보려합니다. 네이버 회원가입 폼을 보고 만들어서 네이버의 회원가입 폼과 아주 유사한 디자인을 가지고 있어요. 특징은! 1. 첫번째 체크박스(모두동의하기)를 누르면 나머지 체크박스들이 모두 체크된다. 2. 모두 체크된 상태에서 하나만 체크를 풀면 모두 동의하기 박스의 체크도 없어진다. 3. 체크박스를 안누르고, 동의하기를 누를 시 경고창이 뜬다. 이 사항들을 모두 만족하는 회원가입 폼을 만들거예요. 완성된 모습입니다. 이용약관, 개인정보 수집 및 이용, 위치정보 이용약관(선택), 프로모션 안내 메일 수신(선택)에 모두 동의합니다. 이용약관 동의(필수) 여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버..
[css]div 세로 가운데 정렬하는 방법 css에서 가로정렬은 어렵지 않으나, 많이들 새로 정렬을 어려워한다. 나도 아직도 잘모르니만, 그래도 아는 만큼만 적어보장 div의 새로 정렬하는 방법은 찾아보니 다양한 방법이 있었다. 하지만 모든 브라우저에서 잘 작동하고 내가 자주 쓰는 방법ㅋㅋㅋ만 적어봐야지 1. 세로정렬 하는 방법1- line-height 이용 * 이럴때 쓰세요! - 텍스트 세로 정렬 할때! - 버튼 만들때! 근데 한줄이상이면 깨지고, 글씨체가 섞이거나 한글일 때 가끔씩 몇픽셀씩 안맞을 때가 있어요. 방법. 1. height 와 line-height를 동일한 값으로 준다. HTML 123 새로 정렬을 해보아용 cs CSS 1 .box{width: 300px;height: 100px;line-height:100px;}cs 구현된 모습..
height:100%를 적용시킬 방법 height: 100%가 css에서 먹히지 않았던건 그동안 왜 의문을 가지지 않았는지 모르겠다. 그런데 질문을 받았다. "왜 안돼요 width: 100%는 되는데?" 음 원래 그것만 쓰면 안되는데...? 왜지? 벙쩠던 순간이 있었다. 그래서 서칭했던 정보들에 대해 적어보려한다.우선 " WHY IS NOT HEIGHT 100% WORKING? " 답은 퍼센트는 상대적 단위이고, 부모의 값의 영향을 받기 때문이다. 그렇니까 부모에게도 높이값을 지정해주면, 먹힌다. 근데 여전히 div의 width는 100%가 먹히는데 height가 먹히지 않는 이유는 의문이다. 요건 그런가보다 하고 넘어가야 할 것 같다. 언제나처럼 ㅋㅋㅋㅋ 그럼 height:100%를 적용시킬 방법에 대해 알아보자! 1. 부모를 찾아가 he..