아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (3)

2021/01/02 - [코딩 공부] - 아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타 코딩 무료체험 (2)

아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (2)

2021/01/01 - [코딩공부] - 아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타 코딩 무료체험 (1)

아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (1)

1. html + css 구조 짜기

2. 모바일 연동하기

3. Javascript 연결하기

  여전히 1번이 안 끝나서 ㅋㅋㅋ 

  이번에는 css의 디테일을 넣어 보도록 하자.

 

1. html + css 구조 짜기

(2) css - 초대장 그림 넣기

이 부분을 block과 none을 바꾸어서 초대장이 보이게 합니다.

이 위에다 그림을 넣어야 하니까 ㅋㅋ

이렇게 하면 됩니다.

 .Invitation-image{
            width: 200px; (그림의 너비)
            height: 200px; (그림의 높이)
            background-image: url('./스파르타코딩\ 2일\ 무료\ 체험/제목 없음.png'); (그림 로컬 영역)
            background-size: cover; (그림 사이즈 cover (사이즈 틀에 맞춰서)
            background-position: center; (사이즈 위치는 중앙)
            border-radius: 100%; (모서리 깎기 100%로 하면 동그래짐)
            border: 5px solid crimson; (그림 테두리 (두께, 선 종류, 색)
            margin: 0 auto 0 auto; (여백은 위 오른쪽 아래 왼쪽)
        }

이렇게 하면 

이렇게 됩니다.

근데.. 너무 박스가... 크네. 조절을 좀 해야겠습니다.

  .messagebox {
            font-family: 'Jua', sans-serif;
            color: goldenrod;
            background-color: gray;
            width: 300px;
            height: 300px;
            margin: auto;
            padding: 40px;
            font-size: 20px;
            line-height: 30px;
            box-shadow: 0px 0px 20px 0px white;
            border: 5px solid white;

        }

        .from{
            text-align: right;
        }

우선은 message box에 height를 만들어주고 font-size를 20px로 줄이고 line-height도 20px로 줄였습니다. 그리고. from 클래스를 만들어 마지막 주인 백 문장을 오른쪽 정열로 해주었습니다.

그러면... 이렇게 됩니다.

자 이제.... 모바일에서도 반응형으로 보이도록 해봅시다.

2. 반응형 모바일 페이지로 만들기 

<meta property="og: " 요 녀석을 이용하면 쉽게 아래 그림처럼 공유 시 제목, 설명 글, 이미지 등의 정보를 보여줄 수가 있다.

<meta property="og:image" content=" "> (이미지 url, 서버 등 주소를 넣으면 된다.)
<meta property="og:title" content=" "> (타이틀을 넣으면 된다.)
<meta property="og:description" content=" "> (내용을 넣으면 된다.)

아쉽게도 이 부분은 내가 넣어준다 해도.... 배포가 안되기 때문에... 확인이 불가능할 듯??? ㅋㅋ
위에 것은 저번에 배포를 한 것이라서 보여드립니다.

이런 식으로 넣어주면 됩니다.

그리고 style에서 @media를 사용하여서 모바일에서 볼 때 적용할 변경사항을 넣어주면 모바일에서도 반응형이 됩니다.

우선 얼마나 잘리는지 봅시다.

이 빨간 부분의 것들을 눌러서 조정해 주면 됩니다. 가장 가로가 작은 iphone X 화면 사이즈에 넣어 보니 조금 잘리고 Text가 내려가네요 바꿔봅시다.

  @media screen and (max-width: 760px) { 
           .messagebox {
                width: 250px;
                padding: 20px;
                font-size: 20px;
                line-height: 30px;
           }
       }

이렇게 해당 사이즈에서 변경될 부분만 다시 작성해주면 됩니다.
언급을 하지 않은 부분들은 원래의 설정에 들어가니 그냥 두면 됩니다.

이렇게 바꾸면 이렇게 됩니다.

여기 보면 '그동안 수고한 당신을 초대합니다' 부분을 바꾸고 싶은데 태그를 <h1>으로 해버리는 바람에 그냥 똑같은 크기로 유지가 됩니다.

쩝... 그럼 처음부터 다 바꿔야 하는데... 귀찮아서 그냥 두렵습니다. ㅋㅋㅋ
(그냥 <h1>을 <h2>로 바꾸었습니다.)

이제 Display부분을 다시 바꾸어서 초대장 페이지를 봅시다.

음... 바꿀 게 없어 보이네요 ㅋㅋ 좋아 좋아 ㅋㅋ

이렇게 모바일에서 보이는 페이지 설정까지 작업을 했습니다.

---

다음 포스팅에서 Javascript를 조금 맛본 걸 리뷰해 보도록 하겠습니다.

힘들다 ㅜㅜ

확실히 css, html은 완전한 막일이군요 ㅜ

 

 

제가 해본 코딩을 포스팅으로 남깁니다.
만일 더 좋은 방법이 있거나 문제가 있으시면 댓글로 남겨주세요.
감사합니다.