Web page Clone Coding 01(about. 마진상쇄)

안녕하세요! 웹페이지 클론 코딩을 첫 글로 써보네요!

사실 클론코딩이라고 하기에도 부끄러운 수준이지만... SPA(Single page Application)를 html과 css로만 최대한 비슷하게 따라해보았습니다!

현재 다니고 있는 학원에서 html과 css 진도를 다 나가고 마지막으로 배운 내용을 토대로 선생님께서 가져오신 웹페이지 외형을 똑같이 만들어보자! 이게 주된 목적이었습니다.

 

제가 선택한 페이지입니다! https://website70258.nicepage.io/Page-2.html

Page 2

소스코드는 https://github.com/Jang-YuJin/CloneCoding_01 에 있습니다!

사실 당일날 끝내려고 html 구조도 어설프게 짜고 css도 급하게 만들어서 아쉬움이 많았어요.

결론적으로는 당일 제출을 할 수 있었으나 끝내고 보니까 반응형도 구현하고 싶은 욕심이 생기더라고요!

그래서 시작한 날인 22년 1월 14일부터 22년 1월 23일까지 수업 쉬는 시간과 짬나는 시간을 이용해 반응형 웹으로 구현까지 할 수 있었습니다!

14일 당일에는 html부터 전체 화면에서 css를 적용했고 그 이후부터는 반응형 구현을 위해 media쿼리로 section 하나하나씩 구현해나갔습니다!

 

코드에서 제가 나름 중요하다 생각하는 부분을 써보겠습니다!

    <section id="section4">
        <div class="container">
            <div class="topText fontSize30">Time to Make a Difference</div>
            <div class="bottomText lineHeignt">Phasellus scelerisque arcu vestibulum tempor tempor. Donec vulputate leo
                et metus hendrerit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In
                scelerisque nisl nec ornare euismod.</div>
        </div>
    </section>

section4의 html입니다. section4의 자식 요소인 container 사이에 콘텐츠가 없어서 마진 상쇄가 발생했습니다. 이를 해결하기 위한 방법으로는 총 3가지가 있는데 저는 그 중에 가장 코드에 영향을 안주는 padding-top: 1px; margin-top: -1px;을 이용했습니다.

#section4{
    background-image: url("https://images03.nicepage.com/a1389d7bc73adea1e1c1fb7e/992eb4a786e9521ea39ea995/pexelsphoto940302.jpeg");
    background-position: center;
    background-size: cover;
    height: 765px;
    padding-top: 1px;
    margin-top: -1px;
}

마진상쇄 이외에는 딱히 코드에서 중요하게 언급할 건 없는 거 같네요!

제 소스코드를 보시면 아직 많이 배운 수준이 아니라서 어지러운 코드일 겁니다 ㅠ 그래도 이렇게 하나의 완성물(?)이 나오니 나름 뿌듯하네요!

 

그리고 이번 실습을 통해서 기획단계가 중요하다는 걸 깨닫습니다! 처음엔 급한 마음에 눈에 보이는 구조만 후다닥 써내려 갔는데 이렇게 만든 구조로 나중에 반응형으로 수정하려니까 꽤 골치 아팠네요 ㅠ

다음 클론 코딩 때는 좀 더 신중하게 구조를 만들어 수정이 쉽도록 짜 봐야겠습니다!

 

지금까지 읽어주셔서 감사합니다!