box-sizing

css를 만지다보면 같은 넓이로 500px를 주었는데, 500px이 아닌 경우들이 있다. 그 이유는 패딩이나, 테두리에 추가되었고 그러면서, 점점 width 500이 줄어 들게 된다. 그래서 필요한 것이 box-sizing: border-box를 사용. 그러면 원래 준 값이 나옴. 대부분 border-box를 주고 시작함. 그래서 아래의 코드를 추가함.

*{ box-sizing: border-box;}

justify-content , align-items

어쩔때는 먹히고, 어쩔때는 안먹히는 애증의 너네들..
.wrapper{
display:flex;
justify-content: center;
align-items:center;
}
align-items가 안먹어.. 도대체 왜 안먹는거니? 그 이유는 사실 wrapper와 wrapper의 children이 같은 높이를 갖고 있기 때문.
그래서 height을 주어야함
.wrapper{
display:flex;
justify-content: center;
align-items:center;
height:500;
}

여기서 생각해보야 할 것.
flex는 row, horizontal, 가로가 디폴트이다.
jusify-content는 children의 가로를 바꾼다. main-axis
align-items는 세로를 바꾼다. cross-axis

만약 flex-direction:column 이면 위의 값이 바뀜. 세로로!

img태그와 div태그로 설정하는 차이점

이미지를 추가할 수 있는 방법은 두가지가 있다. img태그와 div 태그를 css로 해서 사용하는 것.

<img src="" alt="" >
<div> 배경 </div>

위의 차이는 시맨틱 요소라는 것에 있다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
출처: https://poiemaweb.com/html5-semantic-web

div,span 등은 non-semantic요소이고,
img,form,table은 semantic 요소이다.

의미를 가지고 있고, 의미론적으로 이미지라는 의미를 갖고 있다. 즉 의도가 명확하다는 것이다. 그래서 개발자가 의도한 요소의 의미가 명확히 드러나고 있고, 이는 코드의 가독성을 높이고, 유지보수하는데 용이하다. 그래서 크롤링하거나 색인이 가능하지만 backgound img의 경우 크롤링이나 색인이 안된다.

반면에 backgound img는 단순히 배경이미지를 나타내는 것이 아니면<img>태그 사용하는 것이 좋다.