css 알면 좋은점

📌 노트에 정리해놨던 것들인데, 포스팅하여 저장하려고 작성합니다

매우 기본적인 것부터 조금이나마 유용한 팁들이 있습니다.

혹시나 틀린 내용이 있을 수도 있지만, 계속 공부해나가면서 잘못된 내용은 스스로 고쳐나가도록 하겠습니다.

---

📌 시작

1. 자식 float 설정시 자식들 너비의 합=부모 너비의 합.

2. 웬만하면 레이아웃을 짤 때 div를 남용하는것보다는 시맨틱태그를 사용하자.

3. float 설정시 반드시 해제하는 습관을 기르자. 해제 법은 3가지
   ⚫float 설정하려는 자식태그 부모의 태그에(없다면 인위적으로 div태그를 이용해 만들어서라도) 오버플로우를 히든으로 하자.
   ⚫float가 끝나는 자식태그에 인위적 div태그를 만들고 style 속성을 clear:both.
   ⚫float 지정한 태그의 style 속성을 :after{content:''; clear:both; display:block;}.

4. inline 속성의 태그는 좌우 마진만 가진다. 상하마진X.

5. 텍스트가 한줄 일 때 부모요소의 height 만큼의 line-height를 주면 수직 정렬이 된다.

6. 레이아웃을 짤 때 맨위 블럭 요소. 예를들어 h태그면 마진대신 윗패딩값을 주는게 낫다.

7. 자식 요소에 float를 줄 시 해제하지 않으면 부모의 높이값이 상실된다.

8. float된 요소(이미지)에 text를 쓰면 조금 떨어지는데 {word-break:break-all;}
   하면 바짝 붙게 된다.

9. width, height 단위 크기(%)는 부모가 만들어준 공간에서의 비율이다.

10. div태그에 img를 넣으면 알 수 없는 하단 공간이 생기는데
    img{vertical-align:top;}으로 설정하면 된다.

11. text-align:justify, word-break:break-all은 세트로 붙어다니자.

12. position 속성을 absolute를 주려면 부모 태그의 position 속성을 반드시 반드시 relative로 하자.

13. position 속성을 가져야만 left:x, right:y---- 가능하다.

14. position을 쓰는 이유는 pc, 태블릿, 스마트폰 등 width, height 크기가 변해도 컨텐츠 요소의 위치가 변함없게 하기 위해서다.

15. position:relative 속성 안에 자식 absolute 요소가 정가운데 위치 해 있게 하는법. 밑에는 예시이므로 그냥 이런 느낌이다로 이해하자.

    width:500px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%
    margin-left: ((너비/2)=250에 -붙여서) -250px;
    margin-top: ((높이/2)=100에 -붙여서) -100px;
    
    or
    
    left:calc(50% - 250px;)
    top:calc(50% - 100px;)

16. 이미지 가운데 정렬은 부모태그에 text-align:center;

17. 블록 성질 좌우 정렬법인 margin: 0 auto; 를 할 때는 width값이 보통 지정되어야 있는게 좋다.

18. max-width 값으로 설정하면 화면이 작아질 때 딸려온다.

19. min-height:100vh 로 하면 화면 세로 전체를 다 쓴다.

20. background-image의 size:cover로 하면 이미지 전체가 나온다.

21.
화면 width값이 늘어날 때 1은 가만히 있고 2가 딸려오게 하는 레이아웃
header, footer 코드는 생략. 준비물 : 1을 감싸는 div1, 2를 감싸는 div2, div2를 다시 감싸는 용도의 div2-2.

div1,2 {overflow:hidden;}
div1 {width:200px(원하는 너비 값으로 고정); float:left;}
div2 {width:100%; float:left; margin-right:-200px;}
div2-2 {padding-right:200px;}

---

📌 +추가

1.flex된 아이템을 가운데로 놓는법

jutify-content : center ;
align-item:center ;

2. 다단컬럼 레이아웃을 짤 때 flex 아이템에 grow 값보다 width값을 주는게 안전하다. (아이템들의 width 값 합은 100%가 되게!)

3. 말줄임표 사용법 공식

   overflow : hidden ;
   text-overflow : ellipse ;
   white-space : nowrap ;

4. 밑에 그림처럼 flex된 아이템중 c만 왼쪽 끝으로 보내고 싶을 때
   c의 margin-left : auto ;
   같은의미로 위로 아래로 중간으로 옮길 수 있다. left 대신 top, bottom
   
   

5. 밑에 그림처럼 1, 2가 나란히 배치 되게 하고 싶으면
   

   container {display : flex ; align-items : center ;}

6. 카드리스트 형태의 flex 레이아웃을 짤 때 직접 카드리스트에 이미지를 넣고 싶으면 인라인으로 백그라운드 이미지를 쓴다.
   그냥 이미지로 넣으면 db에 있는 이미지를 불러오기 때문에.

7. float로 레이아웃을 잡으면 컨텐츠는 자기 내용만큼만의 높이를 갖기 때문에 같은 부모 자식들의 높이값을 맞추는 작업이 필요하지만, flex로 레이아웃을 잡으면 같은 부모 자식들 중에 가장 긴 높이 값에 맞춰서 자동으로 늘어나기 때문에 용이하다.

8. position : absoulute나 fixed 속성을 주면 포지션을 준 컨텐츠만큼의 너비만을 갖는다.

9. flex로 홀리그레일 레이아웃을 짤 때 footer 부분에는 높이지정하지말고 윗 패딩을 준다.

10. ul 태그에는 기본적으로 패딩이 있다.

11. p나 h 태그 앞에 순번이 나오게 하는법.

    h or p ::before{content:counter(h or p counter)'.' ; }
    h or p{counter-increment:(h or p counter) ; }

12. height를 주는 습관을 버리는게 좋다. height는 절대로 height 값이 바뀔 없는 아이템에만 주는것이 좋다.

13. 자식 absolute 요소가 부모의 가운데 정렬되게 하는법.

    top:50% ; left:50% ; transform:translate(-50%,-50%)

---