CSS

사용자가 보는 영역기기에 따라 다르게 보여지게 설정 가능화면 크기에 따라 css 다르게 적용 가능@media로 css 별로 구분하여 작성하는것을 추천and : 둘다 만족, : or 하나만 만족반응형 css를 한눈에 파악할수있어 유지보수가 편함

이미지 상위 태그에 overflow-x: hidden 추가

css 크기에 em의 값만큼 곱함body에 css값은 하위 요소들 전부에 영향을 주므로div가 가지는 font-size는 14 \* 1.2 가 된다em이지만 root가 붙어최상위 요소에만 반영됨기본적으로 최상위요소는 htmlvw : view widthvh : view

출처: https://www.youtube.com/watch?v=nxi1EXmPHRs&t=2scolumn: 가로row: 세로컬럼의 갯수와 가로 크기를 지정할수있음grid-template-columns: 150px 150px 150px컬럼 3개 각 셀의 가로 크

출처 : https://velog.io/@hustle-dev/%EC%9B%B9-%EC%84%B1%EB%8A%A5%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%9

srcSet에 여러 이미지를 등록 시 반드시 ,로 구분해줘야 이미지가 정상적으로 보임

출처: https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-5-%EC%9

위와 같은 처리를 css background-image에서 처리하려면supports 키워드를 사용하여 지원 확인 후 반영되도록 한다정확하게 적용되는지는 확인하지 못함

::before, ::after 같은 가상요소를css에 입력해도 적용이 안될때content: ""; 컨텐츠 속성을 넣었는지 확인해당 속성은 필수로 없으면 적용이 되지않는다

평소에는 static 처럼 영역을 가지다가 스크롤 시fixed 처럼 고정되게 동작하게 해주는 position보통 헤더를 스크롤 시 상단에 고정시킬때 사용

위 코드를 사용하여 가상요소 ::after에 적용 되어있는 CSS 요소를 접근할수있다다만, read-only로 되어있는 속성들은 변경할 수 없다.

최상위 box에는 구체적은 width, height을 안거는게 좋다반응형 처리시 크기가 계속 변해야하는데모바일일때는 특정 px로 변하게끔 설정해두면추후 모바일이지만 다른 크기로 변해야할때 어려움이 생김최상위 박스말고 내부 박스 크기를 지정하는게 좋을듯

반드시 내부에 <img/> 태그가 있어야 이미지가 보임

출처https://blogpack.tistory.com/1000https://velog.io/@fenjo/HTML-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%9C%84%E

출처: https://velog.io/@yijaee/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%9A%94%EC%86%8C-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95%ED%9

이미지 드래그 필요할떄alt 값으로 검색엔진에 걸려야할때alt 값으로 대체 텍스트가 필요할 경우단순 배경 이미지로 사용할때이미지 드래그 불필요다양한 css 값을 사용할때 (배경색 등)

블록태그의 경우 기본적으로 width: 100%, height: auto 옵션이 적용auto일때는 내부 컨텐츠의 크기만큼의 높이를 가짐인라인 태그의 경우 기본적으로 width: auto, height: auto 옵션이 적용내부 컨텐츠의 내용에 따라 크기가 결정됨부모 요

출처: https://abcdqbbq.tistory.com/831 ~ 5까지 for문으로 css 처리to를 사용할 경우 마지막 횟수는 포함되지 않으므로 +1 처리 필요

출처: https://www.codingfactory.net/10825rgb 를 이용하여 2번째 값으로 투명도를 전달해주면 배경만 투명하게됨

출처: https://brunch.co.kr/@clay1987/170브라우저의 기본 크기설정이 적용이 안됨화면 줌인시 크게 문제는 생기지않음rem 사용 시 브라우저의 기본 크기설정이 적용은 되지만화면 줌인 시 px 보다 더 비율이 안맞을수 있음웹화면 크기 와

스크롤 or 말줄임 처리를 하려면 명확한 크기가 필요한데개발 당시 이 명확한 크기를 주지않고 알아서 크기가 계산되길 바래서 찾다가 발견한것flex 사용 시 width와 height를 위와 같이 설정하면width or height or max-width or max-he

flex 아이템들의 기본 크기를 설정0으로 설정 시 아이템의 크기는 무시하고 flex-grow, flex-shrink의 비율에 맞게 설정됨flex-basis의 기본크기 보다 커질 수 있는지 여부 값flex-basis의 기본 크기 값을 제외한 여백부분을 값에 비율에 따라