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("질..
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
CSS 10. 레이아웃 관련 스타일(1)
2022. 12. 12. 17:21
Front/CSS
블럭요소 : 한줄로 영역 차지하고 있는 요소 / 줄바꿈 발생 ( div, p, pre, h1~h6) 인라인 요소 : content부분만 영역을 차지하고있는 요소 / 옆으로 배치 ( span, label. input, image, 글자관련태그..) * 요소의 크기 : content 영역 + padding 영역 +border 영역 margin영역 (요소의 바깥쪽 영역) 레이아웃 관련 스타일 - width, height : 기본적으로 내용을 차지하는 content 영역의 가로, 세로 길이를 조절하는 스타일속성 고정크기 (px) HTML 삽입 미리보기할 수 없는 소스 가변 크기 (%) - 화면의 크기에 따라 변경 HTML 삽입 미리보기할 수 없는 소스 - display : 화면 배치 방법 변경 선택자 { dis..
CSS 09. 배경 관련 스타일
2022. 12. 12. 17:07
Front/CSS
배경 관련 스타일( background-) background-color : 배경색 지정시 사용 나는 라이너 묻힌 있습니다. 다하지 계집애들의 차 이국 듯합니다. 새겨지는 비둘기, 불러 프랑시스 봅니다. 별빛이 가을 부끄러운 쓸쓸함과 지나고 어머님, 봅니다. 하나에 많은 이 봅니다. 까닭이요, 나는 내 않은 이름과 아이들의 까닭입니다. 자랑처럼 별 속의 말 있습니다. HTML 삽입 미리보기할 수 없는 소스 background-clip : 배경을 적용시키고자 하는 범위 지정할 때 사용 선택자{background-clip : border-box(기본값) | padding-box | content-box;} 이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고,..