min's devlog

[Html/CSS] 클론코딩 본문

til/Front

[Html/CSS] 클론코딩

값진 2022. 5. 31. 15:58

무언가를 웹페이지에 띄우려면 너무 막연한 느낌에 멈칫하게 된다. 이 당황스러움(?)을 줄이고 프론트엔드 실력을 늘리기 위해서는 클론코딩 해보는 것이 중요하다고 해서 작은 부분이지만 연습해봤다.

색깔이나 크기 등이 완벽히 같을 순 없지만.. 최대한 소스코드 없이 비슷하게 꾸며봤다. 또 공부 목적이라서 개발자 도구는 최대한 참고하지 않았다.

 

   <style>
      #news {
         width: 648px;
         border-left: 1px solid #CCC;
         border-right: 1px solid #CCC;
         margin: 0 auto;
         font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",Dotum,"돋움",sans-serif;
         padding: 50px 26px;
      }

      #news > div {
         margin-bottom: 15px;
         padding-bottom: 15px;
         border-bottom: 1px solid #DDD;
      }

      #news > div:last-child {
         border-bottom: 0;
      }

      #news > h1 {
         color: #3F63BF;
         font-size: 14px;
         font-weight: bold;
         letter-spacing: -1px;
         margin-bottom: 16px;
      }

      #news > div > img {
         float: left;
         margin-right: 16px;
      }

      #news > div > div {
         float: left;
         width: 500px;
      }

      #news > div::after {
         content: '';
         display: block;
         clear: both;
      }

      #news > div > div > h2 {
         font-size: 15px;
         margin: 0;
         margin-top: 4px;
         margin-bottom: 4px;
      }

      #news > div> div > div:nth-child(2) {
         font-size: 13px;
         color: #666;
         margin-bottom: 4px;
      }

      #news > div> div > div:nth-child(3) {
         font-size: 12px;
         color: #888;
      }

   </style>
</head>
<body>
   <div id="news">
      <h1>구글 인앱결제 본격화 D-1 결국 피해는 소비자의 몫</h1>

      <div>
         <img src="images/naver01.jpg">
         <div>
            <h2>구글은 회피하고 IT업계는 비용전가…소비자만 ‘봉’[7NEWS]</h2>
            <div>안녕하세요. 7NEWS입니다. 국내 앱 시장에서 압도적 영향력을 발휘하는 구글이 오는 6월1일부터 자사 인앱 결제 정책을 따 …</div>
            <div>조선일보</div>
         </div>
      </div>

      <div>
         <img src="images/naver01.jpg">
         <div>
            <h2>구글은 회피하고 IT업계는 비용전가…소비자만 ‘봉’[7NEWS]</h2>
            <div>안녕하세요. 7NEWS입니다. 국내 앱 시장에서 압도적 영향력을 발휘하는 구글이 오는 6월1일부터 자사 인앱 결제 정책을 따 …</div>
            <div>조선일보</div>
         </div>
      </div>
</body>

 

- 이미지는 inspector로 찍어서 링크를 통해 다운받았다

- 서식이 조금이라도 다르겠다 싶으면 -> 태그로 묶기 -> 세 파트로 나눠 블럭태그(div)로 묶음

- 같은기능은 부모태그로 묶기

- div로 전체를 감싸고 있는 컨테이너도 만들어주었다 (기사제목은 div로 썼었는데 유일하지 않기에 h2로 바꿈)

- 그림과 문자 취급을 같이하기위해 div추가(image와 동등해지도록)-- h2위 신문사밑

        #news > div > img {
            float: left;
        }

        #news > div > div {
            float: left;
            width: 440px;
        }
 

- 이미지와 글 사이에 여백은 이미지에 오른쪽 여백 또는 컨텐츠에 좌측여백 조절해주기

 

 

'til > Front' 카테고리의 다른 글

[CSS] Bootstrap  (0) 2022.06.07
MarkDown  (0) 2022.06.02
[CSS] 선택자(selector)  (0) 2022.05.31
[CSS] Float(세로상자에서 가로상자로)  (0) 2022.05.30
[CSS] 포지션(position)  (0) 2022.05.30
'til/Front' Related Articles more
Comments