본문 바로가기

웹 개발 공부 컨텐츠134

슬라이드 유형 사이트 01 사이트 만들기 이번 사이트는 슬라이드 유형입니다. ○ 슬라이드 유형 01 슬라이드 유형은 하나의 이미지 공간에 일정 간격으로 여러 이미지를 로테이션해서 보여주는 유형입니다. ▶ HTML 파트 슬라이드 영역 The Fruit Sweet Fresh 싱싱한 과일이 왔어요~ 맛도 좋고 향도 좋고 몸에도 좋은 그 맛! 과일의 여러가지 쓰임새에 대해 알아봅시다~! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 큰 텍스트 구역 안에 텍스트를 넣습니다. ▶ CSS 파트 .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider_img { background: url(../img/slider_bg01.jpg) no-.. 2022. 9. 6.
마우스 이펙트 만들기 01 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 01 - 마우스 따라다니기 마우스 커서에 따라 위치를 지정하거나 효과를 주는 방법입니다. ▶ HTML 파트 What we have to do is to be forever curiously testing new opinions and courting new impressions. 우리가 해야할 일은 끊임없이 호기심을 갖고 새로운 생각을 시험해보고 새로운 인상을 받는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ▶ CSS 파트 /* mouseType */ #mouseType.. 2022. 9. 6.
mouseover vs mouseenter mouseOver vs mouseEnter mouseOver/mouseOut과 mouseEnter/mouseLeave는 마우스 커서가 요소에 진입/이탈할 시 발동하는 메서드입니다. ○ 마우스 오버와 마우스 엔터의 차이 mouseOver와 mouseEnter의 차이는 이벤트 버블링의 발생 여부에 있습니다. mouseOver/mouseOut는 이벤트 버블링이 발생하며, mouseEnter/mouseLeave는 발생하지 않습니다. ※ 이벤트 버블링이란? 이벤트 버블링은 자식 요소의 이벤트 핸들러를 발동시 최상위까지 모든 부모 요소의 이벤트 핸들러가 같이 발동되는 것을 말합니다. 위의 이미지를 예로 들어면 3번의 자식 요소 이벤트 핸들러가 발동시 부모 요소인 2번의 이벤트 핸들러가 발동되고 그 다음 2번의 부모.. 2022. 9. 6.
프리티어 설치법 프리티어 설치법 프리티어는 저장 시 자동으로 코드를 정렬 시켜주는 vscode 확장 프로그램 입니다. Step1. 설치 vscode의 확장 프로그램 설치창에 가서 prettier을 검색해 해당 확장 프로그램을 설치합니다. Step2. 설정 preference > setting에서 f1을 누른 후 "editor format on save"를 검색합니다 검색 후 위의 사진처럼 Editor: format on save가 나오면 체크박스에 체크합니다. Step3. 사용법 자 설치가 끝났습니다. 저장 단축키 ctr + s 를 누르면 자동으로 코드가 정렬이 됩니다. Step4. 안될 때 적용이 안될 시 다시 setting에서 f1을 누른 후 "json"을 검색하면 "Edit in setting.json"의 링크가 .. 2022. 9. 5.
제이쿼리 - 스타일 관련 메서드 Jquery 제이쿼리의 css 관련 메서드 입니다. ▶ css( ) 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, w){ //index는 각 div 요소의 index 0, 1, 2 //w는 각 div 요소의 width 값 return css속성 // 각 div 요소의 css 속성을 변경합니다. }); ... 내용 내용 내용 See the Pen j_css by mbynae (@.. 2022. 9. 5.
제이쿼리 - 속성 관련 메서드 Jquery 선택한 요소의 attribute(속성)를 선택, 생성, 변경하는 메서드입니다. ▶ attr( ) 메서드 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... 다음.. 2022. 9. 5.
제이쿼리 - 클래스 관련 메서드 Jquery 클래스를 추가/제거하는 메서드 입니다. ▶ addClass( ) 메서드 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className)){ //index는 각 div 요소의 index 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); ... 내용1 내용2 내용3 See the Pen Untitled by mbynae (@mbynae) on CodePen. ▶ removeClass( ) 메서드 실행 분류 형식 제거 $("div").removeClass("클래스명"); 형식 $("div").remove.. 2022. 9. 5.
이미지/텍스트 유형 01 사이트 만들기 이번 사이트는 이미지/텍스트 유형입니다. ○ 이미지/텍스트 유형 01 이미지/텍스트 유형은 한 아티클에 이미지 구역과 텍스트 구역이 조합되어 있는 유형입니다. ▶ HTML 파트 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 텍스트 구역과 2개의 이미지 구역을 나누어 총 3가지 구역을 설정합니다. 이미지의 경우 CSS를 이용해 배경으로 넣기 위해 각각의 이미지 구역에 클래스를 지정하였습니다. ▶ CSS 파트 /* fonts */ @import url('https://.. 2022. 9. 1.
헤더 유형 01 사이트 만들기 이번 사이트는 헤더 유형입니다. ○ 헤더 유형 01 헤더 유형은 사이트 최상단 로고와 메뉴 등이 들어가는 구역입니다. ▶ HTML 파트 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 그게 로고 / 메뉴 / 로그인 세가지 부분으로 나누어 구분을 짓습니다. ▶ CSS 파트 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none.. 2022. 9. 1.
요소 크기 메서드 요소 크기 메서드 요소의 크기 속성값을 나타내고 설정할 수 있는 메서드입니다. 요소의 크기를 구하는 속성 : client*/offset* 속성값을 설정할 수 있는 메서드 : getBoundingClientRect() 속성의 차이는 마진과 보더, 패딩값을 포함/미포함, 축의 기준이 부모요소/문서요소인지의 차이가 있습니다. See the Pen 위치 및 크기 요소 by mbynae (@mbynae) on CodePen. 2022. 9. 1.
텍스트 유형 01 사이트 만들기 이번 사이트는 텍스트 유형입니다. 이미지 유형 03 코드 테스트 유형01 6가지 색의 연상과 느낌 빨간색(Red) 색의 3원색 중 하나인 빨간색은 뜨겁고 정렬적이며 한편으론 위험하거나 분노하는 느낌을 나타냅니다. 더보기 노란색(Yellow) CYMK의 Y를 담당하는 노란색은 명랑하고 활달적이며 달콤한 음식이나 과일의 느낌을 내포하지만 주의와 경고의 느낌도 냅니다. 더보기 초록색(Green) 색의 3원색인 초록색은 숲과 자연을 연상하며 평온함과 평화, 안정, 휴식, 젊음 등 마음이 진정되는 느낌을 나타냅니다. 더보기 파란색(Blue) 색의 3원색 중 하나인 파란색은 시원한 바다와 명쾌하고 상쾌한 느낌을 내지만 한편으론 냉정함과 추위의 느낌도 납니다. 더보기 보라색(Purple) 보라색은 신비.. 2022. 9. 1.
JQUERY2 Jquery jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 1. jQuery 필터 선택자 ▶ 필터 선택자의 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수행만 선택합니다. :first $("td:first") 첫번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 해당 (h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li요소를 선택합니다. index는 0번이 첫번째 요소입니다. :gt() $("li:gt(0).. 2022. 9. 1.

광고 준비중입니다.