[JavaScript] DOM (문서객체 모델)

DOM 이란? 문서 객체 모델 ( Document Object Model ) 객체 지향 모델로써 구조화된 문서를 표현하는 방식 XML 이나 HTML 문서의 프로그래밍 인터페이스를 제공 문서의 구조화된 표현 (structured representation) 을 제공해서 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM의 종류 Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 토해 접근 가능 XML DOM 문서를 위한 DOM 모델 XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의 모든 XML 요소는 XML DOM을 통해 접근 ..

• format_list_bulleted Front-End
• · 2023. 3. 8.
• textsms

[HTML/CSS] 레이아웃에 영향을 미치는 속성

display /* style.css 문서 */ p { display: inline; } a { display: block; } a { display: inline-block; } Block과 Inline 요소의 성격을 바꿀 때 사용 inline-block을 사용하면 두 요소의 성격을 모두 가짐 float Hello World Hello World /* style.css 문서 */ .left { float: left; } .right { float: right; } 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 Hello World Hello World /* style.css 문서 */ .left { float: left; } ...

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML/CSS] Margin 병합 현상

형제지간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } margin-bottom과 margin-top 중 숫자가 큰 값으로 적용 부모자식의 마진 병합 (❗️주의) /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } 자식인 뿐만 아니라 부모인 에도 영향을 미침

• format_list_bulleted 카테고리 없음
• · 2023. 2. 27.
• textsms

[HTML/CSS] 박스 모델

박스 모델 구조 margin / border / padding / content margin과 padding 의 차이 margin-left border 바깥쪽에서 왼쪽에 여백을 만듦 padding-left border 안쪽에서 왼쪽에 여백을 만듦 공간이 여백을 포함한 크기로 변경되는 점 유의 margin과 padding 작성 방법 top right bottom left 순서로 한 줄에 작성 가능 (시계방향) padding도 동일

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML/CSS] Block 요소와 Inline 요소

Block 요소와 Inline 요소 Hello Elice Hello Elice Hello Elice Bye Elice Bye Elice Bye Elice 두 요소를 구분 짓는 세 가지 주요 특징 줄바꿈 현상 가로-세로 상-하 배치 Block 요소 Hello Elice Hello Elice Hello Elice y축 정렬 형태로 출력 (줄바꿈 현상 나타남) 공간을 만들 수 있고, 상하 배치 작업 가능 대표 예시) 태그, 태그 Inline 요소 Bye Elice Bye Elice Bye Elice x축 정렬 형태로 출력 (한 줄에 출력) 공간을 만들 수 없고, 상하 배치 작업 불가능 대표 예시) 태그 Block 요소의 특징 태그가 대표적 줄바꿈 현상이 나타남 width / height 값 사용 가능 -> 공..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML] 구조를 잡을 때 사용하는 태그

HTML 태그 구성 요소 목차 / 본문 / 부록 목차 홈 전체 목록 태그 웹사이트의 머리글을 담는 공간 태그 메뉴 버튼을 담는 공간 (navigation) , , 와 함께 사용 본문 ... ... 태그 문서의 주요 내용을 담는 태그 IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성 필수 입력 태그 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그 태그 내에 구역을 대표하는 타이틀 태그가 존재해야 함. 부록 주소 : 서울특별시 OO구 OO로 이메일 : email@xxxxxx.xxx 사업자등록번호 : xxx-xx-xxxxx 대표 : ooo 태그 가장 하단에 들어가는 정보를 표기할 때 사용 기타 태그 임의의 공간을 만들 때 사용

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms