클라이언트

1\. 개발환경Eclipse(IDE) > htmlVisual Studio Code > css, javascript1.1 JDK \- temurin jdk 1.1.1 JAVA_HOME 지정 \- 시스템 환경 변수 \- JAVA_HOME 시스템 변수 추가 1.1.2

문서 메타 정보를 담는 영역이다. 문서 자체를 설명하거나 눈에 보이지 않는 설정(브라우저/검색엔진용 정보 등)을 저장한다.문서 출력 정보를 담는 영역이다. 브라우저가 실제로 화면에 출력하는 모든 내용(텍스트, 이미지, 동영상 등)은 전부 이 안에 작성한다.브라우저는 소

p 태그는 텍스트 문단을 구성하는 블럭 태그 쌍태그이며 혼합형으로 사용 align 속성으로 텍스트 정렬 지정 가능. 단, p 태그는 블럭 태그임에도 자식으로 다른 블럭 태그를 가질 수 없는 예외 규칙 적용font 태그는 텍스트의 시각적 서식을 지정하는 인라인 태그siz

form 태그는 스스로 렌더링 결과를 만들지 않는 기능성 태그로 눈에 보이지 않음 입력받은 값을 서버로 전송하는 역할을 담당HTML Form과 HTML Input Control의 관계는 입력 장치(키보드, 마우스, 터치 등)를 통해 데이터를 입력받는 역할(HTML In

CSS는 Cascading Style Sheet의 약자로 스타일 언어 기존 HTML의 서식 작업(10%)과 확장 기능(90%)을 담당 버전은 CSS 1, CSS 2, CSS 3(+HTML 5)으로 구분CSS의 장점은 서식 기능이 풍부하고 생산성과 유지 보수성이 높으며

대부분의 편집기에서 지원하는 생산성 도구로 CSS 선택자 문법을 사용해 HTML/CSS 코드를 빠르게 작성하는 기술divtitle → divtitle=상자 → imgwidth=500 height=500 → CSS에는 없는 Emmet

HTML 속성은 태그에 종속적이라 특정 태그에만 사용 가능CSS 속성은 태그에 독립적이라 모든 태그에 적용 가능background-color - 배경 색상background-image - 배경 이미지background-repeat - 배경 이미지 반복 방식backgro

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

border - 테두리width / height - 너비 / 높이padding - 안쪽 여백margin - 바깥쪽 여백너비: 부모 영역을 꽉 채움 (100%)높이: 내용물의 높이와 동일너비: 지정한 수치로 설정 가능높이: 지정한 수치로 설정 가능너비: 내용물의 너비와

인라인 태그에 text-align을 적용하면 아무 효과 없음 내용물 크기 = 영역 크기라 움직일 공간이 없기 때문 인라인 태그를 정렬하려면 부모 블럭 태그에 text-align을 적용해야 함블럭 태그는 너비가 100%라 내용물 수평 정렬 가능 단, width를 명시적으

브라우저가 HTML 요소에 미리 적용해놓은 기본 서식 브라우저 종류(Chrome, Firefox, Safari 등)마다 기본 스타일이 조금씩 다름있는 그대로 사용 - User Agent Style Sheet를 제거하지 않고 추가 서식만 구현브라우저 기본 스타일을 모두

링크이모지는 운영체제나 브라우저 버전에 따라 렌더링 주체가 달라져서 같은 코드여도 전혀 다른 디자인으로 보임. Windows, macOS, Android가 각자 자기 스타일로 이모지를 그리기 때문에 개발자가 의도한 모습이 사용자에게 그대로 전달된다는 보장이 없음. 구형

브라우저 기본 배치 방식은 FlowLayout으로, 코드 순서대로 요소를 배치한다.padding: 부모가 자식의 위치 지정margin: 스스로 위치 지정position, transform: CSS 표준 방식(x → left, y → top)으로 위치를 지정하며, 종류에

이전: 전체, 태그, 아이디, 클래스, 그룹, 자식, 형제, 의사 클래스이후: 의사 클래스, 의사 요소:first-child: 첫 번째 자식:last-child: 마지막 자식:nth-child(n): n번째 자식:nth-last-child(n): 뒤에서 n번째 자식선택

요소의 시각적 형태를 변형하는 속성으로, transform: 함수명(값); 형식으로 사용.translate(x, y) : 요소의 위치를 X축, Y축 방향으로 이동 (예: translate(50px, 100px))scale(x, y) : 요소의 크기를 배율로 조절, 1이

플렉스박스는 요소를 유연하게 배치하기 위한 레이아웃 방식.메인축: 가로 방향 (좌 → 우), 아이템이 나열되는 방향수직축: 세로 방향 (상 → 하), 메인축의 직각 방향아이템 너비: 내용물만큼 (auto)아이템 높이: 부모 요소만큼 (100%)flex-direction

넷스케이프 개발 → W3C 표준 등재 신청 → 통과 → ECMAScript 1.0MS → JScript(독자 구현)이름: LiveScript → JavaScript (Java와 무관, C 계열 언어)초반엔 가볍고 쉬운 언어 → 2014년 이후 복잡해짐ES6 이후 확장N

BOM — 선택적 접근 모델 초창기부터 현재까지 사용 일부 태그만 접근 가능 — 폼 태그, 이미지, 링크 계층 구조 + name 식별자로 접근 id, class 인식 불가

BOM 개요 screen 객체 location 객체 history 객체 내장 배열 (컬렉션) 대화 상자 Form 유효성 검사 이미지 및 링크 제어

이벤트, 함수, 타이머

DOM조작, event, axis

ES6 변수 선언 호이스팅 객체 (Object) 생성자 함수 window 객체 클로저 (Closure) 템플릿 문자열 (Template String) 화살표 함수 (Arrow Function) 배열 고차 함수 이벤트 버블링 / 캡처링

CSS 조작 방법 글자 크기 조절 상자 이동 동적 상자 생성/삭제 Drag & Drop 슬라이드 메뉴 배경 이미지 조작 / 스프라이트

jQuery 설치 방법 jQuery() 함수 특징 이벤트 등록/제거 CSS 조작 콘텐츠 / 속성 조작 Axis (축 탐색)