web동곤

1) 타자게임 2) 그림맞추기게임 3) jquery3-1)정의3-2) 불러오기3-3)간단한사용 예 4) JS 예제 1)타자게임 점수:  2) 같은 그림 찾기 2 X 2 4X4 6X6 Suffle function : 사진섞기function shuffle(){ //사진섞기 model = ["S_1.jpg","S_1.jpg","S_2.jpg","S_2.jpg", "S_3.jpg","S_3.jpg","S_4.jpg","S_4.jpg", "S_5.jpg","S_5.jpg","S_6...

1)BOM1-1)screen1-2)history1-3) location1-4)window2) imageMove3) game3-1) 야구게임(이해해보자) 1)BOM  BOM : browser object Model(브라우저객체모델)         1. 브라우저의 구성요소를 객체로 처리할 수 있는 기능         ==> 브라우저의 구성요소가 이미 객체로 생성되어있음(내장객체)        2.BOM객체         1) window : 브라우저 창을 의미 , 최상위 객체임(생략가능)         2)screen : 화면을 의미 (화면의너비/높이 등 처리)         3)history : 방문경로를 저장 . (뒤/앞) 이동가능         4)location : 현재브라우저 경로         5..

1)배열의 메서드1-1) concat1-2) reverse1-3)sort1-4)push , pop1-5) slice , splice2) 함수2-1) 선언적함수2-2)익명함수2-3)함수의매개변수2-4)함수의리턴과 익명함수의 리턴2-5) 자기호출함수2-6) 콜백함수 3)객체3-1)객체기본3-2)객체23-3)객체의 추가 변경 삭제3-4) 예제3-5) 생성자함수3-6) 프로토타입3-7) 글씨를 읽는 기능 4)예제 1) 배열의 메서드1-1)  concat배열을 합쳐주는 함수객체의 변경이 이루어지지않음적용하려면 새로운배열에 저장해야함! 배열관련 메서드 배열.concat(배열,배열....) 확인하기 function concatTest(){ const area11 = document..

1)함수1-1)date + setInterval1-2) 시간관련함수2) 이벤트 2-1) 기본이벤트2-2)인라인2-3)표준2-4) 정리2-5) 예제 3) 다양한 이벤트3-1)key Event3-2) 태그의 기본이벤트3-3)submit event 4)배열4-1)배열의선언 4-2 )배열에 값저장4-3)배열관련메서드 (indexOf) 5) 예제 2025.03.20 - [JavaScript] - 부트캠프34일차(JS[요소조회출력, 문자열,Math, 조건문]) 부트캠프34일차(JS[요소조회출력, 문자열,Math, 조건문])1) 요소출력1-1) id속성값 이용1-2)태그이름 이용1-3)name속성 이용1-4)class속성값 이용1-5)선택자를 이용1-6) 정리2)문자열2-1)기본메서드2-2)문자열관련 HTML(비권장..

1) 요소출력1-1) id속성값 이용1-2)태그이름 이용1-3)name속성 이용1-4)class속성값 이용1-5)선택자를 이용1-6) 정리2)문자열2-1)기본메서드2-2)문자열관련 HTML(비권장) 3)Math3-1)숫자관련메서드3-2)문자열 숫자간의 산술,형변환3-3) 예제 4)조건문 반복문4-1) 조건문4-2) 반복문4-3) 예제 5) 최종예제1) 요소출력1-1) id속성값 이용해 조회 overflow : auto; --> 영역의 범위이상이 되면              내부에서 태그를 만듬(벗어나지않음) HTML 요소에 접근하기(태그객체 조회) 아이디 속성을 이용해 조회하기 아이디로 접근 JS코드function accessId(){ //divEl : 태그 객체 요소(El..

3)자바스크립트3-1) 자바스크립트 시작3-2) 정리와 예시3-3) 자료형과 변수3-4)연산자3-5)데이터입출력1) 출력2)입력 3-6) 예제   3) 자바스크립트역할웹페이지 기능 구현특징한줄씩 읽으며실행되는 인터프리터언어 , 웹에서 실행되며 사용자가 웹과 상호작용 할 수있게 도와줌접근제한자의 개념이없다소스가외부공개되므로 보안에취약변수선언 필요X (초기화시 자료형결정됨) 인터프리터  언어한 구문씩 기계어로 해석해가면서 실행하는 언어미리 번역하지않기때문에 속도가느린편                            오류발생시 수정이편함3-1) 자바스크립트 시작기본형식1)표현법2) 특징HTML에서 제공하는 internal 방식1) 특징가장 일반적인 방식html 파일내 자바스크립트 개요 ..

1)@media 태그2) bootstrap (css프레임워크) 1) @media 태그     @media : 화면에크기별로 다른 css 적용이가능함 @media태그 예제 화면의 크기 별로 바탕색이 달라져요  2)bootstrap  css를 매번 처음부터만드는것도 쉽지않다그것을 해결할 수 있는 방법중 하나가 부트스트랩(bootstrap)이다사용가능한 두개의 사이트를 보여주겠다 https://www.w3schools.com/bootstrap5/bootstrap_flex.php W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Cover..

1) 레이아웃 스타일1-1)블럭요소라인1-2) position1-3) z-index1-4) visibility 1-5)float1-6) 배치1-7) 실습1-8) 순서선택자+실습1-9) flex 관련 실습 , \1-10) 시맨틱태그 예제1-11) 예제21-12) 로그인 예제1-13)세부사항 예제1-14) 통합 예제  1)레이아웃 스타일 .size-test{ border: 10px solid red; } #test1{ width: 400px; /*가로*/ height: 200px;/*높이*/ } #test2{ width: 50%; /*창의크기에 따라 가로길이가 ..

1) 선택자1-1)전체선택자1-2)태그선택자1-3)아이디선택자1-4)클래스선택자 2)기타 선택자2-1) 속성 선택자2-2) 자손선택 후손선택2-3)동위(같은레벨)선택자2-4) 반응선택자2-5) 상태선택자  3) 선택자 우선순위4)폰트 스타일5)text 스타일6)list 스타일7)영역관련 스타일8)테두리(border)관련 스타일9)배경관련 스타일10) 예제   1) 선택자 선택자란? 특정 html 요소를 선택하고자 할 때 사용하는기능        선택자로 해당요소를 선택하면 원하는 "스타일"과"기능" 적용가능(style은 head내에 적어줘야함 (그게아니라면 모두 inline요소로 작성해야함) 1-1. 전체선택자(모두)    * {         스타일속성:값;         스타일속성:값;     }1-..

요번에 HTML에 대해서 배운거를 블로그로 계속 작성하며 공부했다. 하지만 난 java ,DB만 해봤어서 매우힘들고 생소했다.복습을 함으로써 조금이라도 익숙해져보자! 거의 코드위주로 복습을할거다 코드옆에 주석을 조금씩 달아놓을것임!!일단 금요일의 예제문제에 대한 코드를남겨두겠다예제) 나의 답(추후에 코드를 풀어서 따로 블로그 만들 예정)1) 기본1-1) text1-2)list1-3)table1-4) a(링크)1-5) form 2)  1) 기본 ! + enter 를 하면 HTML구조가 전부 자동완성된다 이용하자!!(주석 단축키 : c +enter) 안녕 안녕 안녕 안녕 안녕 안녕 작다(l..