html, css, js
-
[front-end] 영화 소개 사이트 만들기html, css, js 2023. 3. 14. 23:58
그동안 공부했던 HTML, CSS, JS를 이용하여 나만의 영화 소개 사이트를 만들어보았다. 레이아웃 형태로 네모네모하게 만들어 보았다. 근데 만들고 보니 문제점이,, px로 웹사이트 크기를 설정하다보니 사이트에 빈공간이 많아져서,,ㅎㅎ 또 모바일로 켰을땐 아예 pc버전으로 보는거같을정도로 이질감이 느껴졌다. 찾아보니 뷰포트로 구현을 해야 기기에 맞게 웹사이트 크기가 조절된다고 한다. 나중에 시간이 생기면 수정해보는걸로 하고,, 일단 허접하긴 해도 사이트다운 사이트를 만든것에 의의를 둔다. LEE MOVIE(demo.) LEE MOVIE는 영화 소개 사이트입니다. 이용방법 우측 네비게이션 메뉴를 통해 영화소개 페이지로 진입할 수 있습니다. 퀵메뉴를 통해 영화 예매 사이트로 이동할 수 있습니다. 요청 게시..
-
DOM 정리html, css, js 2023. 3. 1. 20:54
DOM에 접근하기 getElementById(id) : id 명으로 접근 getElementsByClassName(class) : 클래스 명으로 접근하여, 여러 요소가 배열 형태로 저장됨 getElementsByTagName(tag) : 태그명으로 접근하며 여러 요소가 배열 형태로 저장됨 querySelector() : id 명이나 선택자를 사용해 접근 querySelectorAll() : 클래스 명이나 태그명의 선택자를 사용해 접근, 여러 노드가 노드 리스트 형태로 저장됨 속성 가져오기 및 수정하기 getAttribute(속성) : 태그에서 사용한 속성값을 가져옴 setAttribute(속성, 값) : 태그의 속성을 특정한 값으로 지정함 이벤트 처리하기 요소.addEventListener(이벤트, 함수..
-
문서 객체 모델 (DOM)html, css, js 2023. 3. 1. 20:53
자바스크립트를 사용하는 이유는? 어떤 조건에 맞거나, 사용자의 동작이 있을때 웹 문서 전체 또는 일부분이 동작으로 반응하게 하기 위함이다. 이렇게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다. DOM(document object model) ? DOM 문서객체 모델이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다. DOM은 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지 표 등 모든 요소도 각각 객체로 정의한다. 즉 웹 문서와 그안의 모든 요소를 객체로 인식하고 처리한다. DOM tree DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. Do it! 이런 코드가 있을떄 html요소는 hea..
-
[js] 객체, 프로퍼티, 메소드html, css, js 2023. 2. 27. 18:10
객체란? 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위이다. 프로그램에서 인식할 수 있는 모든 대상을 가르킨다. (웹과 관련된 대상은 모두 객체로 인식한다.) 자바스크립트는 모든 것이 객체 자바스크립트에서 사용하는 객체는 다음과 같다. 문서 객체 모델 (DOM) : 웹 문서 자체도 객체이고, 그안에 삽입되어 있는 링크나 이미지 텍스트 필드 등도 모두 객체이다. ex) document, image, link 객체 등이 있다. 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낸다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다. 내장 객체 : 웹 프로그래밍을 할때 자주 사용하는 요소는 자바스크..
-
[js] 함수/ 이벤트html, css, js 2023. 2. 22. 01:07
함수 알아보기 함수란? 여러 동작을 묶은덩어리이다. js프로그램은 단순히 동작 하나로 실행되는것이아닌, 여러 동작이 연결된다. 이렇게 동작해야 할 목적대로 묶은 명령을 함수라고한다. 예로 이전 게시물에 사용했던, alert()문은 괄호안에 내용을 입력하면 웹 브라우저에 알림창을 표시하는 함수이다. 함수 선언 및 호출 함수 선언 function 함수명() { 명령 } 웹 브라우저에서 자바스크립트 소스를 해석할때는 함수 선언 부분을 가장 먼저 해석한다. 따라서 개발자가 어디든 아무곳에나 함수를 선언해놓기만 하면 선언한 위치와 상관없이 함수를 호출할수있다. 함수선언 위치는 프로그램 흐름에 영향을 주지 않는다. 보통 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아 놓고 필요할때마다 함수를 호출해서 사..
-
[js] 자바 스크립트 기본 문법(변수/ 자료형/연산자/조건문/반복문)html, css, js 2023. 2. 21. 16:20
변수 변수란 프로그램을 실행하는 동안 값이 여러 번 달라질수있는 데이터 상수란 값을 한번 지정하면 바뀌지 않는 데이터 변수 선언 규칙 1. 변수 이름의 첫글자는 영어 대소문자, 언더바만 쓸 수 있다. 2. 영어 대소문자를 구별하며, 예약어는 변수이름으로 쓸 수 없다. 3. 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어 쓴다. (camel case) 4. 변수 이름은 의미있게 작성해야함 변수 선언과 값 할당 var 예약어이용 var 변수명; var 변수명, 변수명, 변수명; var birthYear; birthYear = 1995; var currentYear = 2021; 나이 계산 프로그램 만들기 자바 스크립트의 데이터 유형 자동 변환 자바스크립트는 데이터 유형이 유연하게 바뀐다. 프롬프트 창에서..
-
[js] 기본입출력, 스타일 가이드html, css, js 2023. 2. 20. 19:15
식과 문 자바스크립트 언어는 식과 문으로 구별한다. 식? 표현식이다. 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다. 어떤값을 만들어낼수있다면 모두 식이며 식은 변수에 저장된다. 문? 명령이다. 문의 끝에는 세미콜론을 붙여서 구분한다. 조건문이나 제어문등을 예로들수있다. 넓은 의미에서 문은 값이나 식까지도 포함한다. 간단한 입출력방법 알림 창 출력하기 alert(메세지) 확인 창 출력하기 confirm(메세지) 사용자가 누른 버튼의 결과를 변수에 저장한후 그값에 따라 프로그램에서 처리함 프롬프트 창에서 입력받기 prompt(메세지) 또는 prompt(메세지, 기본값) 프롬프트는 텍스트 필드가 있는 작은 창이다. 프롬프트 창을만들땐 기본값을 지정하거나 지정하지 않을 수 있다. 웹 브라우저 ..
-
[js] js 사용방법html, css, js 2023. 2. 20. 18:32
지금까지 공부한 프론트엔드 언어들의 역할은 무엇인가? HTML - 웹 문서의 내용을 구성한다. CSS - 웹문서의 레이아웃이나 스타일을 지정한다. js - 웹의 요소를 움직이게 하거나, UI에 활용 웹 문서 안에 작성하는 방법 -> 사이에 작성한다. 그러나 대부분 문서 내부에 js코드를 적는것보단, 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용한다. 외부 스크립트 파일로 연결해서 자바스크립트 작성하는 방법 외부 자바스크립트 파일은 자바스크립트 소스만 작성하고 확장자는 *.js로 저장한다. HTML 문서에서 자바스크립트 위 텍스트를 클릭해 보세요 var heading = document.querySelector('#heading'); heading.onclick = function()..