TIL - 2주차 개발일지

제목 메시지 만들기

.title {
    font-size: 32px;
    color: darkred;
    text-align: center;
}

<h1 class="title">2021년 쥐띠의 운세는!</h1>

운세 메시지 만들기

.msg {
    color: darkred;
    text-align: center;
    font-size: 32px;
    line-height: 48px;
}

<p class="msg">
    마음을 알아주는 따뜻한 사람을 만날 것이야!<br/>
    일이 잘 안 풀리는 것 같아도<br/>
    연말에는 호탕하게 웃을 수 있을 지어니<br/>
    너무 걱정하지 말고 하루하루 잘 나아가봐~
</p>

 

버튼 만들기

 

버튼 배치하기

1. 우선, div와 button 태그를 이용해서 버튼을 배치하기
   • btns 클래스

   <div class="btns">
       <button>뒤로가기</button>
       <button>공유하기</button>
   </div>
   

2. 버튼을 가운데로 가져오기
   • 내용물을 정리시키는 방법! display:flex

   .btns {
       display: flex;
       flex-direction: row;
       justify-content: center;
   }
   

3. 버튼 별로 클래스를 다르게 주기

<div class="btns"> <button class="btn-back">뒤로가기</button> 
<button class="btn-share">공유하기</button> </div>

뒤로가기 버튼 꾸미기!

• width: 150px, height: 50px
• cursor: pointer 로 커서 모양을 손으로 바꾸기

.btn-back {
    width: 150px;
    height: 50px;

    color: darkred;
    border: 2px solid darkred;
    background-color:white;

    border-radius: 10px;

    font-size: 20px;
		cursor: pointer;
}

공유하기 버튼 꾸미기!

• 뒤로가기 버튼의 코드를 복사해서 사용하기
• margin-left:5px를 통해 간격을 조금 띄우기

.btn-share {
    width: 150px;
    height: 50px;

    color: white;
    border: 2px solid darkred;
    background-color:darkred;

    border-radius: 10px;

    font-size: 20px;
		cursor: pointer;

		margin-left: 5px;
}

모바일 버전 처리하기

모바일CSS - 운세페이지

@media screen and (max-width: 780px)  {

    body {
        background-color: green;
    }

}

배경 적용해주기

@media screen and (max-width: 780px)  {

    body {
        background-position: 70px -70px;
        background-size: 500px;
    }

}

.rtan {
    margin-top: 50px;
}

p 태그의 글자를 줄여주기

.msg {
    font-size: 24px;
    line-height: 36px;

    margin-bottom: 36px;
    padding:10px;
}

모바일에서는 br 태그를 무시하게 하기

.msg > br {
    display: none;
}

Javascript 맛보기

<script>
    function back(){
        alert('뒤로가자!')
    }
</script>

<button onclick="back()" class="btn-back">뒤로가기</button>