이번 문서의 목적 CSS Inheritance, Cascading의 정의를 설명할 수 있다. CSS Inheritance, Cascading의 적용 과정을 설명할 수 있다. CSS의 규칙 충돌을 설명할 수 있다. CSS 규칙 충돌? CSS의 역할은 한 Markup Element, HTML에서는 HTML Element에 대해 꾸며주는 역할을 합니다. CSS 규칙 충돌은 한 HTML Element에 대해 여러가지 규칙이 적용될 수 있는 상황을 이야기 합니다. 우리는 논의 중 충돌이 발생하면 합의된 기준을 두고 점수를 매겨 우선순위를 산출합니다. 기준을 합의할 때, 각 기준은 명확하고 측정이 가능해야 합니다....
이번 문서의 목적 CSS의 정의를 설명할 수 있다. CSS? CSS의 정의 CSS는 Cascading Style Sheet의 약자입니다. CSS의 기본 문법 구조 CSS는 Rule Set(혹은 Rule)이라고 부르는 기본 단위가 있습니다. 가장 단순한 구조는 아래와 같습니다. 1 2 3 4 /* RULE SET */ selector { property: value; } selector는 우리가 작성했던 HTML Element의 요소들을 가리킵니다. 말 그대로 selector 입니다. selector의 설정은 다음을 참조해 주세요. HTML에 style을 입히는 방법 1. <style>태그를 이용한다. HTML의 HEAD 태그에서 style 태그를 열고 그 안에 CSS문법으로 rule을 작성하면 적용할 수 있습니다....
발단 바야흐로 때는 얼마전입니다. 제가 속한 회사의 내부 조직을 위한 JS번들(간단한 JS 파일)로 인해 저희 플랫폼의 초기 로딩속도가 매우 느리다는 소식을 접했습니다. 분명 거의 6개월 동안 정상적으로 서빙되던 사이트가 왜 갑자기 느려진 것일까. 두려웠습니다. 문제의 확이은 Google Analytics(이하 GA)의 사이트 분석에서 부터 시작되었습니다. 네, 마케팅 팀에서 사이트 로딩 속도가 느려 유저 이탈률이 높다라는 피드백을 주신 거였죠. PO님께서는 해당 피드백을 들으신 후에 바로 현황을 분석해 주셨습니다. 비정상적으로 큰 사이즈의 Javascript Bundle이 Fast 3G라는 특수한 환경과 만나 데스크탑 기준 환상의 8초, mobile 기준 환상의 20초가 로딩 및 실행에 소요되는 것임을 밝혀 주셨습니다....
이번 문서의 목적 HTML body태그를 설명할 수 있다. Webpage의 기본 구조를 설명할 수 있다. Semantic HTML은 Markup language로서 semantic(의미론적인) 특징을 가집니다. 하지만 우리는 가끔 이것을 명확히 인지하지 못하고 div태그 지옥과 같은 실수를 범하곤 합니다. 따라서 semantic한 HTML문서의 작성을 위해 HTML의 body에 들어가는 기본 구조를 알아보겠습니다. HTML Body HTML Living Standard에 따르면 HTML body 태그는 Sectioning Root로, HTML문서의 내용을 담고 있습니다. body태그 안에 들어가는 내용들을 Sectioning Content라고 부르며, 일반적인 웹페이지는 아래와 같이 section 및 구성요소들을 가지고 있습니다....
이번 문서의 목적 HTML의 html태그에 들어가는 내용을 설명할 수 있다. HTML의 head 태그에 들어가는 내용을 설명할 수 있다. <html> 바로 직전 글에서 이 html태그는 HTML문서의 시작과 끝을 나타내는 태그이자 HTML 내용을 담고있는 문서에 단 하나만 존재하는 태그라고 말씀드렸습니다. 하지만 분명 우리는 문서의 DOCTYPE을 통해 현재 문서가 HTML 문서임을 밝혔습니다. 왜 필요할까요? DOCTYPE은 엄밀히 말해 이 문서는 HTML이라고 브라우저에 알려준 것입니다. 따라서 아래 HTML이 어떻게 생겼는지, 시작점은 어디인지, 논리적 구조는 어떻게 되는지는 문서의 내용에 달렸습니다....