Question.
<!doctype html>
<div class="text1" id="text1">
<h1>환영합니다.</h1>
</div>
<div class="text2" id="text2">
<h1>example<br>sentence.</h1>
</div>
<div class="text3" id="text3">
<h1><p>also</p>this is example text</h1>
</div>
</html>
<!doctype css>
.text1{
display: flex;
flex-direction: center;
justify-content: center;
align-items: center;
}
</css>text1의 경우 justify-content, align-items를 사용하여 상하,좌우 중앙에 배치가 되는데
<!doctype css>
.text3{ /*2도 동일*/
max-width: 100vw;
width: 80%;
max-height: 100vh;
height: 13%;
background-color: rgba(244, 244, 255, 0.9);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 200px;
border: 20px solid white;
display: flex;
flex-direction: center;
justify-content: center;
align-items: center;
text-align : center;
box-shadow: 5px 5px grey;
display: none;
}
</css>text2와 3 같은 경우는 <p>나 <br> 어떤 것을 써서 줄 바꿈을 해도 좌우는 중앙에 배치되는데 상하가 위쪽으로 배치가 되네요.
text가 두 줄일 때 flex로 중앙에 배치 할 수 있는 방법이 있을까요?
Comment.
추가로 튜터님과 대화해보니 flex로 중앙에 배치가 가능하지만, display:none과 display:flex가 충돌하고 있어서 발생한 문제라는 것을 깨달았다.
(한 css 안에서 다른 타입의 display를 같이 사용하지 말자..)
Answer by 한지훈 튜터님.
해당의 경우에는 자바스크립트로 클래스를 변경하는 방법이 있습니다.
setTimeout(() => {
$( ".text3" ).removeClass( "text3-hidden" ).addClass( "text3" );
}, 1000)
위처럼 클래스를 2개 생성하시고 하나는 display: none 하나는 flex로 두개를 만들어 둡시다.
자바스크립트에서 페이지가 열리고 위의 경우엔 1초뒤에 text3-hidden 클래스가 사라지고 대신 test3라는 클래스가 붙게 됩니다.
https://api.jquery.com/addClass/
위 페이지에서 실습이 가능하니 한번 시도해보시고 적용해보시기 바랍니다 :)
배울점.
| setTimeout(() => { $( ".text3" ).removeClass( "text3-hidden" ).addClass( "text3" ); }, 1000) |
1.
setTimeout() : 일회성 타이머 함수
function comment(){
alert("코멘트")
}
setTimeout(comment, 1000) //1초 뒤에 comment함수가 실행된다.
| <div class="classname" id="idname"> |
2.
$(".classname"): .을 사용하면 class를 받아온다.
$("#idname"): #을 사용하면 id를 받아온다
3.
removeClass(): 클래스명을 삭제한다.
addClass(): 클래스명을 추가한다.
$( ".classid" ).removeClass("classname").addClass("classAdded") ->id가 classid인 div의 class는 classname에서 classAdded으로 변경됨
| setTimeout(() => { $( ".text3" ).removeClass( "text3-hidden" ).addClass( "text3" ); }, 1000) |
즉.
$( ".text3" )
.text3라는 아이디를 가진 객체를
.removeClass( "text3-hidden" )
class="text3-hidden" 을 삭제하고,
.addClass( "text3" )
이후 text3 이라는 클래스를 생성해준다.
setTimeout(()=>{}, 1000)
1초 이후에.
'❓내 질문' 카테고리의 다른 글
| Q4. 코드에 줄이 그여있어요. (0) | 2022.09.09 |
|---|---|
| Q2. show() hide() 함수 질문드립니다 (0) | 2022.09.09 |
| Q1. css에서 사용한 요소가 무엇인지 모르겠어요 (0) | 2022.09.09 |