본문 바로가기

웹:WEB/유용한정보

 (12)
a 태그 사이 공백 제거하는 방법 ▒ a 태그 사이 공백 제거하는 방법 코딩을 하다보면 태그와 다음 태그 사이에 margin, padding값이 없는대도 1px정도의 공백이 생기는 경우가 있다. 1 2 3 4 5 6 7 8 9 10 11 .test a {display:inline-block;} 탭메뉴1 탭메뉴2 탭메뉴3 탭메뉴4 Colored by Color Scripter cs 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결이 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 1 2 3 4 탭메뉴1탭메뉴2탭메뉴3탭메뉴4 Colored by Color Scripter cs 그러면 해결방법은? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .test {font-size:0;} .im..
CSS 단위 px pt em rem % 란 무엇이며 차이점은? ▒ CSS 단위 px pt em rem % 란 무엇이며 차이점은? CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰인다. 크게는 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나뉜다. ■ 절대단위 고정된 값을 출력하며 절대 크기가 변하지 않는다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다. ※ px (픽셀) 값을 주로 사용한다. cm (센티미터) mm (미리미터) in (인치) px (픽셀) pt (포인트) pc (파이카) ■ 상대 단위 부모 요소나 다른 요소의 크기에 영향을 받아 ..
복잡한 표 <table> 코딩 쉽게 하기 ▒ 복잡한 표 코딩 쉽게 하기 셀병합이 없는 단순한 표는 사실 코딩하는데 있어서 별 문제가 없다. 그러나 셀병합이 많이지는 복잡한 표는 코딩하는데 엄청 헷갈린다. 이를 해결할 수 있는 무료 사이트가 있다. 사이트바로가기 HTML Table generator - TablesGenerator.com ↧ Expand ↧↥ Collapse ↥ Result (click "Generate" to refresh) Copy to clipboard Copy to clipboard Preview Close [X] Select table theme Please, compose a theme for your table by selecting color, border and stripes themes shown below. w..
절대경로와 상대경로 파헤치기 ▒ 절대경로와 상대경로 파헤치기 우리가 코딩을 할 때 많이 파일이나 이미지를 가져오는 경로 때문에 필수적으로 알아야 할 개념이다. 절대경로는 거의 헷갈리지 않지만 상대경로를 어려워 하는 사람들이 꽤 있어서 포스팅해 본다. ㅎㅎ | 아래 그림처럼 이런 폴더와 파일이 있다고 가정하자 (임의) ◎ 절대경로 절대경로ex1 현재 나는 sub01.html이라는 파일을 작성 중에 있다. 그런데 상위에 있는 img폴더 내 logo.jpg를 불러와야 한다. 이 때 절대경로는 ? 보는 바와 같이 나의 도메인 주소를 시작으로 최상위 폴더부터 거슬러 내려가면 된다. 절대경로ex2 그럼 작성중인 파일만 left_menu.html 으로 바뀌면 logo.jpg 절대경로는 어떻게 될까? 위와 동일하다. 이처럼 절대주소는 내가 작성중..
제이쿼리(jQuery) 선택자 종류 ▒ 제이쿼리(jQuery) 선택자 종류 흔히 우리가 CSS에서 사용하는 선택자는 모두 사용이 가능하다고 생각하면 된다. 그 외에도 유용한 선택자가 무수히 많다. $(function() { $('#ex').css('color', '#cccccc'); //id값 ex가 선택자! }); ※ 선택자 안의 값은 ' '작은따옴표나 " " 큰따옴표로 묶는다. $('#id') id값 선택 $('.class') class값 선택 $('#id, .class') 다중선택은 쉼표로 구분 $('div') div요소 선택 $('div, p') 다중선택은 쉼표로 구분 $('div>p') div안의 p요소 선택 $('li:first-child') li요소의 첫번째를 선택 $('li:nth-ofy-type(2)') li요소의 두번째를..
HTML 페이지에 아이콘 넣는 방법 (fontawesome) ▒ 웹페이지에 아이콘 넣는 방법 (fontawesome) 단 한줄의 코드를 입력하고 아이콘마다 정해진 클래스를 추가하면 번거로운 이미지 작업을 하지 않아도 위와 같은 아이콘을 넣을 수 있다. ■ fontawesome 스크립트소스 얻기 | 홈페이지바로가기 간단한 회원가입 절차를 거치면 본인만의 스크립트소스를 제공하는 형식이므로 홈페이지에 방문해서 회원가입 절차를 진행해야 한다. 회원가입방법 더보기 무료버전을 선택한다. 본인의 이메일 주소를 넣은 후 Send Kit Code를 클릭한다 최종 이메일 주소 확인과 함께 링크하나를 보낸다고 한다. 이메일을 열어서 박스친 부분을 클릭한다. 사용할 비밀번호를 입력후 버튼을 클릭한다. 표시한 곳만 (이름과 성) 입력후 Lets's go! 버튼을 클릭한다. 최종적으로 본..
DIV 레이어 가로 세로 가운데 정렬 하기 ▒ DIV레이어 가로 세로 가운데 정렬 하기 가로 가운데 정렬은 text-align:center , margin:0 auto; 등 CSS가 작동이 잘되는 반면 세로 가운데 정렬은 그렇게 쉽지만은 않다. 그래서 코딩을 할 때마다 여기 저기 검색을 하면서 했었던 기억이...ㅎㅎ 아무튼 이 포스팅에서는 3가지 방법만을 소개 하지만 이 방법 말고도 여러 방법이 있다는 것을 기억하자! ■ position:absolute 연두색박스 가변적인(반응형) 요소에도 적용이 가능하나 크기가 없는 경우에는 적용이 안된다. 결과 ■ display:table / display:table-cell / vertical-align:middle | 인라인요소 가운데정렬 | 블럭요소 박스 ■ line-height 가운데정렬 감싸는 요소의..
드림위버 없이 이미지맵 링크 만들기 드림위버는 과거에 많이 사용했던 프로그램이지만 현재는 무거운데다 느리고 이상한 오류와 함께 강제종료 되는 현상이 자꾸 나타나서 많이 쓰지 않는 추세라고 한다. (필자도 안씀) 드림위버의 딱 하나 좋은기능이라고 한다면 이미지맵 정도? 그렇다고 이거 하나를 위해서 덩치큰 프로그램을 설치하는 것도 참 부담스럽다. 게다가 유료다. 하지만 요즘 없는게 없는 시대 아니던가~ 온라인에서 정말 간단하게 이미지맵 주소를 획득할 수 있는 사이트가 있다. 이미지맵좌표값얻기→ ▒ 사용방법은? 사이트에 접속하면 생각보다 간단하게 사용방법을 터득할 수 있지만 혹시나 헤맬 수 도 있는 사용자들을 위해 캡쳐를 해보았다. ① 파일선택을 클릭 후 이미지맵 적용 사진을 불러온 후 업로드를 누른다. ② accept를 클릭한다. ① 원하는 ..

티스토리툴바