- [CSS] 10. 시험2024년 07월 04일
- Song hyun
- 작성자
- 2024.07.04.오전11:50
728x90반응형[CSS] 10. 시험
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> body{ magin:0; padding:0; background-color: #BC4A4A; display: flex; align-items: center; height: 1000px; } .inner1{ width: 200px; height: 200px; border: 1px solid black; background-color: #FBFAED; } </style> </head> <body> <div class="inner1"> <h2 class="title">item1</h2> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> body{ magin:0; padding:0; background-color: #BC4A4A; display: flex; align-items: center; justify-content: center; height: 1000px; } .inner1{ width: 200px; height: 200px; border: 1px solid black; background-color: #FBFAED; } </style> </head> <body> <div class="inner1"> <h2 class="title">item1</h2> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> body{ magin:0; padding:0; background-color: #BC4A4A; display: flex; align-items: flex-end; height: 1000px; } .inner1{ width: 200px; height: 200px; border: 1px solid black; background-color: #FBFAED; } </style> </head> <body> <div class="inner1"> <h2 class="title">item1</h2> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> .whole{ magin:0; padding:0; display: flex-reverse; width: 1400px; height: 600px; } .box{ float: left; margin:0; padding:0; width: 300px; height: 600px; border: 3px solid black; background-color: #BC4A4A; display: flex; justify-content: center; align-items:center; } </style> </head> <body> <div class="whole"> <div class="inner1"> <div class="box"> <h2>item1</h2> </div> <div class="box"> <h2>item2</h2> </div> <div class="box"> <h2>item3</h2> </div> </div> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> .whole{ magin:0; padding:0; display: flex-reverse; width: 300px; height: 600px; } .box{ float: left; margin:0; padding:0; width: 300px; height: 100px; border: 3px solid black; background-color: #BC4A4A; display: flex; justify-content: center; align-items:center; } </style> </head> <body> <div class="whole"> <div class="inner1"> <div class="box"> <h2>item1</h2> </div> <div class="box"> <h2>item2</h2> </div> <div class="box"> <h2>item3</h2> </div> </div> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> body{ } .blue{ display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; background-color: cyan; border: 1px solid #BC4A4A; border-radius: 40px; } .yellow{ width: 150px; height: 150px; background-color: #FCD39D; border-radius:20px; display: flex; align-items: center; justify-content: center; } .text{ color:#BC4A4A; font-weight: bold; } </style> </head> <body> <div class="blue"> <div class="yellow"> <p class="text">item child</p> </div> </div> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style class="text/css"> body{ } .main{ width: 600px; height: 600px; border: 2px solid black; display: flex; flex-flow: wrap; align-items: space-around; justify-content: space-around; } .box{ margin: 50px; apdding:20px; width: 70px; height: 70px; background-color: black; color:white; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="main"> <div class="box"> <p>c-item1</p> </div> <div class="box"> <p>c-item2</p> </div> <div class="box"> <p>c-item3</p> </div> <div class="box"> <p>c-item4</p> </div> <div class="box"> <p>c-item5</p> </div> <div class="box"> <p>c-item6</p> </div> <div class="box"> <p>c-item7</p> </div> <div class="box"> <p>c-item8</p> </div> <div class="box"> <p>c-item9</p> </div> </div> </body> </html>728x90반응형'HTML,CSS, JS > CSS' 카테고리의 다른 글
[CSS] 11. Flexbox로 메인 페이지 만들기 (0) 2024.07.08 [CSS] 9. Flexitem의 세밀한 제어 flex 속성 (0) 2024.07.04 [CSS] 시험 (0) 2024.07.02 [CSS] 8. 교차축 정렬 (0) 2024.07.02 [CSS] 7. 주축 방향 정렬 Justify-content (0) 2024.07.02 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)