Ella 프론트엔드일지

🙌잘못된 정보는 댓글 피드백 환영합니다!🙌 더보기 출처 : 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..

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

✅금,토,일 주말에 꼭 해야할 것들 - margin:auto 의 개념 예시로 연습해보기 - position, flex 개구리 종찬님 과제로 연습해보기 - grid, 선택자, transform, transition 개념정리 - 종찬님 과제 버킷리스트,지그재그 다시 종찬님 마인드로 다시 만들어보기 1만시간 프로젝트 다시해보기 (reset.css하지 않고 초기화하기 /마크업 우다다, CSS우다다 하지 않고 박스에 color칠해서 레이아웃 잡는 연습부터 해보기) - 밴딩머신 레이아웃 잡기 - 재현님 로그인 버튼 복습 + 로그인 페이지 완성 - 재현님 selection box 복습 ✅ 4주차 회고록

이번주 강의 들으면서 느꼈던 것들. 건의사항들 까먹지 않기 위해서 적어봄. 내가 언제 놓쳤는지. 언제 못따라갔는지 적어봄!! 1. 진도 속도는 적당하다고 생각합니다. 다만, 실습속도가 빠르다고 생각합니다. ex) 셀렉트 박스 만들기 실습과 같이 실습할때 피그마에서 이미 이미지를 다운못받은 사람들도 있고, 이미지는 준비가 안되어있는데 강사님께서는 먼저 다운받은게 있으니 그걸로 먼저 실습 나가버리셔서 ㅠㅠ 그 이후로는 실습 쭉 놓치게 됩니다 ㅜㅜ 물론 디스코드방에 이미지 공유해주시지만, 공유하고 다운받고, 다운받은 이미지를 비쥬얼스튜디오 폴더까지 옮기는데는 조금 시간이 걸립니다. 이미지 다운받는 시간이나, 리소스 다운받는 시간도 약간 정도는 고려해주셨으면 좋겠습니다! 2. 실습하실 때 중간중간 코드 공유 부..

📝참고자료 역시나 내가 사랑하는 유노코딩 선생님 자료 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..

📝참고자료 내가 사랑하는 유노코딩 선생님 강의 참고~! 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..