👨‍💻 Web Development/HTML | CSS | JS | jQuery 검색 결과

23 개의 검색 결과가 있습니다.

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral..

[Day5] CSS 5 [11/16] [롤오버효과] 마우스 롤오버효과 마우스 롤오버효과 마우스 롤오버효과 js //1. js 로 모든 button 요소 얻어와야 된다. //var btns = document.getElementsByTagName("button"); //alert( btns.length ); var btns = document.querySelectorAll("button"); // alert( "버튼 수 : " + btns.length ); // 2. 마우스를 올릴때( mouseover ) 배경색 - 파랑 js 코딩. for (var i = 0; i < btns.length; i++) { btns[i].onmouseover = function (){ // console.log( "btn m..

2022. 11. 17. 01:14

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day4] CSS 4 - overflow, 팝업폼, display, prev|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운

[Day4] CSS 4 [11/15] [overflow] 1. 요소의 콘텐츠(내용)가 너무 커서 지정된 영역에 맞지 않을 때 콘텐츠(내용)을 자를지 또는 스크롤바를 추가할지 여부를 결정하는 속성 2. li, a 인라인모드 메뉴 : float:left overflow:auto+다음요소.. - auto : 자동. 콘텐츠가 넘치는 경우에만 스크롤바 추가. - visible(기본값) : 영역 외부에 넘치는 콘텐츠가 출력(랜더링) 되어진다. - hidden : 콘텐츠가 넘치는 부분은 잘라버린다. 보이지 않도록 한다. - scroll : 콘텐츠가 넘치는 지에 대한 여부와 상관없이 무조건 스크롤바 추가. div{ /* block모드 */ /* 높이 지정 */ background-color: coral;/* 산호색 *..

2022. 11. 16. 01:40

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index

[Day3] CSS 3 [11/14] JS로 동적버튼 생성 - DOM 메서드 사용 // 1. 버튼 [요소를 생성] - createElement() 메서드 var btn = document.createElement("button"); // 2. 회원가입 텍스트노드 // 컬렉션 클래스 - LinkedList : node // var textNode = document.createTextNode("버튼 - 1"); // btn.appendChild(textNode); // 2-2. Content(내용) // 버튼 - 1 innerText 속성 btn.innerText = "버튼 - 1"; // 3. 동적 생성한 버튼을 클릭 이벤트 처리. btn.onclick = function (){ alert(" 버튼 - ..

2022. 11. 15. 09:03

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day2] CSS 2 - selector, 색상, 테두리, margin, padding(border-box), width/height, box model, 링크, 텍스트, 아이콘, 글꼴, active처리

[Day2] CSS 2 [11/10] 1. CSS 선택자(selector) 1) 단순 선택자 - 태그명 :button(jquery selector) [class*='col-'] [class|='col-'] [class^='col-'] [class$='col-'] [class~='col-'] 2. CSS 적용하는 방법 1) 내부(Internal) css 적용방법 - 해당 페이지 2) 인라인( Inline)css 적용방법 - 해당 요소 내,외 css 적용방법 + 인라인 ( 장점 X ) 3) 외부( External) css 적용방법 - 웹 사이트 전체( 여러 페이지 ) ㄱ. 외부파일명.css ㄴ. 3. 참고 속성값과 단위 사이에 공백 추가 X font-size : 20 px 스타일 순서 인라인 > 내부 = 외..

2022. 11. 10. 21:51

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day1] CSS 1 - 개요, 스타일 적용 방법

[Day1] CSS 1 [11/9] 1. CSS 1) Cascading Style Sheets 약어 2) html 문서의 스타일 지정하는데 사용되는 언어 (html 문서에 요소가 표시되는 방법 ) 3) 많은 작업( 유지, 보수) 절약 예) 웹사이트 : 500 문서 파랑계열 -> 노랑계열 4) 여러 웹 페이지의 스타일을 일괄적으로 관리할 수 있다. 5) 외부 스타일 시트( .css) 사용 외부 자바스크립트 파일(.js) 사용 6) 다양한 장치(기기) 및 화면 크기 디자인, 레이아웃 및 변경 등등 스타일 정의 7) html 요소 -> 화면 스타일 정의 인쇄(종이) 스타일 정의 또는 기타 미디어에 표시되는 방식 정의 2. CSS 구문 형식 sample.html 추가 스타일적용할 대상 선택자 selector {..

2022. 11. 10. 01:58

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube

[Day6] HTML 6 [11/9] --복습-- 1. 화면 구현 header / row / footer - class*="col-" : col-이 들어가있는 클래스 전부 - body 말고 html에 줘도 됨 - 폰트 공백있으면 "" 묶어주기 - row-footer 붙어있기 때문에 row::after 추가 - 직계자식(>), 후손(공백) [반응형 웹] - media only screen : 화면에 출력할때만 Chania The Flight The City The Island The Food The City Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old..

2022. 11. 10. 00:38