전체 글 (17) 썸네일형 리스트형 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 (파이카) ■ 상대 단위 부모 요소나 다른 요소의 크기에 영향을 받아 .. 상 하로 움직이는 스크롤다운 애니메이션 ▒ 상 하로 움직이는 스크롤다운 애니메이션 요즘 웹사이트에서 흔히 볼 수 있으며, 간단한 css로 만들 수 있다. - 사용 방법 | 예제소스 스크롤 시 색이 변하는 고정 메뉴 ▒ 스크롤 시 색이 변하는 고정 메뉴 메뉴는 상단에 계속 고정되며 스크롤 시 색과 크기가 부드럽게 변한다. - 사용방법은 아래와 같다. 메뉴1 메뉴2 메뉴3 CSS와 메뉴쪽만 자신의 디자인에 맞게 컬러 와 크기를 변경하면 된다. 전체 소스는 첨부파일을 다운받는다. | 예제소스 Pixlr | 온라인 포토샵 픽슬러 기본 도구설명 https://pixlr.com/editor/ ▒ Pixlr | 온라인 포토샵 픽슬러 기본 도구설명 나는 그래픽툴을 공부하는 데 있어서 예제를 따라하는게 가장 빠른 습득하는 방법이라고 생각한다. 그래서 기본 도구와 메뉴에 대한 설명을 아주 간단하게 진행할 예정이며 억지로 외우는 것은 그만두라고 말하고 싶다. 오늘은 왼쪽에 위치한 도구에는 어떠한 것들이 있는지 살펴보자! (언어를 바꾸는 방법 상단메뉴-> language -> 한국어) ⓐ 크롭/자르기 : 우리가 작업하는 이미지(도큐먼트)를 원하는 크기로 자를 수 있다. (클릭->드래그) ⓑ 이동/선택 : 작업하는 이미지(도큐먼트)의 텍스트는 그림 등을 선택하거나 이동할 수 있다. ⓒ 복제(도장)툴 : 복사된 소스를 원하는 곳에 도장처럼 콕콕 찍을 수 있는데.. 확장자 .EML 파일 여는 방법 / 설치 노노 ▒ 확장자 .EML 파일 여는 방법 / 설치 노노 처음에는 상대가 파일을 잘못 보냈거니 했던 기억이 난다. (아웃룩메일은 사용하지 않으니 더 그랬을 듯;) 이제 이런 첨부파일을 받으면 당황하지 말고 설치도 필요없는 온라인 뷰어를 이용해보도록 하자! 온라인뷰어 바로가기 딱 필요한 기능만 제공하므로 군더더기가 없는게 크나큰 장점이다. ■ 사용 방법 녹색 버튼을 누르고 보고자 하는 eml파일을 업로드 하면 ↓ 위와 같이 베일에 싸여있던 파일의 내용이 짠~하고 나타난다. (2초도 안걸린 듯) 간혹 크롬이나 파이어폭스에서 첨부파일이 다운이 안될 때가 있는데 그때는 첨부파일에 마우스를 가져다 대고 ctrl키와 함께 클릭하면 해결된다. 복잡한 표 <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 절대경로는 어떻게 될까? 위와 동일하다. 이처럼 절대주소는 내가 작성중.. 이전 1 2 3 다음
