박스모델
-
4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과프론트엔드/HTML & CSS 연습과제 해답 2023. 6. 22. 18:45
* section 의 width: 120vw 로 잡은 이유 120vw 로 잡으면 이미지가 120% 정도 더 커진 상태에서 브라우저 너비를 줄이면 100%까지 이미지가 줄어든다. 이제 브라우저 창을 줄여도 100% 에서는 더이상 사진이 줄어들지 않는다. * body 의 overflow: hidden 으로 잡은 이유 앞서 section 의 width: 120vw 로 잡으면 가로 스크롤바가 생기기 때문이다. 처음 화면 로딩시 양쪽에서 텍스트가 중앙으로 모이는 텍스트 애니메이션 효과가 있습니다. Made fresh to order Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse..
-
4. 박스모델 (Box Model)프론트엔드/HTML & CSS 강의 2023. 6. 15. 10:21
박스모델은 웹페이지의 레이아웃을 짜거나 요소를 배치할때 중요하게 사용되는 개념이다. content 요소에서 실제 내용이 들어가는 영역 padding 요소 안쪽 여백 border 요소의 테두리 margin 요소 바깥 여백 http://www.tcpschool.com/css/css_boxmodel_boxmodel 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 클래스명이 box 인 div 요소를 만들고 박스모델에 대해 알아보자! 컨텐츠 요소에 너비(width) 와 높이(height)만 설정한 경우 너비와 높이만 설정한 경우 요소의 전체 크기는 설정한 너비와 높이만큼이다. .box{ width: 300px; height: ..