728x90 프로그래밍-웹/반응형웹4 [ flex ] justify-content justifiy-content 자식요소 정렬에 대한 속성이다 html 자식요소 justifiy-content : center; 자식요소 가운데 정렬 .parent{ display: flex; border: 5px solid #000; justify-content: center; } .child{ background-color: rgb(57, 246, 130); width: 200px; height: 200px; color: #fff; text-align: center; line-height: 200px; } justify-content:flex-start; 자식요소 왼쪽 정렬 .parent{ display: flex; border: 5px solid #000; justify-content: flex-st.. 2022. 12. 30. [ flex ] 부모 요소 / 자식 요소에 사용하는 flex 부모요소 display : flex 사용 (flex | inline-flex) flex-direction : 자식요소 수평 정렬 ( row | column ) flex-wrap : 자식요소 수직 정렬 ( nowrap | wrap-reverse ) justify-content : 자식요소 배치 방향 ( flex-start | flex-end | center | space-between | space-arount ) align-items : 너비를 줄이기, 줄바꿈 ( flex-start | flex-end | center | baseline | stretch ) align-content : 자식요소 여러 줄 일때 ( flex-start | flext-end | center | space-between | s.. 2022. 12. 30. [ flex ] 요소 정중앙에 배치하기 결과 화면 css body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .box{ background-color: cadetblue; color: #fff; width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; } html box 2022. 12. 30. [ 반응형 ] 01. 개발환경 준비하기 01. 웹 브라우저 준비하기 너무 당연한 것이라서 생략하려다 일단 그래도 적었다 크롬이나 사파리를 사용하면 된다(뭐든 상관없는데 크롬이 모든 운영체제 + 최신기술 지원 측면에서 좋다) 맥을 사용한다면 개발자모드 사용설정을 해두자!(option + command + i 클릭 시 반응이 없으면 아래글을 참고하자) https://kimdevel.tistory.com/2 맥북 사파리 개발자도구 단축키 / 개발자도구 안 열릴 때 맥북 개발자도구 단축키 option + command + i 근데 왜 안 열려..?? 크롬유저는 어차피 잘 될거니까 안 들어올테고.. 이 글을 보는 님들은 아마 사파리 유저..??라 추측됨. 1. 사파리 열기 2. 왼쪽 상단 Safa kimdevel.tistory.com 02. 코드 편집.. 2022. 12. 28. 이전 1 다음 728x90 반응형
