css 끄적끄적 - 여러 속성, 인접 연산자, styled-components + css 개념 정리

css 개념 정리

---

1. box-sizing: border-box;
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

2. color: inherit;
inherit은 부모 객체의 값을 가져오는 것입니다.

3. text-decoration: none;
text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다.

---

1. absolute position의 특징

position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.

부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
따라서, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

display block
display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.

2. styled-components

 CSS 코드를 조건부로 보여주고 싶다면 css 를 사용해야합니다

3. X + Y

ul + p {
   color: red;
}
인접 선택자로 부르는 선택자입니다. 앞의 요소 바로 뒤에 있는 요소만 선택합니다. 위 코드에서 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 됩니다.

=> & + & => 부모선택자 + 부모선택자의 의미가 된다.

 

 

---

공부하면서 헷갈렸던거나 몰랐던거 정리용 글