![]()
상단 헤더에 카페 소개, 오시는 길, 이달의 추천 이렇게 세개의 버튼을 만들어놨다. 각각 버튼을 누르면 해당 구역(section)으로 이동할 수 있도록 만들어보도록 하겠습니다. 먼저, section으로 구역을 나눠주고 id를 준다. 나는 카페소개는 id="intro", 오시는길은 id="map", 이달의 추천은 id="choice" 로 값을 지정해줬다. 헤더 안에 #sectionId를 주고, css에서는 html로 전체를 묶어서 scroll-behavior 속성을 smooth로 지정하면 스크롤이 부드럽게 이동한다!!
![]()
https://www.w3schools.com/icons/icons_reference.asp Icons from Font Awesome, Bootstrap and Google W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 사이트를 참고하여 html에 아이콘을 추가해보자 HTML4·5 버전 검색어 : coffee 추가할 페이지의 head 태그 안에 추가한다. 추가하고 ..
![]()
border를 기준으로 요소 내부의 양사방 여백 1. padding의 각 방향별 지정 속성 padding-top:n; 위쪽에만 n만큼 지정 padding-right:n; 우측에만 n만큼 지정 padding-bottom:n; 아래만 n만큼 지정 padding-left:n; 좌쪽에만 n만큼 지정 #p01 {border: 1px solid; padding: 10px;} #pdr>li { border: 1px solid;} .pt {padding-top: 30px;} .pr{text-align: right; padding-right: 30px;} .pb {padding-bottom: 30px;} .pl{padding-left: 10%; 2. padding의 값 갯수별 지정법 padding:n n n n; 상 우..
![]()
★**[모든 프로그램은 주기억장치(RAM)에서만 실행된다]** 기억장치 ①주기억장치 - RAM : 비쌈 ②보조기억장치 - HDD, CD-R/W, FDD 기본용어 ①적재(load) : 보조기억장치→ 주기억장치 ②프로그램 : 하드디스크에 저장되어있는 상태 자체 ③프로세스 : 주기억장치에 로드된 상태의 프로그램(실행되고 있는 프로그램) = 프로그램을 로드 이클립스 → JSP 환경 설정 html,css,jsp → UTP-8로 변경 자바버전 11로 변경 Create a Dynamic Web Project -context root(=project root) -content directory(=폴더) HTML File 김영미 홈페이지를 만드려면 서버가 필요함! [서버사이트] https://tomcat.apache.o..
![]()
-웹문서에 접근 및 제어 가능한 형태 form 태그(객체) 사용자의 정보를 입력받아서 전달하는 태그 -fieldset 태그로 감싸줌 폼태그 제목 사용자의 정보를 입력받아서 전달하는 태그 action : 정보를 전달하는 페이지(속성) method : 전달 방법(속성) method 속성 get 방식 -전송할 데이터를 주소(URL)에 붙여서 전송 -URL끝에 ? 사용해서 정보 전달 (중요데이터 노출) -데이터 길이 제한(256byte) -body가 필요없음 -빠른 전송속도 -&을 사용하여 데이터를 연속으로 사용 가능 ex) www.itwillbs.co.kr?id=itwill&age=20 post 방식 -전송할 데이터를 body에 담아서 전송(주소줄 표시x) -데이터 길이 제한X -body 필수 -느린 전송속도..
![]()
2. 브라우저 객체 모델 (BOM) -브라우저 내부에 내장되어 있는 객체 정보 window,screen, location, history, navigator… 이벤트 -웹 브라우저에서 클라이언트가 수행하는 모든 동작 이벤트 리스너 : 웹 브라우저에서 이벤트가 발생하는지 체크하는 기능 실행할 수 있도록 만들어줌 이벤트 핸들러 : 이벤트가 발생시 자바스크립트 실행가능 1. onclick //클릭해도 동작x -> 보여지는 동작과 클릭시 동작이 분리되어있기 때문 --> // -> 이벤트 핸들러 추가해야함 //동작함 //alert 2번클릭 몇개든 상관x, but 일반적사용x -> script태그 사용 + 함수 // function을 이용한 버튼 2. ondblclick // function을 이용한 더블클릭 버튼..
![]()
WEB의 핵심 = “연결”! -HTML : 언어의 구조를 잡아주는 것 HTML은 Hyper Text(연결 기능이 있는 문서) Markup Language의 약자입니다. HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML은 웹 페이지의 구조를 설명합니다. HTML은 일련의 요소(tag)로 구성됩니다. HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다. HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠 조각에 레이블을 지정합니다. -CSS : 웹페이지의 스타일을 꾸미는 것 “The language for styling web pages******”****** -JavaScript : 프로그래밍. 동적의 기능 “The langua..
![]()
자바스크립트의 객체 종류 1. 내장객체 2. 브라우저 객체 모델 (BOM) 3. 문서 객체 모델 (DOM) . 1. 내장객체 - 자바스크립트 안에 내장되어 있는 객체 (문자, 날짜, 배열, 숫자,...) 날짜(Date) //날짜(Date) 객체 생성 var today = new Date(); document.write(today + " "); var day2 = new Date(2023,8,4); // 년, 월-1(9월을 의미), 일 // 월 : 0~11까지 표시 (1~12) // 8월을 나타내고 싶으면, new Date(2023,7,4); 을 표시 document.write(day2 + " "); var day3 = new Date(2023,7,4,9,32,0); // 년, 월-1, 일, 시, 분, 초..
