HTML9 5/16 - DOM 요소 접근, JQuery 목차DOM 요소 접근기본형documnet.getElementById(”id명”)document.getElementsByclassName(”class명”)document.getElementsByTagName(”태그명”)TagName과 class는 여러 개를 가져올 수 있으므로, Element뒤에 s를 붙여야 한다.하나만 가저오는 메서드document.querySelector(선택자)모든 요소를 가져오는 메서드document.querySelectorAll(선택자)웹 요소의 내용에 접근하기요소.innerText하나만 가져옴요소.innerHtml요소.textContent다 가져옴text 관련은 내용 바꿀 때html 관련은 html태그가 포함된 내용을 바꿀 때이벤트preventDefault()이벤트를 취소할 수 .. 2025. 5. 17. 5/15 - JavaScript 문법 목차변수let변수를 선언하고 값을 할당할 수 있음const상수를 선언, 값 재 할당 불가능자료형Number숫자문자열작은 따옴표나 큰 따옴표로 나타냄배열객체undefined자료형이 지정되지 않았을 때의 상태변수를 선언만 한 후 값을 할당하지 않은 변수null값이 유효하지 않은 경우템플릿 리터럴문자열과 변수 식을 섞어서 하나의 문자열을 만드는 표현 형식논리형Boolean 유형참 / 거짓자료 형 변환자바 스크립트는 느슨한 자료형 체크**typeof 변수**를 통해 자료형 체크 가능자료형 변환 함수Number()parseInt()parseFloat()String()Boolean()비교 함수 VAR권장하지 않는 이유함수 스코프함수 레벨빠뜨리면 전역으로 실행재 선언이 가능하여 위험함수 내 전역 변수 사용은 지양le.. 2025. 5. 17. 5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트 목차마진과 갭의 차이마진인접한 요소가 없어도 적용갭인접한 요소가 있어야만 적용플렉스 박스화면 크기가 달라지면 그에 맞춰 플렉스 항목을 늘리거나 줄일 수 있는 유연한 상자를 활용해 레이아웃을 만듬CSS 그리드 레이아웃가로와 세로 방향 모두 사용항목은 1차원(flex), 그리드는 2차원부모 컨테이너로 묶어주어야 함정적으로 만들어진 행의 높이를 지정 1 2 3 4 5 6 동적으로 만들어진 행의 높이 지정 1 2 3 4 5 6 repeat와 함께 사용하여 원하는만큼의 열을 채울 수 있음자동 채우기auto-fit남은 공간 .. 2025. 5. 17. 5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹 목차웹 문서의 레이아웃 만들기블록 레벨과 인라인 레벨을 바꾸는 display 속성종류block블록 레벨 요소로 표시 (한 줄 뛰어넘음)inline인 라인 레벨 요소로 표시 (한 줄)inline-block인 라인 레벨처럼 나란히 배치하지만 블록 레벨처럼 너비와 높이 지정 가능none해당 요소를 화면에 표시하지 않음영역도 사라짐hidden영역은 남아 있음 안녕하세요 반갑습니다 저는 홍길동 입니다.왼쪽이나 오른쪽에 배치하는 float 속성좌/우 차례대로 나열예를 들어, 그림 옆에 글이 나열 됨 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nisi, culpa excepturi id laborum dolores! Expli.. 2025. 5. 17. 5/12 - CSS CSSCascading Style Sheetscss3스타일 시트 (스타일)디자인 적 작업웹 문서의 내용(html)과 디자인적 요소(css) 분리html 태그의 기본 속성들이 존재하지만 (부족, 브라우저마다 차이..) 대부분의 속성들은 css로 처리표현식선택자 { 속성명 : 속성 값, ...} 스타일 종류브라우저 내장 스타일사용자 지정 스타일우선 순위는 인 라인 → 나머지는 위에서 아래 순서 (가장 아래가 우선 순위가 가장 높음)범위가 좁아질 수록 우선 순위 높음인 라인 방식 (우선 순위 1 순위, 가장 먼저 적용) 안녕하세요문서 내부 안녕하세요문서 외부 * 안녕하세요사용부모의 속성을 자식이 물려 받음body에 yellow를 주어 자식인 h2는 yellow 적용 안녕하세요 반.. 2025. 5. 17. 5/9 - HTML 태그, CSS 기본 목차Anchor 태그이동할 링크를 지정해주는 태그하이퍼링크 속성 href와 함께 사용target 속성_blank 를 가장 많이 씀_blank새 창 네이버 Go to Index클릭 시 하이퍼링크로 이동 미디어 태그이미지 태그src경로alt보여줄 수 없을 때 대체 텍스트 명시width, height크기title미리보기 말풍선 비디오 태그src경로width, height크기controls=”controls”재생 Your browser does not support the video tag. 틀트래픽이 내 브라우저가 아닌, 외부 링크에서 발생 소스 코드 복사를 통해 영상을 가져올 수도 있음유튜부 영상 오른쪽 클릭 후 소스 복사 * for.. 2025. 5. 11. 이전 1 2 다음 728x90 반응형
