커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
버튼 간격 설정
undefined주차
유*림
댓글
3
・
추천
0
・
조회수
8
조회수
8
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
기록하기와 닫기의 버튼을 정렬할때
위의 간격을 띄울 때는 margin-top : 20px; 으로 셋팅하였는데
버튼 사이의 간격을 띄울 때는 왜 따로 .mybtn > button {} 으로 따로 스타일을 구분하여 셋팅해야하나요?
.mybtn 에서 margin : 20px 10px 0px 0px; 으로 설정하면 안되나요?
보고 계신 화면 전체를
캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
.mybtn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button{
margin-right: 10px;
} # 선생님 코드
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
.mybtn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin : 20px 10px 0px 0px
} # 제가 생각하는 코드
</style>
</head>
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
댓글 알림
