태그3 마우스를 올리면 이미지 확대되게 하기(CSS) 본문 이미지나 썸네일 이미지에 마우스를 올렸을 때 이미지가 확대되어 보이게 하는 효과를 간단한 CSS로 구현할 수 있다. 이미지에 생동감을 줄 수 있고 페이지 로딩 속도에 큰 영향도 주지 않아서 가볍게 쓸 수 있다. HTML 코드 이미지에 클래스네임(thumb)을 주고, 이걸 img-wrap이라는 div와 box라는 div로 감싼 형태이다. CSS 코드 이미지를 가로 300px으로 출력하되 이미지에 마우스오버하면 가로세로 각각 1.2배 확대가 0.5초에 걸쳐 일어나고, 마우스를 떼면 0.3초에 걸쳐 다시 원래 크기로 돌아가게 되도록 설정한 것이다. 샘플 예제 코드 다운로드 열린노트/IT·SW·디자인 html의 기본 표(table) 코드 공유 지난번에 Table Generator를 소개한 적이 있다. 간단한 클릭 몇 번만으로 원하는 모양의 예쁜 테이블 코드를 자동으로 생성해 주는 사이트이다. http://www.tablesgenerator.com/ 그런데 막상 다양하고 예쁜 모양의 표를 만들어 쓰려니, 매번 포스팅할 때마다 코드를 가져오기가 너무 번거로웠다. 여러 가지 테이블을 미리 구비해 놓으면 좋겠지만, 너무 개수가 많아지면 나중에 너무 골치아파질 것 같다. 그래서 아주 단순한 모양의 표를 짜서 코드를 공유한다. 1px의 회색 테두리가 있고 셀 배경이 흰색인, 그냥 기본 표 코드이다. CSS에는 다음 코드를 추가해 준다. 혹시 제목줄을 쓸까 싶어서 th(첫째 줄) 속성에는 배경색과 별도의 테두리를 설정해 두었다. 개별 속성은 임의로 수정해.. 열린노트/IT·SW·디자인 엔티티 코드(Entity Code) 사용하기 : HTML에서 특수문자 코드 입력하는 방법 웹페이지상에서 다음과 같은 문자들을 본 적이 있을 것이다. 이런 문자를 '엔티티 코드(Entity Code)'라고 한다. & " HTML이나 XHTML 문서를 코딩할 때 특수 문자(참조 문자)를 써야 하는 경우에는 이러한 엔티티 코드 또는 엔티티 넘버로 변환해서 입력해야 한다. 변환하지 않고 특수 문자를 그대로 입력해 버리면 컴퓨터가 문서를 읽을 때 실제 문서 내용(contents)과 코드를 구분하기 못하는 문제가 발생하기 때문이다. 가령, 어떤 문서 내용에 꺽쇠 괄호 ' < '가 포함돼 있다면, 컴퓨터는 이 문서를 읽어들일 때 꺽쇠 괄호를 HTML 태그의 시작 기호로 받아들여 버린다. 또 큰따옴표 ' " '는 HTML 속성 값으로 인식될 수 있고, ' & '은 엔티티 기호의 시작으로 인식될 수 있다. .. 열린노트/IT·SW·디자인 이전 1 다음
