* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하십니까 튜터님 새해복 많이 받으셔요!
다름이 아니오라 제가 테스트페이지 계속 작업중에 막히는 부분이 있어서 이렇게 질문드립니다.
일단 이렇게 비슷하게 만들고 싶은 데 잘안되고 너무 어려워서 도움을 얻고싶습니다!
먼저 완성본입니다
배경 리피트를 이렇게 만들어 볼려고 하는데 제가 현재 진행이
이렇게가 제 한계인것 같습니다 ㅠㅜ
완성본처럼 backgound-repeat 적용과 응용이 어떻게 해야하는 지 여쭤봅니다.
감사합니다 튜터님 코드 올리겠습니다
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>르탄의 코딩테스트</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
<body bgcolor="f5cae6">
<div class="wrap">
<div class="title">
<h5>1번문제</h5>
<h2>div 태그는 레이아웃을 나눌 때 주로 사용된다.</h2>
</div>
<div class="img1">
<img src="SpartaIcon03.png" alt="SpartaIcon03" width="200" height="200">
</div>
<div class="btn">
<button type="button" class="btn btn-success">맞음</button>
<button type="button" class="btn btn-danger">틀림</button>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------
css
* {
font-family: 'Galmuri11';
}
body {
background-repeat: repeat;
background-image: url("data:image/png;base64,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");
}
.title {
background-color: rgb(255, 255, 255);
width: 400px;
height: 150px;
padding: 10px;
position:relative;
margin: 50px;
border: 2px solid;
border-radius: 15px;
}
.title:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 45px solid transparent;
border-top-color: rgb(255, 255, 255);
border-bottom: 0;
border-left: 0;
margin-left: -22.5px;
margin-bottom: -45px;
}
.title:before {
content: '';
position: absolute;
bottom: 0;
left: 208px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;
border-bottom: 0;
border-left: 0;
margin-left: -22.5px;
margin-bottom: -50px;
}
.wrap {
width: 400px;
height: 100px;
margin: auto;
padding-top: 150px;
}
.img1 {
width: 200px;
height: 200px;
margin-left: 100px;
margin-top: -10%;
background-size: cover;
background-position: center;
}
.btn {
position: relative;
left: 150px;
bottom: 100%;
font-size: 30px;
}
이상입니다.
이미지는 제가 테스트해본다고 아무거나 이미지를 넣어봤습니다.
가르침을 주시면 꼭 잘 외우고 제 것으로 만들겠습니다.
