Frontend/CSS

02. CSS3 Selector

Hello CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. II. Universal Selector Hello CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. III. Tag Selector Heading paragraph 1 parag..

01. CSS3 기본 문법

Hello CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. style.cssh1 { color: red; } p { background: yellow; } Embedding (Internal Style Sheet) HTML 문서 내부에 internal style sheet를 포함시키는 방법이다. HTML과 CSS의 역할을 명확히 구분하는 것이 좋고, external style sheet는 internal style sheet와 달리 caching이 가능하다는 장점도 있기..

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..