pogun 코딩 공부 저장소

: 이런식으로 "[ ]" 대괄호 안에 사용!: .box3 클래스에 a태그 안에 target속성을 가지면 색을 넣어라.: 마친가지로 title 속성을 가진 a 태그한테 색을 넣어라.href$='hwp' : hwp로 끝나는 태그한테 밑줄을 없애라.href*='hwp' : 포함하는title^='en' : 시작하는속성 선택자선택자[속성] 선택자[속성="값"]단일 속성 선택선택자[속성="값"], 선택자[속성="값"] 속성 다중 선택선택자[속성$="값"]값으로 끝나는선택자[속성*="값"]값을 포함하는선택자[속성^="값"]값으로 시작하는

1. var (과거 방식, 사용 지양) 함수 스코프(Function Scope)- var로 선언된 변수는 함수 내부에서만 유효하고, 블록({}) 내부에서는 제한되지 않음 재선언 가능- 같은 변수명을 여러 번 선언해도 오류가 발생하지 않음 호이스팅(Hoisting) 발생- 선언된 변수가 코드 최상단으로 끌어올려짐 - 하지만 undefined로 초기화되므로 예측하지 못한 오류가 발생할 수 있음function example() { if (true) { var x = 10; } console.log(x); // 10 (블록 범위 무시)}var a = 1;var a = 2; // 가능 (재선언 허용)console.log(b); // undefined (Hoisting 발생)va..

문제 1. 이미지 클릭 이벤트 예제 - alert 창 출력 문제 2. 사용자 입력 확인 - 한국에서 가장 높은 산 맞히기 한국에서 제일 높은 산은? 답: 확인 문제 3. 버튼 클릭으로 연산 수행 - 사칙연산 및 나머지 연산 구현 변수의 연산 a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다. 덧셈 뺼셈 곱셈 나눗셈 나머지 = 문제 4. 체크박스로 추가 요금 계산 - 체육관 이용료 자동 합산: 기본 체육관 이용료(4,800원)를 기준으로 사용자가 추가 옵션을 선택할 때마다 총 금액이 자동으로 변경되..

1. 버튼 클릭 이벤트 처리 (onclick): 버튼 클릭 시 입력한 값을 가져와서 태그에 표시하는 방법 HTML 코드:p tag완료 JavaScript 코드: function buttonClick() { // 입력된 값을 가져옴 let message = document.getElementById('msg').value; // 가져온 값을 태그에 표시 document.getElementById('demo').innerText = message;}설명:1. 사용자가 태그에 값을 입력 2. [완료] 버튼을 클릭하면 buttonClick() 함수 실행 3. document.getElementById('msg').value → 입력한 값을 가져옴 4. document.getEl..

1. 변수(Variable) 선언: JavaScript에서는 변수를 선언할 때 var, let, const를 사용: 그러나 ES6 이후에는 let과 const를 주로 사용var number = 1;var name = "홍길동";let height = 182.2;let clear = true;: JavaScript는 데이터 타입을 명시하지 않고도 변수를 선언할 수 있음: var를 사용하면 변수 재선언이 가능하지만, ES6에서는 let과 const를 권장 JavaScript) 변수 정리 : var, let, const1. var (과거 방식, 사용 지양) 함수 스코프(Function Scope)- var로 선언된 변수는 함수 내부에서만 유효하고, 블록({}) 내부에서는 제한되지 않음 재선언 가능- 같은 변수..

JavaScript란?: 웹 브라우저에서 실행되는 클라이언트 측 스크립트 언어 : HTML 및 CSS와 함께 웹 페이지의 동작을 담당한다. 특징:: 웹 브라우저에서 실행되는 프론트엔드 언어 : HTML 태그를 조작하여 동적인 웹 페이지 구현 가능 : 컴파일 없이 실행되므로 빠르고 가벼움 : 변수를 선언할 때 자료형을 명확하게 지정하지 않아도 됨 (동적 타입) : ES6(ECMAScript 2015) 이후의 문법이 많이 사용됨   JavaScript 발전 과정 단계설명 JavaScript 기본적인 HTML 제어 기능 제공 jQuery 간결한 문법을 활용한 라이브러리 Angular SPA(Single Page Application) 프레임워크 Node.js 서버 측에서 실행되는 JavaScrip..

1. 배경 속성(background): CSS에서 background 속성은 요소의 배경색, 배경 이미지, 반복 여부, 위치 등을 설정할 수 있다.속성설명 background-color 배경색을 설정 background-image 배경 이미지를 설정 background-repeat 배경 이미지 반복 설정 (repeat, no-repeat, repeat-x, repeat-y) background-position 배경 이미지의 위치 지정 (center top, left bottom 등) background-size 배경 이미지 크기 설정 (cover, contain, auto, 100px 50px 등) background-attachment 배경 이미지 스크롤 여부 설정 (scroll, ..

1. div태그 활용 간단한 예제 좌측상단 좌측하단 우측상단 우측하단 2. 시멘틱 태그란?: 시멘틱 태그는 HTML5에서 추가된 의미를 가진 태그: div처럼 단순한 블록이 아니라 각 요소가 하는 역할을 직관적으로 나타내는 태그 주요 시멘틱 태그태그설명 Heading Home About Blog Careers Contact Us ..

선택자설명적용 대상그룹 선택자 : A, B, C 여러 개의 요소를 한 번에 선택 .box p, .box h3, .box a 가상 클래스 선택자 :nth-child(n) 부모의 전체 자식 중 n번째 요소가 특정 태그라면 선택 .box1 p:nth-child(2) 수열 선택자 :nth-of-type(n) 같은 타입 요소 중 n번째를 선택 .box2 p:nth-of-type(1) 1. 그룹 선택자( Group Selector ): 여러 개의 선택자를 동시에 적용하고 싶을 때 사용  예제:.box p, .box h3, .box a { background: red;}: .box 내부의 p, h3, a 태그에 빨간 배경 적용 p tag h3 tag a tag h2 t..

선택자적용 대상예제 후손 선택자 : 부모 후손 부모 내부의 모든 하위 요소 div p 자손 선택자 : 부모 > 자식 부모의 직속 자식만 div > p 인접 형제 선택자 : 형제1 + 형제2 특정 요소 바로 다음 형제 h1 + p 일반 형제 선택자 : 형제1 ~ 형제2 특정 요소 이후의 모든 형제 h1 ~ p 후손 선택자 : 부모 안의 모든 하위 요소에 적용 자손 선택자 : 직속 자식에게만 적용 형제 선택자 : 같은 부모를 가진 요소들 중 특정 위치의 형제 선택1. 후손 선택자( Descendant Selector )부모요소 후손요소 { 스타일 속성;}: 모든 하위 요소(자손 + 후손)를 선택하는 방식 : 부모 요소 안에 있는 모든 하위 요소(직접 포함된 자식뿐만 아니라 그 안의..