열심히 끝까지

[오늘 수업] >> 애니메이션 그래프(이동하는 그래프) 액션1 액션2 액션3 >> 과제 >> 토글 이용한 사진 열고 접기 버튼 >> 스와이프 >> 단독으로 사용 불가 : swiperjs 사용 : 검색창에 스와이프 치면 뜸 링크 : https://swiperjs.com/get-started 다음의 CDN 사용 가능 1. 플러그인 분석 f12 로 분석 2. demo 있을 것 >> 상하 스와이프 API 외부 모듈 플러그인(위젯) JS로 완성된 모듈 Slide 1 Slide 2 Slide 3 ... >> 좌우 스와이프 Slide 1 Slide 2 Slide 3 >> 참고하면 좋은 플러그인 - lightbox : 별도의 갤러리창 : lightbox script : css에 주어지는 기본 버튼 존재 >> 파일에 따..

[오늘 수업] jQuery 라이브러리 자바 스크립트에서 자주 사용되는 라이브러리 널리 사용됨 존재하는 이유 : 자바 스크립트가 사용되는 것이 제멋대로, 복잡하기 때문에 쉽게 사용하고 싶다고 반영된 것 기본 제공되는 라이브러리가 아니다! 몇가지 import 해야한다.. 뭔가를 새로 넣겠다 하면 어려워함.. - jQuery라이브러리를 이용한 코드를 작성 확보 $().ready(); - $ : 객체표시 - $앞에 있는 객체가 로드되면 ready()안에 들어간 기능을 수행해줘! jQuery CDN jQuery 측에서 직접 제공하는 것 사용 >> 인터넷이 연결되어 있지 않으면 사용 불가!!! 메뉴1 메뉴1-1 메뉴1-1-1 메뉴1-1-2 메뉴1-2 메뉴1-2-1 메뉴1-2-2 메뉴1-3 메뉴1-3-1 메뉴1-3-..

[오늘 수업] [이벤트] 화면에 박스가 하나 있을 때 -> 마우스 클릭(ONCLICK)을 하면 박스가 원모양으로 바뀜 >> 기능이 추가되어있음 == 이벤트가 추가되어있음 >> 이벤트 기본 구성 - 이벤트 트리거 : 이벤트를 발생시키는 신호(html 요소에 검) ex) click, dbclick, mouseover, keydown, keypress,... - 이벤트 핸들러 : 실제 발생되는 이벤트 내용 >> 이벤트가 진행이 안된다? - 트리거를 연결을 잘 했나 - 핸들러 내용이 올바르지 않은가? html에서 사용하는 요소에게 이름을 부여하는 방식 - id 속성 걸어주기 - class 속성 걸어주기 - name 속성 걸어주기 >> 브라우저마다 해석이 다르기 때문에 event.keyCode가 뜨지 않을 수 도..

JS(Java Script) 페이지------ 구조 html 스타일 css 동작 js >> js = 프론트엔드의 대표적 * js 코딩테스트도 준비하면 좋음!!! * 코테에서도 많이 나오고 비중이 있는 언어! >> 기본적으로 꼭 알아야 하는 것들을 진행 >> 시간=1주일정도 Java Script : 스크립트 언어 : 인터프리터 언어(Python, SQL, JS) : 채팅형 언어, line by line(한 줄 씩 실행 가능) script언어를 해석하는 번역가 동일해야 넘어감 >> 둘이 같은 지 물어보는 것에서 쓰임 2. 웹 페이지에서 요소(태그)의 기능을 담당 ex ) 위젯의 움직임, 챗봇(기능, 동작에 대한 코딩) - 변수를 어떻게 선언하는가? >> 자바 스크립트에서 변수를 선언할 때, 두가지 변수 존재..

--애니메이션 효과(hover시 늘어나는 바) 쇼핑몰 메뉴 신상품 인기 상품 30 타임세일!!! 고객센터 >> 상태변화에 따라 값이 변화는 것 --개인 애니메이션 제작 애니메이션 >> 내가 직접 만들어서 사용하는 것 ----웹 폰트 구글 웹 폰트 https://fonts.google.com/ 한국어 사이트를 만들고 싶으면 폰트에 한국을 골라서 폰트를 고를 것 티가 많이 나는 폰트 설정 아래 select 버튼 클릭 오른쪽에 링크 뜸 복사해서 링크 복사 >> 준비 끝!!!! 가나다라마바사 아자차카타파하 >> 실무에서는 웹폰트는 css 파트라 import로 많이 쓴다. 하지만 우리는 마음에 안들어서 바꾸는 것이기 때문에 가져와서 쓴 것

[어제 내용] HTML 마무리 - 시맨틱 태그 >> 태그가 일정한 의미를 가질 수 있게끔 코딩하는 것(페이지 기술) >> 어떤 기능을 하는지 한 눈에 보이게 구성하는 것(페이지 리더가 읽을 수 있게) >> 박스 태그 사용해서 - 웹 탬플릿 [오늘 내용] 로고, 광고(사진), 기사 >> 이 중에서 제일 중요도가 높은 것은? 1. 로고 2. 광고(사진) 3. 기사 >> 헤더 - 로고 세션 - 광고, 기사 이때, 묶이는 것들은 로 묶을 것 로고 제작 >> 헤더 지정 - 이때, id를 헤더로 지정한다고 상단에 배치되는 것은 아님 > 코드 상 위치가 아래더라도 #header를 맨 위로 올리는 css 적용하면 올라가게 됨 NAVER 광고 기본 틀 기사 >> 로렘입숨(더미데이터) 사용 Lorem ipsum dolor..

[오늘 수업] 시맨틱 태그 : 중요도, 보조도구, 이용순서를 고려해서 작업 시맨틱(마크 업) 태그 > 웹 접근성 잘 할 것 ex ) div span header footer 작업을 할 때, >> [공지사항] 존재 + 더보기 1. 공지 7번 2. 공지 6번 3. 공지 5번 4. 공지 4번 5. 공지 3번 ... >> 요즘 공지부터 나열하는 것이 일반적 >> 최근 게시글이 위에 있도록 하는 것 타이틀 : 공지사항(태그) + 더보기 존재(더보기 버튼 누르면? 두개의 게시글이 보이게)(태그) + 최근 게시글이 상단에 존재(오더리스트) 공지사항 +더보기 공지 7번 공지 6번 공지 5번 >> 시맨틱 태그를 잘 지킨 것이 아니다!! >> 공지사항 바로 다음에 h2를 위치시키면 스크린 리더가 읽을 적에 공지사항, 더보..

[오늘 수업] -- 리스트 사과 바나나 키위 apple banana kiwi 상의 긴팔티 반팔티 하의 청바지 반바지 신발 운동화 슬리퍼 구두 -- 표 아이디 아이디를 입력하세요 비밀번호 비밀번호를 입력하세요 회원가입하기 로그인 버튼 교과목 점수 HTML 93 CSS 92 평균 92.5 다음 페이지 1 2 3 4 1 2 3 4 5 이전 페이지 -- 폼 아이디 : 비밀번호 : 이메일 : 개수 : 남 여 과목선택 C언어 JAVA JSP 전화번호 지역번호 02 031 032 055 --