Ella 프론트엔드일지

✅3주차 회고록 ✅피드백 답변

✅느낀점 - 확실히 예습을 하고 수업을 들어야한다. 오늘 가상클래스 선택자 / flex 수업을 들었는데 정의도 모르는...나란 사람을 대상으로 수업을 하시는게 아니라 이미 알고있는 사람들 대상으로 수업을 하시는것 같아서...이해하기가 버거웠다. discord 라운지채팅창에서는 모두 대답을 잘하는 사람만 대답하고.. 나같이 이해하기 어려워하는 사람들은 대답을 하지 않으니... 모두가 잘 하는것만 같고, 나혼자 어려워하는 것만 같다. 심리적으로...불안감이 올라온다..해야할것은 많고 절대적인 시간이 너무 부족하다. 9시부터 4시까지 수업듣고 복습+예습 하는 시간이 턱없이 부족하다. ✅그럼 내가 어떻게 해야하는데? 해결책이 뭐야? - 강사님은 실습위주보다는 그냥 노션 글을 읽는 스타일이셔서 실습이 많이 필요한..

출처 : 유튜버 빔캠프 https://www.youtube.com/watch?v=7oOai_rOnuI ✅문제점 1)버튼 안의 weniv 로고 이미지와 로그인 텍스트 2)자물쇠 로고 이미지와 아이디|비밀번호 텍스트 3)사람 이미지와 회원가입 텍스트 이 세가지 경우 모두 이미지가 텍스트보다 살짝 위로 올라가있다! 왜그러냐!!! ✅해결책 이미지는 인라인레벨 요소이기 때문에 text와 마찬가지로 베이스 라인이 존재함! 그래서 이미지가 베이스라인에 맞춰져 있기때문에 text보다 더 위에 가있음 그렇기때문에 이미지에 vertical-align요소를 넣어서 초기화를 해주자! vertical-align:top; 또는 vertical-align:bottom; 으로 하자! ✅ 추가 설명 (출처 : 코딩애플 html&css..

✅참고 동영상링크 https://www.youtube.com/watch?v=c19Mjg-ivxc&t=94s ✅margin collapsing(마진 겹침, 마진 병합현상) ➡️ margin 병합현상 조건 1. 인접해있는 Block 요소끼리만 일어남 2. 상하단만 해당사항(좌우는 X) 1)형제요소의 마진병합 현상 코드펜에서 아래와 같이 코드를 작성했다. div 박스에 margin값을 상하좌우 모두 20px을 주었다. 그러면 베이지색 박스의 margin-bottom:20px 과 핑크색 박스의 margin-top:20px 이 만나서 40px이 되어야하는게 아닐까? 했지만.. 빨간색 빗금친 부분처럼 20px만 보여지고 있다... 이것이 바로 마진겹침현상! - 왜 이런현상이 일어나지...? 의도된 부분이다. CSS..

사각형의 모서리를 둥굴게 만드려면 어떻게 해야할까?/ border-radius를 쓰자! ✅border-radius 1)기본값 : 0 둥글게 없음. 그냥 사각형 모양 2) px,em,vw등 단위를 지정하면 모서리가 둥그래진다. ➡️코드펜 아래 예시를 살펴보자 div 사격형 요소에 border-radius :10px; 만큼 주었다. 결과를 보니 네 각이 모두 10px만큼 둥그래졌다. 원의 반지름 10px 만큼 둥그래지는 개념이다. ➡️그런데 네개의 각 말고 한 각만 둥글게 하고싶다면?? border-radius 속성도 단축속성이기에 한각씩만 둥글게 할수있다. 시계방향으로 간다고 생각하면 된다.

📝 참고문서 : https://ossam5.tistory.com/73 https://jong99.tistory.com/36 https://pks2974.medium.com/iframe-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-1cd866b71c8f 1️⃣iframe이란? inline frame 의 줄임말이며, 페이지에 Frame을 넣을 때 사용 즉, 웹페이지 안에 또다른 웹페이지를 삽입할 수 있는 태그 src 속성으로 불러울 HTML 링크를 설정한다. 아래는 내 티스토리 블로그 예시! iframe 보통은 iframe 태그는 Youtube 영상을 불러올때 많이 사용된다. 어떻게 확인하냐?? Youtube에서 내가 공유하고 싶은 동영상 공유를 클릭하..