커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
css질문
undefined주차
최*지
댓글
1
・
추천
0
・
조회수
12
조회수
12
답변 완료
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>장원영 - 팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.장원영 {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg, rgba(0.5, 0, 0, 0), rgba(0.5, 0, 0, 0)), url('https://img2.sbs.co.kr/img/seditor/VD/2020/02/25/VD66963636_w640.jpg');
background-position: center 30%;
background-size: cover;
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.핑크{ background-color: #f0bbf0;}
.응원남기기 {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
background-color: white;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
text-align: center;
}
.버튼 {
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
function 성공(){
alert('응원메세지가 성공적으로 남겨졌습니다.');
}
</script>
</head>
<body>
<div class="장원영">
<h1 style="background-color:#FF00FF;">장원영(아이브) 팬명록</h1>
</div>
<div class="핑크">
<div class="응원남기기">
<h2>❤️응원 남기기❤️</h2>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="버튼">
<button onclick="성공()"type="button" class="btn btn-outline-secondary">응원 남기기</button>
</div>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-header">
1주차 과제
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</body>
</html>
1 [정렬/위아래여백] <h2>❤️응원 남기기❤️</h2> 이걸 가운데정렬하고 위아래 여백을 주고싶은데 css 어떻게 작성해야하나요?(과제 제출할려고 임시로 <br>태그로 처리해둠)
2 [부모-자식구조] 응원남기기 박스안에 <h2>랑 <버튼>이 있는데 둘다 같은 응원남기기의 자식인데 css에서 .h2는 적용이 안되고 .버튼은 왜 적용이 되는건가요? (응원남기기>.h2 이렇게 하니깐 됐음)
3 class의 이름을 영어로 작성하면 좋은가요? 한글도 상관없나요?
4 수업때 파이참대신 vscode에디터 사용해도 될까요
그리고 전체적으로 첨삭 한번 해주시면 감사하겠습니다.
댓글 알림
