Web6 왕초보_웹개발_06_CSSOM CSS 스타일 시트를 객체로 표현하여 자바스크립트로 조작할 수 있게 해주는 모델입니다. 문서의 구조에 적용되는 스타일 정보를 나타냅니다. CSSCascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 언어입니다. 객체 실제 세계의 사물이나 개념을 프로그램 안에서 표현한 것입니다. CSSOM에서 각 CSS 규칙은 하나의 객체로 표현됩니다. DOMDocument Object Model의 약자로, HTML 문서를 객체로 표현한 모델입니다. CSSOM과 함께 웹 페이지를 동적으로 조작하는 데 사용됩니다. 스타일 시트CSS 규칙들의 집합으로, 웹 페이지의 디자인을 정의합니다. 자바스크립트CSSOM을 조작하여 스타일을 동적으로 변경하는 데 사용되는 프로그래밍 언어입니다. Web 2024. 10. 29. 왕초보_웹개발_05_DOM 웹 페이지를 구성하는 요소들을 객체로 표현하여 자바스크립트와 같은 프로그래밍 언어를 통해 조작할 수 있도록 만든 모델입니다. 레고 블록으로 집을 짓는 것처럼 DOM은 HTML문서를 하나하나의 블록으로 나누어서 그 블록들을 자유롭게 조립하고 변경할 수 있게 해줍니다. 이해하기 위한 키워드 HTML웹 페이지의 구조를 만들기 위한 언어입니다.DOM은 HTML 문서를 기반으로 만들어집니다. 자바스크립트DOM을 조작하여 웹 페이지를 동적으로 변화시키는 데 사용되는 프로그래밍 언어입니다. 객체실제 세계의 사물이나 개념을 프로그램 안에서 표현한 것입니다.DOM에서 HTML요소들은 각각 하나의 객체로 표현됩니다. 트리구조DOM은 HTML문서의 구조를 계층적인 트리 형태로 표현합니다.부모-자식 관계로 연결된 노드들.. Web 2024. 10. 29. 왕초보_웹개발_04_JavaScript 자바스크립트는 웹 페이지에 생명을 불어넣는 마법 같은 언어 정적인 문서가 아닌, 사용자와 상호작용하고 동적으로 변화하는 웹 페이지를 만들기 위해 사용됩니다. 웹사이트에서 버튼을 클릭하면 어떤 동작이 일어나거나, 페이지가 부드럽게 전환되는 것들이 모두 자바스크립트 덕분이랍니다. 동적인 웹페이지 구현 버튼 클릭 마우스 이동 등 사용자의 행동에 따라 웹 페이지가 반응하도록 만들 수 있습니다. 웹 애플리케이션 개발복잡한 웹 애플리케이션을 구축하는 데 사용됩니다.Gmail, Facebook 같은 서비스들이 자바스크립트를 기반으로 만들어졌습니다. 데이터 처리웹 서버에서 데이터를 가져와 화면에 표시하거나사용자가 입력한 데이터를 서버로 전송하는 작업을 합니다.게임 개발간단한 웹 게임부터 복잡한 게임까지 다양한 .. Web 2024. 10. 29. 왕초보_웹개발_03 CSS 속성 옷을 입힐 때 색깔, 사이즈, 디자인 등을 선택하는 것처럼, CSS 속성을 통해 웹 페이지의 요소들을 원하는 모습으로 꾸밀 수 있습니다. 텍스트 관련 속성color: 텍스트 색상font-size: 글자 크기font-family: 글꼴 종류text-align: 텍스트 정렬 (left, center, right) 배경 관련 속성background-color: 배경색background-image: 배경 이미지background-repeat: 배경 이미지 반복 설정 박스 모델 관련 속성width: 요소의 너비height: 요소의 높이margin: 요소 주변의 여백padding: 요소 안쪽의 여백border: 테두리 위치 관련 속성position: 요소의 위치를 설정 (static, relative, absol.. Web 2024. 10. 28. 왕초보_웹개발_02 HTML 태그 태그는 각각 특정한 의미를 가지고 있으며, 이 태그들을 조합하여 웹 페이지의 다양한 요소들을 표현할 수 있습니다. 구조 태그 : HTML 문서의 시작과 끝을 나타냅니다.: 문서의 메타 정보(제목, 스타일 시트 등)를 포함합니다.: 문서의 본문 내용을 포함합니다.: 문서의 특정 부분을 구분합니다.: 독립적인 콘텐츠를 나타냅니다. 텍스트 태그 ~ : 제목을 나타냅니다.: 문단을 나타냅니다.: 인라인 요소를 감싸는 데 사용됩니다.: 굵은 글씨를 나타냅니다.: 기울임꼴을 나타냅니다. 링크 태그: 하이퍼링크를 생성합니다. 이미지 태그: 이미지를 삽입합니다. 리스트 태그: 순서 없는 목록: 순서 있는 목록: 목록 항목 테이블 태그, , , : 테이블을 생성합니다. Web 2024. 10. 28. 왕초보_웹개발_01 웹의 작동 원리와 HTML과 CSS를 이해하고 사용할 수 있다. 주소입력유저가 주소창에 웹사이트 주소[URL]를 입력하면,브라우저는 해당 주소를 가진 서버에 요청을 보냅니다. 서버응답서버는 요청받은 정보를 브라우저에 보내줍니다.(HTML, CSS, JavaScript) HTML 파싱브라우저는 받은 HTML 코드를 분석하여 웹페이지의 구조를 이해합니다.이를 DOM[Document Object Model] 이라고 합니다. 웹의 작동 원리를 이해하기 위한 키워드 HTML [HyperTextMarkupLanguage]웹페이지의 기본 구조를 담당하는 마크업 언어 CSS [CascadingStyleSheets]웹페이지의 디자인을 담당하는 마크업 언 JavaScript웹페이지에 동적인 효과를 추가하는 스크립트 언어.. Web 2024. 10. 28. 이전 1 다음 💲 추천 글