새발블로그

실제 너비 계산 방식width + padding(left+right) + border(left+right) = 실제 너비기본값: box-sizing: content-box;추천: box-sizing: border-box; → 설정한 width가 전체 너비가 되도록css * { box-sizing: border-box;}

여백 개념속성설명 속성설명margin요소 외부 여백 (다른 요소와 거리 조정)padding요소 내부 여백 (콘텐츠와 테두리 사이 공간)margin: auto; → 좌우 중앙 정렬상하 margin은 겹칠 수 있음 (margin collapse) 요소 유형구분대표 태그 특징블록 요소div, p, h1 등가로 전체 차지, 줄바꿈 발생인라인 요소span, a, img 등내용만큼만 공간 차지  CSS 선택자 우선순위inline style > id > class > 태그 > * (전체)다양한 선택자:#id, .class, tag자식 선택자: div > p후손 선택자: div p그룹 선택자: h1, h2, h3속성 선택자: [type="text"] 위치 지정 (Position)속성설명static기본 위치 (기준 없음..

HTML – 구조웹 페이지의 뼈대를 만드는 역할.각 요소들은 , , 등으로 구조화할 수 있다. 추가적으로 표(table) 구조에서 HTML 명세상 내부에는 반드시 가 있어야 하므로,브라우저가 자동으로 를 생성해준다.CSS – 디자인스타일을 적용해 시각적으로 보기 좋게 만든다.외부 스타일시트: style.css내부 스타일: 태그인라인 스타일: 처럼 직접 요소에 적용JavaScript – 기능을 더한다웹 페이지에 동적인 기능을 추가한다.버튼 클릭, 데이터 처리, 사용자 이벤트 등은 모두 JS가 담당하죠.

HTML의 발전 과정웹의 시작부터 현재까지 HTML은 꾸준히 발전해왔다.HTML4기본적인 웹 문서 구조를 작성할 수 있는 HTML의 표준 버전-> 구조화에 한계XHTMLXML 문법을 따르는 HTML.-> HTML을 더 엄격하게 작성해야 했고, 조금만 문법을 틀려도 작동하지 않는 경우가 많았다.HTML5현재 가장 널리 사용되는 HTML 버전으로, 단순한 구조화에서 벗어나 다양한 API와 기능이 추가되었다. 플랫폼 연동 기능:Geolocation API (위치 정보)WebRTC (화상 통화)Device Orientation API (디바이스 방향 센서 등)로컬 저장소 기능:Web Storage: localStorage, sessionStorageIndexedDB: 구조화된 대용량 데이터 저장 가능캐시 활용:..