본문 바로가기

HTML5

[HTML]JQuery 설치 jQuery (제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. JQuery 홈페이지를 검색하여 접속한 뒤 상단의 Download를 들어간다. 해당 화면에서 첫번째에 compressed된 3.6.0 버전을 클릭한다. 클릭시 다운로드가 되지 않고 위와 같은 페이지가 나올 수 있는데 브라우저에 따라 다운로드 되거나 해당 페이지가 뜬다. 이러한 페이지가 나왔다면 페이지에 있는 모든 내용을 복사하여 개발도구에 jquery-3.6.0.min라는 이름으로 .js파일을 만들어 js파일에 붙여넣기 해주면 다운로드한것과 같다. 또 다른 방법으로는 JQuery CDN을 사용하는 방법이 있다. JQuery CDN을 검색하여 홈페이지에 접속하면 해당 화면이 나오는.. 2022. 7. 28.
[HTML]JavaScript를 이용한 주사위 게임 수업시간 과제로 나온 주사위 게임 만들기이다. 실습용이기에 css와 Javascript를 외부 파일로 따로 링크하지 않고 html파일 내부에 적용시켜놓았다. body부분은 심플하게 헤더와 주사위가 굴러가는 영역인 field 그리고 버튼 부분이 있다. css부분은 위와같이 필요에 따라 설정하였다. javascript부분은 위와같이 설정하였으며, 랜덤수를 받아 숫자에 해당하는 이미지를 출력하며 결과는 alert를 통해 출력하였다. 출력과 동시에 승패를 상징하는 이미지를 보여주게끔 하였다. 실행하였을 때 기본 상태이다. 버튼을 누르게 되면 3초동안 주사위가 돌아가며 3초후 멈춘 뒤 결과가 나온다. 위와 같이 alert로 결과를 출력하며 중앙에 위치하는 이미지가 결과에 따라 바뀌게 된다. html은 배우면서 느.. 2022. 7. 27.
[HTML]JavaScript 자바스크립트는 인터프리터 언어로, 컴파일 언어(Java)와는 반대되는 개념이다. SQL문과 같이 Line by Line, 즉 줄 단위로 수행이 된다. script 언어를 해석하는 번역가는 브라우저에 포함되어 있어 각 브라우저마다 실행결과가 다를 수 있음에 유의하여야 한다. 변수선언 자바스크립트는 var 를 이용하여 선언할 수 있으나 메모리에 미리 할당하는 호이스팅 현상이 있어 지양하는 분위기이다. var 보다는 let이나 const를 사용하는게 좋다. 다만 var는 중복선언이나 재할당이 가능하나 let은 재할당만 가능하고 const는 둘 다 불가능하다. 즉 let은 변수, const는 상수 개념으로 쓰인다. 자료형으로는 문자열,숫자형(Number),Boolean,Null,Object,undefined가 .. 2022. 7. 25.
[HTML]시맨틱 태그 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그. HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다. 시맨틱 태그의 종류 머리글, 제목, 헤더 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그 콘텐츠 작성자나 사이트 소유자의 정보등을 부가.. 2022. 7. 20.
[HTML]HTML을 이용한 회원가입 페이지 수업시간 과제로 HTML을 이용하여 회원가입 페이지만들기가 나왔다. 페이지는 기존의 존재하는 페이지를 벤치마킹 할 것이다. 1.벤치마킹 가장 흔히쓰는 사이트인 '네이버'의 회원가입을 벤치마킹하여 구성을 확인하였다. 실시간으로 반영되는 유효성 검사는 JS의 기능이 필요하니 JS를 배우고 난 뒤에 다시 유효성 검사를 하도록하고, 일단은 HTML의 기본적인 문법만 가지고 회원가입 페이지를 눈으로 보이는 부분만 따라해보도록 하였다. 아직 CSS를 제대로 다룰 수 없어 디자인 적인 요소는 배제하고 입력정도만 참고하였다. 입력란으로는 아이디,비밀번호,비밀번호 확인,이름,생년월일,성별,본인확인 이메일,전화번호가 있다. 해당 카테고리를 참고하여 회원가입 페이지를 임시로 만들어보도록 하자. HTML의 구조는 이렇게 만들.. 2022. 7. 19.