css (4) 썸네일형 리스트형 css 미디어 쿼리 디바이스별 width Meta viewport 추가 4개의 반응형 낮은 해상도의 pc , 태블릿 가로 : ~1024px태블릿 가로 : 768px ~ 1023px모바일 가로, 태블릿 : 480px ~767px모바일 : ~ 460px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ...} /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ...} /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (.. 반응형(모바일)웹에서 움직이는 가로스크롤 현상 없애기 index.html 라인에 태그를 추가. safari 가로스크롤 막기 body { over-flow-x : hidden; } html { over-flow-x : hidden; } css 코드 정리 position-relative , absolute, fixed 코드 속성 의미 position relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 css 코드 정리 line-height , flex, margin, z-index ,justify 코드 속성 의미 align-items 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정 background- repeat 배경 이미지의 x축과 y축으로 반복설정 repeat-x 배경 이미지의 x축으로 반복 설정 repeat-y 배경 이미지의 y축으로 반복 설정합니다 position 속성은 백그라운드 이미지의 위치 영역을 설정 size 백그라운드 이미지 사이즈 image 백그라운드 이미지 및 배경 속성을 설정 color 백그라운드 색을 설정 box- shadow 박스 그림자 넣기 inherit 위의 속성값에 상속받는 설정 flex- wrap 요소 크기에 맞게 설정. justify- content 콘텐츠의 좌우 관계 정렬 상태를 정의. center 좌우 정중앙에 설정. inherit 위의 속성에 상속받음 li.. 이전 1 다음