JavaScript 04. 요소 가져오기 (접근하기)
2022. 12. 16. 16:10
Front/JavaScript
HTML 요소에 접근하기 ( 해당 요소 객체 가져오기 ) 아이디를 이용해서 요소 가져오기 : document.getElementById("아이디명") -아이디로 접근해서 버튼 클릭시 div 의 속성값 변경하기 아이디로 접근 HTML 삽입 미리보기할 수 없는 소스 - 조건문이용해서 속성값 변경 클릭 > 조건문을 이용해서 red 색상이면 gold로 , red가 아니면 red로 변경하도록 함 태그명을 이용해서 요소가져오기 : document.getElementsByTagName("태그명") 목록1 목록2 목록3 목록4 목록5 태그명으로 접근 > 반환값이 [배열]에 담겨 있기 때문에 바로 .innerHTML과 같은 함수 사용할 수 없음 ( 인덱스에 접근해서 사용) HTML 삽입 미리보기할 수 없는 소스 name..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcjEnhi%2FbtrTFaIluR6%2F9KruFSHBKwPOHb6V3l6VTk%2Fimg.png)
CSS ,HTML 03. 검색창 만들기
2022. 12. 15. 18:38
Front/화면레이아웃 실습
위 이미지 모양 대로 검색창을 만들고자 함 -> 전체 감싸는 div > form > div (intput type ="text) div(input type = "submit") 필요 HTML 삽입 미리보기할 수 없는 소스
JavaScript 03. 데이터 입출력
2022. 12. 15. 17:11
Front/JavaScript
1. 데이터를 출력하는 구문 1) window.alert("알람창에 출력할 문구"); -> window. 생략 가능 2) window.console.log("콘솔창에 출력할 문구"); -> window. 생략 가능 3) document.write("화면상 출력할 문구"); -> 이전에 있던 화면상의 코드 사라지고 괄호안의 문구가 보여짐 화면에 출력 HTML 삽입 미리보기할 수 없는 소스 4) 선택한요소.innerHTML | innerText = "요소에 출력할 문구"; 자바스크립트에서 특정요소(element)안의 값(content)을 가져온다거나, 변경하고자할때 사용 확인 HTML 삽입 미리보기할 수 없는 소스 2. 데이터 입력받는 구문(변수에 기록 가능) 1) 변수 = window. confirm("질..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpxC6f%2FbtrTK9WhHp2%2FI47y8JQxKmpo4JowDmccWk%2Fimg.png)
JavaScript 02.변수와 자료형
2022. 12. 15. 16:53
Front/JavaScript
변수와 자료형 자바스크립트에서는 변수선언시 자료형을 지정하지않음 var, let, const 를 이용해서 변수를 선언, 아무값을 담을 수 있음 (특정값 대입시 그 값에 맞춰 자료형이 저장) 자료형 : 변수에 대입되는 값(리터럴)에 따라서 자료형이 결정 string (문자열) / number(숫자) / boolean(논리값) / object(객체) / function (함수) / undefined(초기화안된변수) -> 자료형 확인시 사용하는 함수 : typeof(변수명) * var , let, const 의 차이점 1) 변수 선언 방법 - var : 중복 선언 가능 (단점) , 재할당 가능 - let : 중복 선언 불가능, 재할당 가능 - const : 중복선언 불가능, 재할당 불가능 (상수같은 개념) 클..
JavaScript 01. 자바스크립트 개요
2022. 12. 15. 16:33
Front/JavaScript
1. 스크립트 언어란? 프로그램의 동작을 사용자의 요구에 맞게 수행되게끔 해주는 용도 매우 빠르게 배우고 짧은 소스코드로 상호작용되도록 고안됨 2. 자바 스크립트 웹브라우저에서 많이 사용되는 "인터프리터" 방식의 스크립트 언어 -인터프리터방식: 코드를 한줄씩 읽어가면서 바로 실행하는 방식 실시간으로 텍스트를 분석해서 실행됨 -> 속도가 빠름 / 코드에 문법적 오류가 있으면 코드가 실행되는 시점에서 알려줌 3. 자바스크립트의 장단점 * 장점 컴파일 과정 없이 인터프리터 코드를 한줄씩 읽어가며 바로 실행 되기때문에 수행속도가 빠름 코드 작성이 간단하기 때문에 초보자가 접하기 쉬움( 단순한 구조, 원칙) ex) 접근제한자의 개념 없음, 변수 선언시 자료형을 정해둘 필요 없음 * 단점 웹에 특화된 기술 => 내..
CSS 12. 변형관련 스타일
2022. 12. 13. 22:18
Front/CSS
transform 1. 상하,좌우, 대각선으로 움직이기 : translateY | translateX | translate(x,y) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 2. 가로,세로, 전체 확대 축소 : scaleX | scaleY | scale(x,y) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 3. 지정한 각도만큼 가로,세로,전체 뒤틀기 : skewX | skewY | skew(x,y) -> 단위 deg HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. 지정한 각도만큼 회..
CSS 11. 레이아웃 관련 스타일 (2)
2022. 12. 12. 17:26
Front/CSS
배치 관련 스타일 position : 상대위치 (relative)와 절대위치(absolute) >> 부모 요소에 position:relative 로 세팅, 이동하고자하는 요소에 position:absolute top: 거리(px) left:거리(px)로 설정 첫번째자식 두번째자식 세번째자식 HTML 삽입 미리보기할 수 없는 소스 position : 고정위치 (fixed) HTML 삽입 미리보기할 수 없는 소스 z-index : 요소들을 순서대로 위로 쌓는 속성 요소1 요소2 요소3