본문 바로가기

분류 전체보기

(161)
[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..
워드프레스 도메인 주소 변경하기 매번 새로 워드프레스를 설치하고, 도메인을 변경하는데 매번 헷갈려 정리해두려고 합니다! 01. 루트에 디렉토리를 만들어 워드프레스 설치하기 워드프레스를 설치 시 루트에 바로 업로드하지 말고, 파일을 하나 만들어 업로드하면 관리하기 수월합니다. 처음 호스팅을 하면 이렇게 너무 깨끗해요. 거기에 워드프레스를 다운로드해서 알집을 풀면, 파일이 무지 않은데, 바로 루트 파일에 넣으면 나중에 이 호스팅에 다른 뭔가를 할 때, 굉장히 헷갈려집니다. 그래서 루트에 워드프레스를 넣을 디렉토리를 만들어주고 그 안에 설치합니다. 파일명은 원하시는 대로! 저는 여기에는 wp라고 디렉토리를 만들었습니다. (www > wp > 워드프레스파일들) 그리고 이제 워드프레스로 설치 후 도메인을 변경해보아용 02. 워드프레스에서 도메인..
워드프레스 설치하기 요즘 워드프레스를 이용해 웹사이트를 만들고 있어요. 그런데 워드프레스를 써보니 너무 많은 기능에 내가 원하는 기능이 어디있는지 찾기가 힘들더라고요. (분명 방법이 있을거 같은데..) 검색을 많이 해보는데 생각보다 한국어로 된 글이 없고 원하는 답을 찾기 힘들었어요. 그래서 워드프레스를 하면서 유용하거나 공유할 만한 것들이 있으면 적어볼까 합니당! 우선 첫번째글은 역시나 시작인 워드프레스를 설치하는 방법을 올려봅니다. 1. 호스팅을 먼저 해주세요. (저는 주로 cafe24를 이용합니다. 가입하고 호스팅을 구매해주시면 됩니다. ) 2. 워드프레스 웹사이트에서 워드프레스를 다운받아줍니다. https://ko.wordpress.org/ Blog Tool, Publishing Platform, and CMS - ..
[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]브라우저 현재 가로 세로값 구하기 아주 쉽게 브라우저의 현재 가로 세로값 알아내기! 사실 아주 간단하고 누구나 알고 있을 법한 내용인데, 혹시라도 처음 html과 css를 배우는 사람들에게 유용 할 것 같아 글을 써보려고 해요. 브라우저의 가로값은 반응형 웹사이트를 만들때 유용하게 사용할 수 있어요. 창이 어느정도 작아지는 시점에 요소들의 위치나 크기등을 변경해줘야 할 경우와 웹사이트가 완성 되었을때 잘 되었는지 체크할 경우에 가로값을 알면 유용합니다. 1. 크롬 브라우저 가로 세로값 확인 방법 F12를 눌러 DevTool를 켜줍니다. 그리고 화면의 가로 크기를 줄였다가 늘렸다 해보세요.그럼 브라우저 오른쪽 상단에 가로 x 세로 크기가 뜹니다.노란색 표시처럼 가로,세로크기를 알 수 있어요. 엄청간단 but 유용 2. 익스플로러 브라우저 ..
모두체크/모두해지 체크박스 만들기 주로 회원가입할 때 동의하기 부분에서 많이 사용하는 체크박스를 만들어봤어요. 특징은 1. '모두 선택하기', '모두 해지하기' 2. 하나라도 해지되면 모두 선택 해지 html과 css는 그 전글에 올려놨어요. 이 전글이예요. -> [css] 회원가입 폼 체크박스 요건 완성된 모습입니다. 작동되는건 이전글에서 확인! 자바스크립트 부분입니다. html 과 css는 이 전글에 있어요. https://ddorang-d.tistory.com/9 [CSS] 회원가입폼 체크박스 체크박스를 활용하는 회원가입 폼을 만들어 보려합니다. 네이버 회원가입 폼을 보고 만들어서 네이버의 회원가입 폼과 아주 유사한 디자인을 가지고 있어요. 특징은! 1. 첫번째 체크박스(모두 ddorang-d.tistory.com Javascrip..