이미지맵 이미지맵은 하나에 이미지에서 특정 이미지에만 링크를 주고 싶을 때 사용한다. coords : 좌표 shape : 모양 (rect-직사각형 영역, circle-원형 영역, poly-다각형 영역, default-전체 영역) 반응형 이미지 맵 제이쿼리 (jQuery-rwdImageMaps) 반응형에서 이미지 맵을 사용할 때는 이미지의 비율이 줄어들어서 좌표의 값이 변하게 된다. 이런 불편함을 처리해주는 제이쿼리가 rwdImageMaps이다. 사용 github url - https://github.com/stowball/jQuery-rwdImageMaps GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin Responsi..
변수 : 프로그램 실행 중에 발생하는 데이터를 저장하기 위해서는 저장하기 위한 메모리를 확보해야 하는데 이 메모리 확보하는 것을 "변수를 선언한다"라고 한다. 자료형 : 변수를 선언할 때에는 그 변수에 어떤 성격의 자료를 저장할 것인지 그 성격을 정해 주어야 하는데 그것을 "자료형"이라고 한다. 자바에서는 변수를 사용하기 전에 반드시 그 변수를 어떤 자료형으로 사용할 것인지 선언하고 사용해야 한다. 자료형 설명 기본형 number(숫자) 따옴표 없이 표기한 숫자를 나타냄 string(문자열) 작은따옴표(')나 큰따옴표(")로 묶어 나타냄 boolean(논리형) 참(true), 거짓(false)란 두가지 값만 가지고 있는 유형 undefined 자료형을 지정하지 않았을 때의 유형 null 값이 유효하지 않..
semantic : 의미론적인, 의미를 가지고 있는 HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다. 이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다. 그 이후 sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다 종류 container : 가장 상위 section : 주제별 컨텐츠 영역 header : 헤더 영역(로고, 메뉴 등) footer : 푸터(제작 정보 등) aricle : 컨텐츠 내용 nav : 문서 링크 탐색 main : 문서 주요 내용 지정 단계 container>section, header, footer>article>div 레이아웃 만들어보기(가상클래스 X) .container { border: 1px solid #000..
float 부모 요소 기준, 왼쪽 or 오른쪽 배치 지정 margin : auto : 가운데로! (※주의 : block요소만 적용가능!) 예시) .parent { border: 5px solid red; width: 600px; /*자식요소에 height값 지정해주면 자동으로 늘어나기 때문에 높이 따로 지정X*/ } .child { background-color: gold; width: 200px; height: 200px; } float 속성을 따로 주지 않은 상태이다. 왼쪽으로 배치 되어있는 것을 보고 "기본값이 float: left 인가?" 라고 생각할 수 있지만 그렇지 않다. 여기에 float: left를 설정하게 되면 부모 요소가 작아지는걸 확인할 수 있다. float: left를 넣어주면 자식..
1. 인라인(inline) 요소 한줄에 여러개 배치 기본 너비값 = 컨텐츠 width값 크기값을 가질 수 없음 (width, height가 먹히지 않음) 상-하 margin X (좌우 O) (text서식) 예시) 네이버 구글 다음 a { /*토막상식 : a태그는 유일하게 body의 컬러지정 따르지 않음*/ color: black; text-decoration: none; border: 1px solid red; } 인라인요소 중에 하나인 a태그이다. width와 height 값을 따로 지정하지 않고 border 속성을 주었을 때 content의 너비에 맞게 윤곽선이 생긴 것을 알 수 있다. (기본 너비값= 컨텐츠 width값) a { color: black; text-decoration: none; bo..
1. border border-style : 테두리 스타일 지정 value : solid dashed dotted double groove inset ouset boder-width : 테두리 두께 지정 px % 등 border-color : 테두리 색상 지정 color 값 한 방에 여러 속성 지정 .box { width: 400px; height: 400px; border-color: blue; border-width: 5px; border-style: solid; } border라는 속성을 한번에 묶어서 쓸 수 있다 .box { width: 400px; height: 400px; border : 1px solid blue; } border-bottom처럼 방향이 없으면 상하좌우 네면 모두 적용이되고,..
