CSS13 CSS z-index, float, clear z-index HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨 z-index 1번째 div 2번째 div 3번째 div float HTML 요소가 주면(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦 float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right) 컨텐츠 크기 만큼만 영역을 설정(블록) float를 적용받은 요소는 다른 요소(배경)보다 위에 위치 float1 Lorem ipsum dolor sit amet consectetur .. 2024. 4. 11. CSS 과제 닷홈 CSS적용시키기 홈페이지를 css 미디어 쿼리를 이용해 모바일 환경을 만들어 보았다 메인페이지 css @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } * { margin: 0; padding: 0; } header { display: flex; width: 100%; background-color: black; color: white; } header > img { filter: opacity(0.5) drop-.. 2024. 4. 11. CSS 과제2 과제 '닷홈' 페이지의 회원가입, 로그인 페이지를 css 폼을 적용하여 완성 http://hyeon9502.dothome.co.kr/ 로그인 css 코드 body { margin: 0; padding: 0; text-align: center; justify-content: center; display: flex; } h2 { margin: 0; padding: 0; display: inline; } .header { display: flex; width: 100%; position: absolute; justify-content: center; text-align: center; top: 20px; } div { border-style: solid; padding: 10px; width: 300px; h.. 2024. 4. 9. CSS 과제1 과제 '뉴스기사' 페이지를 CSS 선택자, CSS텍스트를 사용하여 자유롭게 스타일을 적용 http://hyeon9502.dothome.co.kr/ @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } #newsdiv { border: 2px solid; width: 500px; height: 100px; overflow: hidden; } #newsdiv:hover { width: 500px; heig.. 2024. 4. 9. 이전 1 2 3 4 다음
