Frontend

01. HTML5 기본 문법

Hello world HTML is the standard markup language for ... II. Element element는 HTML 문서를 구성하는 기본 요소이다. element는 일반적으로 start tag, end tag, content로 구성된다.this is a content Void Element content 없이 start tag 하나로만 구성된 element도 존재한다. 이 때 start tag를 void tag, self-closing tag 등의 이름으로 부르기도 한다. void element가 아닌 일반 태그를 normal tag라고 부르기도 한다. 대표적인 void elementsbrhrimginputlinkmeta III. Attribute attribute는 st..

Box Model

2D 게임 캐릭터라고 생각해보자. padding은 피부가 뼈대보다 안쪽으로 들어갈 수 없는 것과 같은 원리로 음수 값 가질 수 없다. margin은 게임 캐릭터가 겹쳐서 설 수 있는 것과 같은 원리로 음수 값 가질 수 있다. Note width : content의 너비. %를 사용하면 부모의 width(= 부모의 content의 너비)에 대한 percentage로 계산된다. height : content의 높이. %를 사용하면 부모의 explicit height에 대한 percentage로 계산된다. 부모의 height가 명확히 지정되지 않았다면 이상한 값으로 계산된다. 적어도 하나의 조상이 height 값이 px 등 구체적으로 지정되거나 html의 height가 100% 여야 한다. Margin Col..

스타일 결정 우선순위

I. Style sheet priority Microsoft Edge 같은 경우 Stylish 같은 extension 사용해서 user style sheet 세팅 가능 Note 왜 하필 user important > author important > user normal > author normal > browser 순서로 정했을까? user important > author important는 저시력자가 글자 크기를 키워야 하는 등의 이유로 반드시 필요하다. 그런데 왜 author normal > user normal 일까? 이건 내 추측에 불과하지만 user가 author style sheet의 내부 동작을 구분할 필요가 없도록 설계가 된 것 같다. 어떻게 보면 user가 author importan..

Pseudo classess & Pseudo elements

배경 지식 element : content 전체를 의미 selector:pseudo-class 특정한 상황이 되면 selector에 자동으로 추가되는 클래스. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다. Example a:hover {font-weight:bold;} 마우스를 올려 놓으면 selector a에 hover class가 내부적으로 추가된다. 이 때 위의 CSS 코드에 의해 font-weight:bold 가 적용된다. selector::pseudo-element 특정한 상황이 되면 selector 내부의 특정 부분에 자동으로 추가되는 element. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다. Example p::first-letter {font-size:3..