HTML & CSS

activeMenu

작성자:

1. 메뉴활성화 1.1. 단계1-상단메뉴 1.1.1. 스티키 예제 [미리보기](https://qwerewqwerew.github.io/source/jq/9) HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" /> <meta property="og:url" content="http://www.mango.dothome.co.kr" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="망고의 포트폴리오" /> <meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 … 더 읽기

slide

작성자:

1. 기본 슬라이드 1.1. fadeInOut 1.1.1. 메서드 활용 1.1.2. 클래스 활용 1.2. 이동 2. 인디케이터가 있는 슬라이드 1. 기본 슬라이드 1.1. fadeInOut 1.1.1. 메서드 활용 예제 미리보기 리소스 이미지 http://qwerew.cafe24.com/images/1.jpg http://qwerew.cafe24.com/images/2.jpg http://qwerew.cafe24.com/images/3.jpg http://qwerew.cafe24.com/images/4.jpg http://qwerew.cafe24.com/images/5.jpg http://qwerew.cafe24.com/images/6.jpg http://qwerew.cafe24.com/images/7.jpg http://qwerew.cafe24.com/images/8.jpg http://qwerew.cafe24.com/images/9.jpg http://qwerew.cafe24.com/images/10.jpg HTML <body> <div id="content"> <h3>Simple Crossfade Waterfalls Slideshow</h3> <ul id="crossfade"> <li> <a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a> … 더 읽기

tab

작성자:

1. 탭 탭메뉴만들기 완성화면 HTML <div class="tab-wrapper"> <ul class="tab-menu"> <li><a href="#tabs-1" class="active">리미</a></li> <li><a href="#tabs-2">감자</a></li> <li><a href="#tabs-3">치킨</a></li> </ul> <div class="tab-content"> <div id="tabs-1" class="active"> <h2>리미</h2> <p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 … 더 읽기

scrollEffect

작성자:

1. 스크롤 효과를 만들어보자 1.1. 1단계-섹션1 1.1.1. 좌우이동 – css 메서드 활용 예제 미리보기 Note: 이 코드는 잠재적인 버그가 있다. 작성후 어떤 버그가 발생할수 있을지 예상해보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/jq-01.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="js/jq-01.js" defer></script> </head> <body> <section class="section1"> <h2>section1</h2> … 더 읽기

ajax

작성자:

jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기

6. 미디어요소

작성자:

Info: 📢 예제파일 1. div Info: 💡 🔗div 교재83p <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>그룹 요소</title> <style> header{ width: 300px; margin: 0 auto; border: 1px solid #000; } section{ width: 300px; margin: 0 auto; border: 1px solid #333; } footer{ width: 300px; margin: 0 auto; border: 1px solid #999; } </style> </head> <body> … 더 읽기

8. 폼요소

작성자:

1. 폼요소 Info: 👁️‍🗨️ 🔗정보를 제출하기 위한 대화형 문서영역 태그 설명 속성(특성) form 입력양식 태그 action: data 를 전송할 서버주소 method: data 전송방법(get, post) fieldset form 요소를 그룹핑 legend fieldset의 제목 “`html 폼 로그인 ID : PW : “` 2. input , type Info: 👁️‍🗨️ 🔗입력요소 Info: 👉 value="데이터값" name="백단용 데이터 식별자" id="디자인용 식별자" → … 더 읽기

7. 테이블요소

작성자:

Info: 🗃️ 예제파일 : 1. table, tr, td 요소로 테이블 삽입하기 Info: 👁️‍🗨️ table 표를 만들때 사용하는 태그 문법 table>tr>td <table> <tr> <td></td> <td></td> </tr> </table> “`html 표 교과목 점수 HTML 93 CSS 92 평균 92.5 “` 2. 테이블 구조화 하기 Info: 👁️‍🗨️ 테이블을 구조적으로 작성하는 요소 작성하지 않아도 웹브라우저에서 교정해줍니다. thead와 tfoot의 마크업 순서가 … 더 읽기

5. 링크요소

작성자:

Info: 📁 리소스파일 다운로드 1. figure 🔗MDN Info: 👁️‍🗨️ 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용 “`html 이미지 캡션 달기 이미지 캡션 달기 <figure> <figcaption>무한 커피 리필과 빵을 제공하는 책이 있는 카페에서. </figcaption> <img src="images/cafe1.jpg" width="316" height="241" alt="북 카페" /> </figure> <figure> <figcaption>동물을 주제로한 카페에서. </figcaption> <img src="images/cafe2.jpg" width="316" … 더 읽기

4. 문단과텍스트요소

작성자:

1. html5 기본 구조 “`html 페이지타이틀 여기는 제목 입니다 여기는 문장입니다 “` Info: 👁️‍🗨️ <!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.) <html> : HTML 문서의 루트(root) 요소를 정의한다. <head> : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다. 이러한 메타데이터는 <title>, <style>, <meta>, … 더 읽기