본문 바로가기

전체 글

 (188)
CSS - float float 속성 float 속성은 자식 엘레멘트에 주어지는데 한 부모에 들어있는 자식엘레멘트들의 일반적인 흐름속에 들어가 있지 않고 다른 흐름을 주는 속성이다. 기사의 사진을 넣을때 자주보는 속성이다. 단점 부모가 자식엘레먼트의 높이를 감지할 수 없다. 해결책 부모의 속성에 같은 값의 float를 적용시킨다. (부모가 겹겹이 쌓여 있을경우 계속 위로 올라가며 같은값의 float 부여) 부모에 overflow속성 적용 (overflow 속성은 스크롤바를 생성시킨다) 부모의 display속성을 inline-block으로 적용시킨다. 가상요소로 clear 적용 .parent::after { content: ''; display: block; clear: both; } 이렇게 부모속성에서 자식의 높이를 감지할 ..
Semantic 마크업 'semantic' 이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다. 따라서 시멘틱 마크업이란 의미가 잘 전달되도록 HTML문서를 작성하는 것을 말한다. 작성방법 예시들 시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 ..
HTML - [<script> vs <script async> vs <script defer>] 웹 브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 무겁다. 용량이 커서 다운로드 하는데 오랜시간이 걸리며 실행하는 것 또한 마찬가지이다. 브라우저 렌더링 과정에서 HTML 문서를 파싱하는 과정에서 스크립트를 만나면 HTML 파싱을 중지하고 스크립트를 실행한다. 이러한 과정에서 두가지의 중요한 이슈가 생겨난다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 파싱되지 않은 HTML문서 이기 때문이다. 페이지의 위쪽에 용량이 큰 스크립트가 있는 경우 사용자 입장에서는 스크립트를 로드 하느라 시간이 걸리는 동안 스크립트 아래에 있는 페이지를 볼 수 없게 된다. 이러한 이슈를 해결할 방법으로서 스크립트 속성이 있다. 아래와 같은 속성은 스크립트의 실행 순서를 다르게 하여 위의 이슈들을..
localStorage | sessionStorage | Cookies Web Storage Web Storage는 두가지 방법으로 사용이 가능하다. localStorage : 각각의 출처에 대해 독립적인 저장공간을 제공하고 브라우저를 열었다 닫아도(페이지 세션이 유지되는 동안) 유지된다. 유효기간 없이 데이터를 저장한다. JavaScript를 이용하거나 브라우저 캐시또는 로컬 저장 데이터를 지워야만 사라진다. 저장 공간이 가장크다. sessionStorage : 위와 같지만 페이지 세션이 유지되지 않으면 사라진다. 세션에 한정해서 데이터를 저장한다. 데이터를 절대 서버로 전송하지 않는다. 저장공간이 쿠키 보다 크다. (최대 5MB) 위 방식들은 window.sessionStorage 와 window.localStorage 로 접근하여 사용이 가능하다. 각각의 방식들은 St..
HTML - ['data-' 속성] data-* 속성은 해당 DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성이다. 해당 웹 페이지가 독자적으로 사용하는 값이다. 해당 웹 페이지가 아닌 다른 소프트웨어에서 이러한 값을 사용한다면 목적에 부합하지 않는다. 보여야하고 접근가능해야하는 데이터는 이러한 데이터 타입으로 저장해서는 안된다. 접근 보조 기술이 없기 때문에 검색 크롤러도 해당 데이터를 크롤링 할 수 없다. 하지만 이때문에 커스텀요소와 관련된 메타데이터들에 대해서는 훌륭한 해결책이다. HTML 문법 이렇게 데이터를 담아놓을수 있다. count='3', name='doodream', weather='rain' 이라는 데이터가 담겨져 있다. JavaScript 에서 접근하기 let variable = document.getEleme..
HTML - [표준 모드와 호환 모드] W3C(World Wide Web Consortium)에서 웹표준을 지정하지 않았을 때에는 넷스케이프와 인터넷 익스플로러 용으로 웹페이지가 두가지로 나눠 작성이 되었다. 웹표준 제정당시 기존 브라우저들은 이표준형식 대로 웹 페이지들을 올바르게 묘사할 수 없었다. 그래서 두가지 형태를 제공하게 되었다. 표준 모드(standard mode), 호환 모드(quirks mode)로. 이러한 관계로 어떤모드로 렌더링 할 것인지 명시할 필요가 있어 DOCTYPE이 필요로 하게 되었고 DTD로 다양한 문서형식을 지정하여 렌더링을 지원하게 하였다. 현재는 HTML 5가 웹 표준이므로 특별한 경우가 아닌이상 모든 HTML에서 을 명시한다. 참고 developer.mozilla.org/ko/docs/Web/HTML/Qui..
HTML - [DOCTYPE] DOCTYPE(Document Type) HTML이 어떤 버전으로 작성되었는지 명시해주어 웹브라우저가 내용을 올바르게 표시할 수 있도록 해준다. 으로 선언하는데 이걸해주지 않으면 호환모드(quirks mode)로 동작한다. 호환모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다. DTD(Document Type Definition) 문서형식으로 DOCTYPE을 명시할 때 DTD를 지정해놓으면 HTML문서가 어떤 문서형식을 따르는지 알 수 있다. 문서형식으로서는 XHTML 1.1 XHTML 1.0 Strict DTD Transitional DTD Frameset DTD HTML 4.01 Strict DTD Transitional DTD Framese..
CSS 애니메이션 & JS 애니메이션 애니메이션의 과정은 결국 브라우징 렌더링 과정에서의 Layout 단계와 연속적인 Paint단계에서 성능저하가 발생한다. 애니메이션의 성능을 높이는 방법 1. Layer 구성하기 Layout 단계에서 div의 style 속성이 무엇이냐에 따라 별도의 layer가 지정되거나 layout계산이 되기도 한다. 이렇게 나뉜 layer들은 layout의 계산이나 Paint없이 병합을 통해서 새로운 화면을 구상할 수 있다. 출처. http://blog.dotify.fr/interactive-video-part-2-developing-the-player-with-the-new-as3-api/ 브라우저는 다음과 같은 상황에서 DOM을 별도의 Layer로 구성한다. 3D(translate3d, preserve-3d)나 p..

티스토리툴바