전체 글
7. 레이아웃 스타일 (Block elements & Inline elements)
1. Block Element : 한 줄에 하나의 요소만 포함 할 수 있는 HTML 요소 EX) p, h1~h6, ul, ol, div, blockquote, form, hr, table, figure - 기본 너비값: 100%(폼 엘리먼트 제외) - 너비 값, 높이 값 가질 수 있음 - 상하좌우 모든 마진 값을 가질 수 있음 2. Inline Element : 한 줄에 여러 요소를 포함 할 수 있는 HTML 요소 EX) img, br, sub, span, input, laber, a, button, b, l, s - 기본 너비 값: 컨텐츠 너비 값 - 너비 값, 높이 값 가질 수 없음 - 상하 마진 가질 수 없음(이미지 제외) 3. inline-block - block은 한 중레 여러 요소를 포함 할 ..
6. CSS 배경 색상 및 이미지 제어하기 (속성: background-image, background-repeat)
CSS 배경 색상 및 이미지 제어하기 1) background-color 2) background-clip 3) background-image('경로') 4) background-repeat - repeat - repeat-x - repeat-y - no-repeat 5) background-size: 배경이미지 크기 조절 - auto: 원래크기 - contain: container에 맞는 크기 - cover: ★자주사용됨 - px, % (50%, 50%) (width 반토막, height 반토막) ★자주사용됨 6) background-position: cetner center; - top, bottom, left, right, cetner 7) background-attachment: fixed; - ..
5. CSS 목록 스타일
1. CSS 목록 스타일 1) list-style: none [Unordered List value] [Ordered List Value] 2) list-style-image: url(경로); 2. CSS 목록 실전 예제 - figure(멀티미디어 내용이 있는 그룹) 태그로 만드는 리스트 스타일 1) 링크 태그로 외부 CSS 파일 링크하기 (파비콘: favicon/ Font AweSome) Font AweSome: 아이콘이지만 텍스트 파일이라 확대해도 깨지지 않는다. (Font Awesome CDN 구글 검색) ex1) CSS li 태그 사용하기 HTML CSS JQUERY BOOTSTRAP SEMANTIC-UI MOBILE WEB APP WORDPRESS ex2) The world's three gre..
4. CSS Text
1. CSS 폰트 사이즈 단위 default: 16px, 1em(100%) 2. 텍스트 서식(1) 1) color: 글꼴 색을 지정하는 특성 value: color name 2) text-decoration: 텍스트 줄 표시 / 제거 3) text-transform: 텍스트를 대문자 및 소문자로 변환 value: none capltallze uppercase lowercase 4) text-shadow: 텍스트 그림자 효과 value(1): [x-축거리][y-축거리][퍼짐 거리 정도][색상] value(2): none 5) letter-spacing: 알파벳 간격 조정 ★자주 사용된다. value: px em pt % rem 6) word-spacing: 단어 간격 조정 (자주사용안함) value : p..
3. 브라우저 벤더프리픽스
브라우저 하위버젼에서도 CSS3(transform, animation, gradiention) 새로운 기술이 적용 되게끔 속성, 값 앞에 Prefix를 달아주는 것으로 사용한다. 매번 코드에 접두어를 코딩하는 것은 매우 어렵기 때문에 자동으로 벤더프리픽스를 달아주는 자바스크립트 파일을 사용한다. Prefix Explanation -webkit Safari, Chrome, etc -moz- Mazilla, Firefox, etc -o- Opera -ms- Internet Explorer
2. CSS 선택자 (태그, 클래스, 아이디, 하위, 그룹, 전체 선택자)
태그, 클래스(.), 아이디(#) : 직관적으로 보임, 한정적으로 선택이 가능하다. p.center { text-align: center; color: red; } 1) 그룹 선택자 h1, p { text-align: center; color: red; } 2) 하위 선택자 p span { //space는 하위 목록을 의미함 text-align: center; color: red; } 3) 전체 선택자 * { font-size: 14px; line-height: 14px; } 4) 주석 /* 주석 */ 5) 태그 우선순위 1) !important style 2) Inline Style -> 태그 안에 style 주는것 3) ID Selector Style 4) Class Selector Style 5) ..
1. CSS 기초이론
1. CSS 적용범위, 레이아웃 디자인 설계순서 1) 와이어 프레임 그리기 2) DIV 레이아웃 설계(클래스 지정하기) 3) HTML 컨텐츠 입력 (텍스트, 이미지) 4) CSS 상세 디자인 (서식, 레이아웃) 2. HTML은 CSS에 의해서 선택이 되어진다. CSS 문법 선택자 { 속성(properties): 값(value); //하나의 속성,값만 쓸 경우 ;이 없어도 된다. } body { color: navy; } 3. CSS링크 방법(외부스타일/내부스타일) 안에 작성 1) 외부스타일 2) 내부스타일
Ajax와 each에 대한 기본 문법
1. jQuery에서 Ajax 기본 문법 1) jQuery.ajax(url[,settings]) 2) jQuery.ajax({settings}) settings 라는 객체를 전달한다. $.ajax({ settings () }) 2. settings 객체에 들어 갈 수 있는 속성 값 - url : 서버에 접속할 주소 - data : 서버로 데이터를 전송할 때 이 옵션을 사용한다. - dataType : 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수잇는 것은 xml, json, script,html 이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다. - success : 성공했을 때 호출할 콜백을 지정한다. Function(PlainObject data,..