CSS5 [CSS] float를 해제하는 방법들 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ float를 해제하는 방법들 float이라는 단어는 뜨다, 부유물 등의 사전적 의미를 가지고 있다. 이름에 걸맞게 css의 float 속성은 주변의 요소들을 플로팅 요소 주변에 흐르게 만든다. 즉, 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. 보통 웹 페이지의 레이아웃을 작성할 때 자주 사용된다. float 속성을 자식 엘리먼트에 사용하게 되면 부모 엘리먼트가 자식의 높이를 감지할 수 없기 때문에 이를 반영하기 위한 방법이 필요하다. 부모 자식 .child { float: left; } ✔️ 부모 엘리먼트에 float 적용 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 flo.. 2022. 4. 1. [CSS] 박스 모델 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ Box Model 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성 등을 결정한다. 하나의 박스는 네 영역으로 이루어진다. 각 영역을 margin, border, padding, content 영역이라 한다. ✔️ content area content 영역은 글이나 이미지, 비디오 등 요소의 실제 내용을 가지고 있다. content 영역의 크기는 해당 content의 너비와 높이로 이루어진다. ✔️ padding area padding 영역은 content 영역을 안쪽 여백까지 포함하는 크기로 확장시킨다. pa.. 2022. 3. 9. [1주차] 미디어쿼리 1월 13일 자 학습 내용 정리입니다. ✅ 미디어쿼리 기존의 웹사이트들은 pc에 맞추어 만들어지는 것이 기본적이다. 하지만 최근 휴대폰, 태블릿 등 pc보다 작은 모바일 기기들이 많이 사용되고 있는 시점에서 각 모바일 기기들에 맞추어 화면을 보여주는 것이 필요해졌다. 따라서 pc 뿐만 아니라 모바일, 태블릿 등에서도 대응되는 반응형, 적응형 웹 사이트들을 만들기 위해 미디어 쿼리의 개념이 필요해졌다. 미디어쿼리는 여러 기기에 맞추어 웹 사이트를 만들기 위해 사용하는 css 구문으로 해당 기기의 화면 크기에 맞추어 요소들의 크기, 위치 등을 조절할 때 쓰인다. 미디어 쿼리의 구문은 아래와 같다. @media (min-width) and (max-width) { ... } min-width와 max-widt.. 2022. 1. 13. [1주차] transform, transition, animation 1월 13일 자 학습 내용 정리입니다. ✅ tramsform 특정 영역에서 object를 회전시키거나 위치 이동, 크기 변경이 필요할 때 사용한다. rotate transform: rotate(각도) object에 대해 평면적인 회전을 할 때 사용한다. 음수와 양수 모두 가능하며 양수이면 시계방향, 음수이면 반시계방향으로 회전한다. scale transform: scale(width 비율, height 비율) object의 크기를 조절할 때 사용한다. 2를 입력하면 object 기본 크기의 2배, 0.5를 입력하면 object 기본 크기의 0.5배가 된다. skew transform: skew(x축, y축) object에 대해 입체적인 회전을 할 때 사용한다. translate transform: tra.. 2022. 1. 13. 페이지 스크롤 인터랙티브 개발 실무 끝장내기 강의를 듣고 정리한 내용입니다. 정리도 만들 내용 - 상품명 - 상품 설명 - 상품 사진 -> 페이지 이동에 따라 애니메이션 효과 - 오른쪽 페이지 버튼 -> 누르면 해당 페이지 이동 / 검은색 = 현재 페이지 HTML NIKE 스니커즈 블레이저 미드 '77 빈티지 나이키 블레이저 미드 '77 빈티지는 빈티지한 중창 마감 처리로 나이키 올드 스쿨 농구화의 느낌을 살렸으며, 마치 수년간 보관해온 듯한 룩을 연출합니다. 에어맥스 95 나이키 에어맥스 95에는 놀랄만큼 편안한 착화감과 시선을 사로잡는 스타일, 그리고 재생 소재가 어우러져 있습니다. 펠트, 메쉬 그리고 인조가죽의 풍부한 텍스처를 선보이며 클래식 러닝 DNA에 새로운 디자인을 선사합니다. 적당히 두툼한 디자인과 부드.. 2021. 5. 15. 이전 1 다음
