일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프론트엔드
- keyframes
- HTML
- xcode
- 비전공 개발자
- javascript
- 애니메이션
- effect
- php
- ipad
- jQuery
- image
- button
- iPhone
- front-end
- react
- iOS 개발자
- 백엔드
- CSS
- MAC
- 개발자
- hover
- css3
- IOS
- Animation
- SWIFT
- 풀스택
- 자바스크립트
- html5
- 비전공자
- Today
- Total
목록HTML (66)
비전공자 개발일기
HTML Iframe(Inline frame) iframe은 다른 웹 페이지를 추가할 수 있음 src: 출력될 url, width: 넓이, height: 높이(모든 요소의 스타일 속성은 동일하게 적용 가능) 출력되지 않을 때.... iframe은 스타일이 적용되고 border 바꿀 수 있음(border: none -> 테두리 없음) iframe name: 은 a 요소의 target으로 지정할 수 있음(_self, _blank, iframeName-iframe으로 이동) target="targetTest" : 이동할 페이지는 L04_html_style.html 이동 target="_self" : 이동할 페이지는 L04_html_style.html 이동 target="_blank" : 이동할 페이지는 L04..
알파벳 선택: a b c d e 선택된 옵션(순서(selectedIndex), value, text) -> Multi Option Select : a b c d e f SUBMIT 제출될 데이터를 확인하세요. // select option let bTag = document.getElementById('selectedOpt') let selectAlphabet = document.querySelector('select') function print() { // console.log(selectAlphabet) let selectAlphabetI = selectAlphabet.options.selectedIndex let selectValue = selectAlphabet[selectAlphabetI].v..
중첩 연산자 1. > div>ul>li 2. + div>p+bq 3. ^ div+div>p>span+em^bq div+div>p>span+em^^^bq 4. * ul>li*5 5. ( ) (div+dl>(dt+dd)*3)>footer>p 속성 연산자 1. 아이디와 클래스 div#header+div.page+div#footer.class1.class2.class3 2. 사용자 정의 속성 td[title="Hello world!" colspan=3] 3. 항목 번호 매기기: $ ul>li.item$5 ul>li.item$$$*5 $ 한 개당 자릿수 의미 ul>li.item$@-* 역방향 출력 ul>li.item$@3*5 기본값 변경시, $옆에 @n(n: 숫자) ul>li.item$@-3*5 4. 텍스트: {..
블록(BLOCK) 요소 블록 요소는 항상 새 줄에서 시작 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남) 블록 수준 요소에는 위쪽 여백과 아래쪽 여백이 있지만 인라인 요소에는 없음 ※ : 브라우저가 사용자에게 표시 할 수있는 대체 콘텐츠를 정의 인라인(INLINE) 요소 인라인 요소는 새 줄에서 시작하지 않음 인라인 요소는 필요한 만큼만 너비를 차지 ※ : 약어를 정의 ※ : 텍스트 양방향 재정의 ※ : 특정 단어 기울이면서 강조(미술 작품, 책, 노래 등) ※ : 콘텐츠 내에서 정의를 하기 위해 사용, 기울임으로 표시됨 ※ : 키보드 입력을 정의 Press Ctrl + C to copy text (Windows). Press Cmd + C to copy ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/NUaP0/btrcM1mpmZE/4ZzdxasRWM0gLfthdVmdK1/img.jpg)
Image Maps Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic: 이미지 맵을 정의, 이미지 맵은 클릭 가능한 영역이 있는 이미지 이미지 맵 내부의 영역을 정의 반응형 디자인의 아트 디렉션
FORM EVENTS 속성 설명 onblur 포커스가 사라졌을 때 발생 onchange 폼 컨트롤의 값이 변경 되었을 때 발생 oncontextmenu 우클릭 시 나오는 메뉴 컨트롤 onfocus 입력 필드가 포커스를 취득했을 때 발생 oninput 사용자가 필드에 무언가를 쓸 때 oninvalid 입력 필드가 유효하지 않은 경우 발생 onreset 양식에서 재설정 버튼을 클릭 시 발생 onsearch 검색을 제출할 때 발생 onselect 요소에서 일부 텍스트를 선택한 후 onsubmit 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생 MOUSE EVENTS 속성 설명 onclick 버튼 클릭 시 발생 ondblclick 버튼 더블 클릭 시 발생 onmousedown 단락 위에서 마우스 버튼..
a 태그 흉내내기 코드 a 태그 흉내내기
HTML: Hyper Text(문서를 서로 연결해주는 링크) Markup Language 시멘틱(의미가 통하는) 태그를 사용하여 만든 웹 문서 시멘틱 태그가 필요한 이유 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문 내용 등 알 수 있음 문서 구조가 정확히 나눠지므로 PC, 스마트기기 등 다양한 화면에서 웹 문서를 표현하기 쉬움 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음 시멘틱 태그의 종류 : 헤더 영역을 나타냄, 검색창이나 사이트 메뉴를 삽입 : 내비게이션 영역, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 : 핵심 콘텐츠, 웹 문서마다 다르게 보여주는 내용으로 구성, 1회만 사용 권장 : 독립적인 콘텐츠, 웹에서 ..