기초공부/WEB 썸네일형 리스트형 [CSS]font 속성 font 속성에 대해 설명합니다 모든 포스트 목록 font property order order : STYLE - VARIENT - WEIGHT - SIZE - /LINE-HEIGHT - FAMILY mandatory : SIZE, FAMILY optional : STYLE, VARIENT, WEIGHT, LINE-HEIGHT - if optionals are omitted, will not inherit from parent STYLE or VARIENT or WEIGHT : before SIZE and FAMILY LINE-HEIGHT : after SIZE with slash 출처 : font order stackoverflow april fools day cursor-effects 공부하다가 stackoverflow 에 들어가니 재밌는게 있었다. 그래서 공부하기도 지치고 재미도 있어보여서 도전해보았다. 짜잔! 만우절 이벤트로 마우스를 움직일 때마다 꽃이 흩날렸다! 한 번 따라 해보려고 구글에 검색했으나 1차 시도는 fail... 어떻게 할 지 고민하다가 막무가내로 stackoverflow의 소스를 보고 찾아보기로 하였다. 아직 자바스크립트도 제대로 못 배운 초심자라서 mouse 이벤트 관련해서 찾아보면 나오겠지 싶어서 찾아보니 초심자의 행운 덕분인지 바로 발견할 수 있었다. 주석으로 입력된 홈페이지를 발견하고 그 페이지로 이동하였다. cursor-effects 페이지 꽃 효과 이외에도 다양한 효과들이 존재하였다. (푸른 색 링크를 따라가면 다양한 효과들을 체험해볼 수 있다!) 뭐 .. [JavaScript]생활코딩 클라이언트 - 웹브라우저 자바스크립트 정리 예시 수정 : 현재 웹페이지가 완성이 되었을 때 웹브라우저는 window 객체의 onload라는 것을 호출하기로 약속되어 있어 웹페이지가 로드가 끝나고 함수가 실행되므로 id가 hw인 태그가 존재하여 오류가 발생하지 않는다 만약 script 태그를 body 끝에 위치시켰다면 window.onload는 필요하지 않다 8 Broswer Object Model : 웹브라우저를 제어하기 위하여 브라우저가 제공해주는 객체들 9 전역객체 window DOM에 소속되어 있던, BOM에 소속되어 있던, JavaScript에 소속되어 있던 간에 상관없이 전부 window 객체에 소속되어 있다 window 객체의 document 객체에 접근할 경우 window.document window 객체의 navigator 객체에 .. [JavaScript]생활코딩 언어 - 자바스크립트 정리 모든 포스트 목록 리스트목록(목록을 클릭하시면 해당 항목으로 이동합니다) 오리엔테이션 자바스크립트 실행 숫자와 문자 변수 주석과 여백 비교연산자 조건문 반복 함수 배열 객체 모듈 UI/API 정규표현식 유효범위 값으로의 함수와 콜백 a 언어 자바스크립트 1 자바스크립트는 웹브라우저라고 분류되는 소프트웨어를 프로그래밍적으로 제어하기 위한 언어이다. (프로그래밍적으로 제어란 예를 들어 브라우저가 가지고 있는 경고창이라는 기능을 alert이라는 프로그래밍 코드로 제어한다.) 탈웹브라우저 최근에는 자바스크립트가 웹브라우저를 제어하기 위한 용도로만 사용되고 있지 않다. 웹서버를 동작하기 위한 도구로써 자바스크립트인 Node.js를 사용한다. 서버에 존재하면서 웹브라우저에게 응답하기 위한 정보를 프로그래밍적으로 생.. [CSS]생활코딩 WEB2-CSS 정리 +) ;은 구분자 5 CSS에 대해 배울 것을 크게 두 가지로 나누어 배운다 어떤 효과가 존재하는지(declaration의 property) 그 효과를 정확하게 선택하여 지정하기 (selector) 6 (5의 효과에 대하여 배움) property 검색 방법 : CSS (원하는 것) property 7 selector 특정 태그들에 효과를 주고 싶을 때는, html 태그에 class라는 property를 주고 그 class를 selector로 사용한다. class 특징 class의 value는 여러 개가 올 수 있고 띄어쓰기로 구분 가능하다 → 하나의 태그에 공동으로 여러 효과를 지정할 수 있음(밑의 예시 참고) → 이 경우에 둘 이상의 태그에 같은 효과를 줄 때 뒤에 있는 효과만을 적용하기 때문에 좋지 .. [HTML5]이미지 태그, 오디오 태그, 비디오 태그 이미지 태그에 대해 설명합니다 모든 포스트 목록 이미지 관련 태그 이미지 태그 src(source) 속성 : 파일의 주소 width, height 속성 : 파일 크기 조정 alt(alternate text) 속성 : 이미지가 표시하지 못할 경우를 대비한 대체 설명 텍스트 지정 콘텐츠 그림, 사진 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용하는 태그 설명 요소를 위한 제목을 표현, 요소 내에 위치한다 img, figure 태그 예시 [figurecaption]logo [figurecaption]logo 오디오 태그 대체 텍스트 입력 오디오 삽입 태그 controls 속성 : 미디어 제어기를 표시할 지 여부 autoplay 속성 : 파일이 로드되자마자 자동으로 재생 여부 loop .. [HTML5]표 태그 표 태그에 대해 설명합니다 모든 포스트 목록 표의 구성 요소 표의 최상위 태그, , , 태그로 구성 border 속성 : 표의 테두리를 지정 or 태그 하나의 행(table row), 이 태그 안에 셀을 정의한다 셀의 값 각 셀의 데이터(table data) 제목의 값 제목(table header) 셀 합치기 의 셀을 병합할 수 있다 위아래 줄(rows)의 셀 병합 옆 간(column)의 셀 병합 표의 구조적 표현 문서를 구조화 하듯이, 표를 구조화하여 표현한다 표의 설명 제목 표의 머리줄 표의 본문 표의 꼬리줄 표 태그 사용 예시 [caption] [제목1][제목2] [내용1][내용2] [제목1][내용3] 결과 #html5 #표 참고 : HTML5 웹 프로그.. [HTML5]목록 태그 목록 태그에 대해 설명합니다 모든 포스트 목록 목록 태그 , , 태그 하위에 태그를 사용하여 목록화한다 순서 없는 목록(Unordered List) 태그 type 속성 : 목록 구분점을 지정하는 속성(현재는 css를 사용하는 것을 권장합니다) disc : 검은 원(기본값) circle : 흰 원 square : 사각형 순서 있는 목록(Ordered List) 태그 type 속성 : 목록 구분점을 지정하는 속성(현재는 css를 사용하는 것을 권장합니다) 1 : 숫자(기본값) a : 영문 소문자 A : 영문 대문자 i : 로마 숫자 소문자 I : 로마 숫자 대문자 disc : 검은 원 circle : 흰 원 square : 사각형 설명 목록(Description List/Definition List) 태그 .. 이전 1 2 3 4 다음
