[HTML / CSS] 스파르타 코딩클럽 - 신년운세 코딩 패키지 2주차

01. 2주차 완성물: 신년특집 운세 패키지

띠별 운세페이지를 만들고 반응형 웹으로 변경한다.

02. index.html 과 result.html 을 연결하기

a 태그의 href 속성에 이동할 페이지를 넣어준다.

<div class="rtans">
	  <a class="rtan1" href="result.html">쥐</a>
</div>

03. 버튼 만들기

버튼 2개를 div 태그로 묶어준다.

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

04. 버튼 가운데 정렬하기

display:flex 를 통해 정렬한다.

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

05. 모바일 버전 확인

크롬 개발자 도구 → 모바일 버튼을 클릭

06. 모바일 버전 처리하기

스크린 사이즈가 780px 이하일 때 → body의 백그라운드 색을 초록색으로 바꿔라!

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

    body {
        background-color: green;
    }

}

07. 뒤로가기 버튼 구현

function back(){
    let url = window.location.href;
    let new_url = url.split('result.html')[0] + 'index.html';
    window.location.href= new_url;
}

08. 공유하기 버튼 구현

function share(){
    var t = document.createElement("textarea");
    document.body.appendChild(t);
    t.value = window.location.href;
    t.select();
    document.execCommand('copy');
    document.body.removeChild(t);
    alert('복사 완료!')
}

09. og 태그

10. 배포 페이지

신년운세 by 수현!