Html/이론9 반응형 웹 오늘은 무슨 점심을 먹을까까머리 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut consequat semper viverra nam libero. Libero volutpat sed cras ornare arcu dui. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lacus luctus accumsan tortor 2023. 5. 26. Flex 1)Flex flex-direction: row /column (주 축설정) row >>> column >>> nowrap: 기본값 wrap: 줄바꿈 nowrap>> wrap>> justify-content: 메인축 방향으로 정렬 (주축 기준) align-item (justify 이후에 설명있음): justify-content와 수직 방향의 정렬이라고 생각(교차축 기준 ) flex-start (기본값) 아이템들을 시작점으로 정렬. flex-direction이 row(가로 배치)일 때는 왼쪽이 기준, column(세로 배치)일 때는 위를 기준. flex-end 아이템들을 끝점으로 정렬. flex-direction이 row(가로 배치)일 때는 오른쪽이 기준, column(세로 배치)일 때는 아래가 기준. c.. 2023. 5. 26. grid 1)grid grid-template-columns 각 열 길이지정 grid-template-columns: repeat(4, 100px) -> 4번 100px반복 grid-column-start: 시작; grid-column-end: 끝; grid-column : 시작/끝 - 하나만 적으면 시작점 grid-auto-columns grid-auto-rows: minmax(200px , auto); 세로 길이 200px넘어가면 자동으로 늘어남 if안쓴다면? 200px넘어가는거 안보인다 One Two Three Four FourFourFourFourFourFourFo Five Six grid-area(한방에 합치기 어렵..) ex)2 /1 /span 2/ span 3 -->2번째 행에서 2칸 (grid-ro.. 2023. 5. 24. background/position/ 1)background image: 경로설정 repeat: 반복할지 안할지 repeat/no-repeat attachment : 어디에 붙어있는지 기본값 scroll : 내리면 이미지는 안내려온다 fixed : 이미지도 같이 내려온다 position : 위치 background-position: 0 50%;을 준 모습 (x축y축) 2)position tip> 포지션 top left지정안해주면 부모를 relative로 안했을 경우 원래 흐름에 있음 transform:translate() fixed, sticky https://shadesign.tistory.com/40 참고 translate (x, y) 함수는 요소를 왼쪽에서부터 x거리, 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치.. 2023. 5. 23. 이전 1 2 3 다음
