[TIL] 211104

---

- section 내부에 section을 넣지 않는다. 근데 실무에서는 div를 그냥 많이 쓰나보다. 역시 속도가 중요한걸까... 이래서 드는 생각인데 왜 자체서비스를 개발하는 회사로 가려고 하는지 알 것 같다. 그렇지 않으면 코드를 찍어내는 기계가 돼야 하지 않을까? 물론 개인적인 생각이다.

 

-

/* 오직 one이라는 클래스가 있는 요소 하나만 적용됨 */
div[class="one"] {
            background-color: red;
            color:white;
        }
        
/* one이라는 클래스가 있는 요소 모두가 적용됨 */
div[class~="one"] {
            background-color: red;
            color:white;
        }
        
/* 문자열 중간에 어디든 one이 있는 클래스가 있으면 모두 적용됨 */
div[class*="one"] {
            background-color: red;
            color:white;
        }

 

- 내가 작성한 css 요소 중 필요 없는 속성들은 개발자 도구에서 체크박스를 해제해가면서 없애야 한다.

 

- 둘 다 같은 마진을 사용하고 있는 경우에는 마진 겹침 현상이 일어나 하나의 마진인 것 처럼 보이게 한다.

부모요소와 자식요소가 둘 다 같은 마진을 사용한다면 자식요소가 부모의 마진에 영향을 미치지 않는 것을 말한다.

 

- 기준은 항상 부모가 가진 영역의 왼쪽 상단이다.

 

- 항상 헷갈렸던 것 인데 웹폰트를 import 할 때 대부분 link 로 html에 넣기 보다는 css로 넣는 것을 선호한다.

 

- 부트스트랩 한글 버전은 버전이 2정도나 낮기 때문에 영문으로 검색해야 한다.

 

- 0에 가까울 수록 검은색(색을 채우지 않는다고 생각) 9에 가까울 수록 흰색이다.

 

- absolute가 하위 absolute의 기준점이 될 수 있다. 하나의 가장 상위의 부모 기준점으로 relative를 잡으면 아래의 absolute는 주루룩 자동으로 잡힌다.

 

- position fixed와 sticky의 차이점은 viewport에 고정 돼 스크롤을 내려도 위치가 고정 되는 것이 fixed, 스크롤에 따라 움직이다 정한 offset에 닿으면 그 순간부터 고정이 되는 것이 sticky이다. 적용을 시키려면 sticky시키고 싶은 범위 내부에 sticky 요소를 넣으면 된다.

 

- sticky 예시

<style>
    body {
        height: 500px;
        background: lightblue;
    }

    .other {
        height: 1000px;
        background: yellow;
    }

    .other2 {
        height: 1000px;
        background: black;
    }

    .sticky {
        position: sticky;
        width: 50px;
        height: 50px;
        background: pink;
        top: 10px;
    }
</style>
<div class="other">
    <div class="sticky"></div>
</div>
<div class="other2"></div>

 

- float 속성을 쓰면 요소가 붕 뜨게 된다. 그래서 부모 요소가 이를 캐치하지 못해서 깨지는 것. 이 때, clearfix를 사용한다. 혹은 overflow hidden을 사용한다.