CSS3 Include HTML을 이용한 html 파일 분리하기 들어가며 웹페이지 구조를 잡다보면 중복적으로 들어가게 되는 코드들이 존재하게 된다. 예를들어 상단에 헤더나 하단의 푸터같은 경우를 예로 들 수 있다. 기존 스프링에서 했을때는 thymleaf를 이용하여 이 작업을 하였는데 이번에 javascript만으로도 분리를 하는 방법을 알게 되어 정리한다. includeHTML.js 해당 스크립트문을 통해서 include-html이 포함된 html 파일을 로드할 수 있다. function includeHTML(callback) { var z, i, elmnt, file, xhr; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i.. 2021. 7. 21. CSS - position : absolute 를 이용한 div 위치 지정 CSS - position : absolute 를 이용한 div 위치 지정 position은 태그들의 위치를 결정하는 css이다. 기본적으로 div 정렬 시키는 방법은 다양하지만 position을 이용하게 되면 내가 원하는 위치에 어디든 정확히 위치 시킬 수 있다. 글로만 설명하면 이해가 쉽지 않아 아래 그림을 통해 알아본다. 기본적으로 모든 태그들의 디폴트값은 static 상태이며 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. position : absolute position: absolute; 포지션 값을 absolute로 주게 되면 position 값이 static 속성이 아닌 relative, absolute, fixed인 부모 태그를 기준으로 기준점을 삼는다. 만약 relative, abs.. 2021. 7. 12. HTML & CSS 기본 개념 들어가며 HTML 와 CSS 기본 개념에 대해 정리한다. HTML이란? HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위해 사용되는 마크업 언어이다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML 파일을 저장 시에 *. htm 또는 *. html로 지정하면 웹 브라우저는 이를 html 문서로 인식하고 로딩을 하게 되며 텍스트 에디터를 사용해서 확장자만 제대로 지정해주면 브라우저로 확인이 가능하다. HTML 기본구조 시작으로 HTML 문서가 시작되며, 이 표시를 통해 HTML 문서임을 명시한다. 그리고 구성을 보면 안쪽으로 태그 부분과 태그 부분.. 2021. 3. 31. 이전 1 다음
