Ella 프론트엔드일지

출처 : 유튜버 빔캠프 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 속성도 단축속성이기에 한각씩만 둥글게 할수있다. 시계방향으로 간다고 생각하면 된다.