프론트엔드 개발/CSS 15

CSS) position:absolute; 심화 과정

🙌잘못된 정보는 댓글피드백 환영입니다.🙌 출처 : 멋쟁이사자처럼 빔캠프 대표님 특강 中 수업자료 일부 발췌 position:relative; 는 자기자신을 기준으로 배치 position:relative; 는 relative 된 가장 가까운 부모요소로 배치된다는 것은 position 공부를 해본사람이라면 다 알고있는 상식일 것이다. ➡️그런데, 만약에 relative 없이 단순히 position:absolute; 만 하면 어떻게 될까???? - 아래와 같이 pos의 부모요소인 아부지 하얀색 background가 있고, 아부지의 또 부모요소인 회색 할아부지 background가 있고 진한 회색인 전체창이있다. pos 에 orange;컬러만 주면, width 값이 설정되지 않았으니 부모요소인 아버지 width..

CSS) flex 개념 정리 교안 모음집

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com https://www.youtube.com/watch?v=7neASrWEFEM&t=1220s

css) display:flex 와 margin-left:auto;를 사용한 레이아웃

🙌잘못된 정보는 댓글 피드백 환영합니다!🙌 더보기 출처 : https://kamang-it.tistory.com/entry/css%EC%A7%80%EC%98%A5%EC%97%90%EC%84%9C-%ED%83%88%EC%B6%9C%ED%95%98%EC%9E%904-display-flex%EC%99%80-margin-auto%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EA%B8%B0%EC%A1%B4%EC%9D%98-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0header%EB%82%98-nav%EC%97%90%EC%84%9C-%ED%95%9C-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EB%A7%8C-%EC%A2%8C%EC..

css) margin:0 auto; 가운데 정렬이 되지 않을 때

🙌틀린 정보는 댓글 피드백 환영 합니다!🙌 더보기 출처 : https://heinafantasy.com/163 ✅margin: 0 auto; 1) 해당영역에 가로사이즈(width)값이 정해져있는지 보자! auto 는 자동으로 사이즈를 설정해주는 것, 즉 좌우의 여백을 똑같이 배분하게 되는 것 그래서 브라우저 화면 가운데에 위치하게 된다. 그런데 width값을 지정해주지 않으면 가운데 정렬이 되지 않는다. 좌우의 여백을 똑같이 나눠서 가운데 정렬이 되는 원리인데, width값을 정해주지 않으면 여백의 공간이 없으니까! 즉, 사용가능한 공간이 없어서 가운데 정렬이 되지않는것이다. 아래 예시를 보자. container 안에 item 2개를 넣어 displex:flex;값을 줘서 가로로 배치했다. 🚫과연 .co..

css)grid-repeat/minmax/auto-fill & auto-fit

📝참고자료 역시나 내가 사랑하는 유노코딩 선생님 자료 https://www.youtube.com/watch?v=xem0N8c9tWY&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=11 ✅실습을 통해서 보자! 1) repeat(반복횟수,수치 단위) html 코드 1 2 3 4 5 css코드 *{ box-sizing:border-box; } body{ margin:0; } ul{ padding:0; list-style-type:none; border:5px solid teal; } li{ display:flex; justify-content:center; align-items:center; background-color:beige; border:5px solid tomat..

CSS) grid - grid-template-columns/grid-template-rows/ gap

📝참고자료 내가 사랑하는 유노코딩 선생님 강의 참고~! https://www.youtube.com/watch?v=4pXTxo_CMJM&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=9 https://www.youtube.com/watch?v=hMJw1kFLxWU&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=10 ✅grid layout 그리드 : 2차원 레이아웃 방식 그리드를 사용할 때는 그리드 컨테이너를 만든 후 display:grid;를 지정해줘야함. 1) grid-template-columns 그리드 컨테이너 트랙(행 또는 열) 중 column트랙 내 아이템들의 크기를 지정할 수 있는 속성 2) grid-template-rows..