HTML & CSS (36) 썸네일형 리스트형 이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트) *이용한 사이트 http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu *기본구성 -이미지를 삽입한다 -사이트에서 이미지파일을 선택하여 업로드 한 후, 특정영역을 누르고 좌표가 뜬 아래의 코드를 복사하고 코드에 붙여넣는다.(불필요한 부분은 삭제하기) CODE 참고 화면 메뉴에 hover시 글자 아래에 밑줄 생기기(transition) *기본 구성 -글자에 position:relative 주기 -a::after{positon:absolute;}을 통해 따라가게 만들고 처음 width를 0으로 설정 -hover됐을시 after에 transition되어 width가 점차 자연스럽게 커지게 만들기 CODE 기관 사업 후원 참여 소식 실행화면 1depth와 2depth 메뉴 만들기 1뎁스와 2뎁스 1depth: 처음 보이는 메뉴 (상위) 2depth: 메뉴 안의 또 다른 메뉴 (하위) *전체적인 구성 ul(전체 메뉴 묶음)>li(1뎁스)>a(1뎁스 메뉴명) >ul(2뎁스 메뉴)>li>a -position:relative(1뎁스) 와 absolute(2뎁스)로 top 위치를 조정해 아래에 배치 1)1뎁스 아래에 부분 2뎁스 구성 1 CODE 회사소개 회사개요 ceo인사말 회사연혁 특허인증현황 찾아오시는 길 제품소개 신제품 선풍기 여름가전 겨울가전 주방가전 생활가전 환경가전 홍보센터 공지사항 언론보도 카탈로그 홍보활동 고객지원 자주묻는질문 온라인문의 서비스센터 제품설명서 메인이미지 1 실행화면 2)1뎁스 아래에 전체 2뎁스 구성 *position:relative를 전체를 구성하는 gn.. 자식태그 호출 사용법 nth-child(n), nth-of-type(n) *첫번째 자식, 마지막 자식 호출 -대상요소:last-child -대상요소:first-child *부모의 몇번째 자식 호출 -대상요소:nth-child(n) *부모의 특정한 요소 중 몇번째 자식 호출 -대상요소:nth-of-type(3) *홀수, 짝수의 배수 호출 nth-child(3n) >3의 배수 (3,6,9..) nth-child(3n-1)? >3x0-1=0 3x1-1=2 이런식으로 짝수의 배수 *참고 ex: /* 몇번째자식호출할때 ,근데 사실 확장성때문에 child보다 클래스 쓰는게 대부분이라곤 함(순서바뀌거나 수정할때 힘드니까)*/ /* .free-bbs th.last{border-right:none;} */ .free-bbs th:last-child{border-right:none;} table 표 작성법 *기본 구성 →표 전체 묶음 ....행 제목 데이터 *분류 구성 - >>순번, 제목,작성자, 작성일 등 제목 - >>헤드(제목 작성자 이런거)뺀 내용 즉 데이터, 생략해도됨 어차피 티헤드랑 티풋이 없으면 구분할 필요가 없으니까. - >>티헤드나 티풋이 없는 표도 있고 순서가 바뀐 표도 있음, 필수는 아님. (구분할때 사용) *행이나 열의 어디에 해당하는지 구분하기 ex) →열(세로) →행(가로) >>웹 접근성을 위해 사용 *행, 열 합치는 방법 ex) →열2개를 합쳐서 행1개로 만든다. →행3개를 합쳐서 열1개로 만든다. *colgroup으로 특정 col에 스타일 적용시키기 *이중선 안되게 표의 선 정리하기 -table 에 css로 border-collapse:collapse; 속성 >table 안에 t.. 배경 이미지 사용법 *배경 -border부터 배경이 깔림, 포함된 영역이기때문(만약 도트선이면 아래에도 색칠해져있음) -margin은 안깔림, padding은 깔림 *background-color: 배경색 지정 -16진수#000..., rgb(0,255,0), rgba, 색상이름 *백그라운드로 이미지깔고 조정하기 background-image:url(down/image/ball.png); -이미지깔리는게 패딩부터 디폴트 -괄호안에 'img.png'이렇게 따옴표 붙여도 되고 안 붙여도 됨 *background-repeat 배경이미지 반복 조정 -repeat; repeat-x(가로), repeat-y(세로), no-repeat 로 조정 *배경어디부터 깔지 정하기 background-clip:padding-box;/*선포함x 그.. 태그 호출 사용법 *h2에 붙은 클래스title3의 태그를 쓸때 ex) h2.title3{color:red;} *복수 선택할때(ctrl+shift처럼) ex) .list1, .list1, .list3{} *.subtitle이면서. subtitle.2인 애를 태그하고 싶을때는 안띄고 ex) .subtitle.subtitle.2 *하위요소 : 밑에 있는거 전부 ex).list2 li span *자식요소: 바로 밑에 자식 ex)list2>li>span일 경우에 .list2>span 불가능 /.list2>li 가능 class 와 id 태그 호출할때 사용됨 class *class -여러개 사용 가능 - .class이름 으로 사용 *class 여러개 쓰고 싶을때는 한칸 띄기 ex) *h2에 붙은 클래스title3의 태그를 쓸때 ex) h2.title3{color:red;} *복수 선택할때(ctrl+shift처럼) ex) .list1, .list1, .list3{} *.subtitle이면서. subtitle.2인 애를 태그하고 싶을때는 안띄고 ex) .subtitle.subtitle.2 id *id -하나만 사용 가능 -#아이디명 으로 사용 이전 1 2 3 4 5 다음
