Search Engine Optimization 검색 엔진 최적화는 인터넷 브라우저에 검색시 검색의 정확도와 연관성을 높이는 기술이다. 보통 HTML 페이지는 tag 를 갖는데 여기에 다음과 같은 메타데이터를 포함한다. metadata tag title charset name content title 북마크 설정 또는 검색 결과에 쓰인다. charset ex) utf-8, 브라우저가 해당 웹 페이지를 해석하는 방식을 결정한다. name 과 content name 이 key, content 가 value 라고 보면된다. 보통 아래와같이 `author` , `description` 과 같은 값이 사용된다. description 은 검색시 해당 페이지 링크 밑에 설명으로 띄워지는 부분이다. `MDN Docs`..

text-align : center는 자손뿐 아니라 후손까지 모두 center라서 블록 모양뿐 아니라 속에 담긴 글짜까지 모두 가운데 정렬된다. 따라서 보통의 경우 margin: 0 auto 를 사용한다. 상->우->하->좌 시계방향 순서대로 숫자 4개가 나열되나 0은 상하 0, 좌우 auto 로 마진을 두어 가운데 정렬이 되게하는 방법이다. 매우 자주사용. 0 auto=> 상단, 하단 여백 X auto => 좌측과 우측의 여백을 자동으로(auto) 부여 text-align: center margin: 0 auto

0. Web Rendering 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진(ex. V8 in Chrome)은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM Tree이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 1. 정의 넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미: document 객체와 관련된 객체..

1. What's bootstrap? 트위치 홈페이지의 프론트엔드 디자이너들이 만들어 놓은 웹 개발 디자인 프레임워크 2. 구성 HTML CSS 대표적인 예로 자주쓰이는 것이 navbar (네비게이션 바) 3. 적용하기 위해 필요한 파일들 bootstrap.css jquery popper.js ※ bootstrap 4.0 버전부터 popper.js 포함이 필수가 되었다. 파일을 직접 로컬에 다운받아서 포함시켜도 되고 외부링크를 걸어도 좋다. ※ min이 붙으면 Minified version 으로 파일 용량을 최소하 하기위해 압축한 파일이란 뜻. 붙지 않으면 당연 Uncompressed file [외부 링크 사용 예시] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Hello, world! H..

[문제 상황] 부모태그가 공간을 차지하지 못하고 자식이 부모 공간을 무시. text-align.html Button CSS 노가다 리얼루다가 홍콩가버려 얘는 정렬 되는데 ? H2 터줏대감 df ㅇㄹ ㄹㅇ ㅁㄴ H2 아래대감 text-align.css .font_big{ font-size : 2em; } .font_italic{ font-style: italic; } .font_bold{ font-weight: bold; } .font_center{ text-align: center; font-family: 'Malgun Gothic'; } /* css에 먼저 정의된 순서중 가장 먼저 선언된 것이 나옴. */ .box{ width: 100px; height: 100px; position: absolute;..