IT-Cotato · leeyounseo · Sep 26, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 4, 2024
diff --git a/MediaCompany/1.png b/MediaCompany/1.png
diff --git a/MediaCompany/10.png b/MediaCompany/10.png
diff --git a/MediaCompany/11.png b/MediaCompany/11.png
diff --git a/MediaCompany/12.png b/MediaCompany/12.png
diff --git a/MediaCompany/13.png b/MediaCompany/13.png
diff --git a/MediaCompany/14.png b/MediaCompany/14.png
diff --git a/MediaCompany/15.png b/MediaCompany/15.png
diff --git a/MediaCompany/16.png b/MediaCompany/16.png
diff --git a/MediaCompany/17.png b/MediaCompany/17.png
diff --git a/MediaCompany/18.png b/MediaCompany/18.png
diff --git a/MediaCompany/19.png b/MediaCompany/19.png
diff --git a/MediaCompany/2.png b/MediaCompany/2.png
diff --git a/MediaCompany/20.png b/MediaCompany/20.png
diff --git a/MediaCompany/21.png b/MediaCompany/21.png
diff --git a/MediaCompany/22.png b/MediaCompany/22.png
diff --git a/MediaCompany/23.png b/MediaCompany/23.png
diff --git a/MediaCompany/24.png b/MediaCompany/24.png
diff --git a/MediaCompany/3.png b/MediaCompany/3.png
diff --git a/MediaCompany/4.png b/MediaCompany/4.png
diff --git a/MediaCompany/5.png b/MediaCompany/5.png
diff --git a/MediaCompany/6.png b/MediaCompany/6.png
diff --git a/MediaCompany/7.png b/MediaCompany/7.png
diff --git a/MediaCompany/8.png b/MediaCompany/8.png
diff --git a/MediaCompany/9.png b/MediaCompany/9.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<html lang="ko"></html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+  <link href='style.css' rel='stylesheet'>
+  <title>NAVER Newsstand</title>
+</head>
+<body>
+
+  <div id="newsstand">
+    <div id="newsstand-header">
+      <div class="left-content">
+        <img src="/icon.png" class="news-icon" alt="뉴스스탠드 아이콘">
+        <a href="#" class="bold">뉴스스탠드</a>
+      </div>
+      <div class="right-content">
+        <a href="#" class="date">2024.09.24.화요일</a>
+      </div>
+    </div>
+
+    <div id="newsstand-gray">
+      <div id="content" class="left">
+        <a href="#" class="bold">연합뉴스</a>
+        <a href="#" class="underline">[1보] 김기현·안철수·천하람·황교안,與전대 본경선 진출</a>
+      </div>
+      <div id="content" class="right">
+        <a href="#" class="bold">연합뉴스</a>
+        <a href="#" class="underline">[속보] 與최고위원 본경선, 김병민·김용태·김재원·민영삼</a>
+      </div>
+    </div>
+
+    <div id="mediaheader">
+      <div class="left-content">
+        <a href="#" id="all">전체 언론사</a>
+        <a href="#" id="subscribed">내가 구독한 언론사</a>
+      </div>
+      <div class="right-content">
+        <button class="view_list"><span>목록보기</span></button>
+        <button class="view_grid"><span>격자보기</span></button>
+      </div>
+    </div>
+
+    <div id="newsstand-grid">
+      <div><img src="/MediaCompany/1.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/2.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/3.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/4.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/5.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/6.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/7.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/8.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/9.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/10.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/11.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/12.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/13.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/14.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/15.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/16.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/17.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/18.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/19.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/20.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/21.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/22.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/23.png" alt="언론사"></div>
+      <div><img src="/MediaCompany/24.png" alt="언론사"></div>
+    </div>
+
+
+    <nav id="listcontent">
+      <ul>
+        <li><a>종합/경제</a></li>
+        <li><a>방송/통신</a></li>
+        <li><a>IT</a></li>
+        <li><a>영자지</a></li>
+        <li><a>스포츠/연예</a></li>
+        <li><a>매거진/전문지</a></li>
+        <li><a>지역</a></li>
+      </ul>
+    </nav>
+      <div id="contentbox">
+        <div id="header">
+          <img src="/MediaCompany/1.png" alt="언론사">
+          <a href="#" class="Edit_Date">2023.02.10. 18:27 편집</a>
+          <button class="subscribe"><span>+ 구독하기</span></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,269 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+#newsstand {
+  width: 1715px;
+  height: 968px;
+  flex-shrink: 0;
+  text-align: center; 
+  margin-top: 56;
+  margin-bottom: 56;
+  margin-left: -98;
+  margin-right: -99;
+  display: block;
+}
+#newsstand a:visited {
+  color: inherit;
+}
+#newsstand a{
+  text-decoration: none;
+}
+
+
+
+#newsstand-header {
+  width: 1307px;
+  height: 104px;
+  margin-top: 42px;
+  margin-left: 201px;
+  margin-right: 207px;
+  margin-bottom: 6px; /*수정해보기*/
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #fff;
+}
+#newsstand-header .left-content {
+  justify-content: flex-start;
+  display: flex;
+  align-items: center;
+}
+#newsstand-header .bold{
+  font-weight: bold;
+  color: black;
+  font-size: 1.6rem;
+}
+#newsstand-header .left-content .news-icon{
+  margin-left: 20;
+  margin-top: 5;
+  height: auto;
+}
+#newsstand-header .right-content {
+  justify-content: flex-end;
+  margin-right: 20;
+  margin-top: 15;
+  display: flex;
+  align-items: center;
+}
+#newsstand-header .date{
+  font-size: 1rem;
+  color: #858585;
+}
+
+
+
+#newsstand-gray {
+  width: 1307px;
+  height: 104px;
+  flex-shrink: 0;
+  text-align: center; 
+  /*background-color: aqua;*/
+  margin-left: 201px;
+  margin-right: 207px;
+  margin-bottom: 8px;
+  display: flex; /* Flexbox를 사용하여 가로 정렬 */
+  justify-content: space-between; /* 두 요소 사이에 공간을 배분 */
+  align-items: center; /* 세로 축에서 중앙 정렬 */
+}
+#newsstand-gray #content{
+  text-align: left;
+  border: 1px solid #e0e0e0; /* 박스를 위한 테두리 */
+  padding: 15px; /* 내부 여백을 설정하여 텍스트와 박스 사이에 공간을 만듦 */
+  background-color: #f9f9f9; /* 배경 색상 설정 (연한 회색) */
+  width: 45%; /* 항목의 너비를 설정하여 두 항목이 균등하게 배치되도록 함 */
+}
+#newsstand-gray .left{
+  margin-left: 30;
+}
+#newsstand-gray .right{
+  margin-right: 30;
+}
+#newsstand-gray .bold{
+  font-weight: bold;
+}
+#newsstand-gray .underline {
+  text-decoration: none;
+  margin-left: 20;
+}
+#newsstand-gray .underline:hover {
+  text-decoration: underline;
+}
+
+/* #mediacontent {
+  width: 1305px;
+  height: 620px;
+  flex-shrink: 0;
+  text-align: center; 
+  display: inline-block;
+  margin-left: 201;
+  margin-right: 209;
+  background-color: aqua;
+}
+*/
+
+#mediaheader {
+  display: flex; /* Flexbox로 자식 요소를 가로로 배치 */
+  justify-content: space-between; /* 좌우로 요소 배치 및 간격 설정 */
+  align-items: center; /* 세로 중앙 정렬 */
+  margin-left: 201px;
+  margin-right: 207px;
+}
+#mediaheader .left-content {
+  justify-content: flex-start;
+  display: flex;
+  align-items: center;
+  margin-left: 30;
+  font-size: 20;
+
+}
+#mediaheader .right-content {
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  margin-right: 30;
+}
+#subscribed {
+  margin-left: 20;
+}
+.view_grid {
+  margin-left: 20;
+  background-image: url('/view_grid.png'); /* 배경 이미지 설정 */
+  background-size: cover; /* 이미지를 버튼 크기에 맞춤 */
+  width: 30px; /* 버튼의 너비 설정 */
+  height: 30px; /* 버튼의 높이 설정 */
+  border: none; /* 기본 버튼 테두리 제거 */
+  color: transparent; /* 텍스트 숨김 */
+  font-size: 0; /* 텍스트 크기 숨김 */
+}
+.view_list {
+  background-image: url('/view_list.png'); /* 배경 이미지 설정 */
+  background-size: cover; /* 이미지를 버튼 크기에 맞춤 */
+  width: 30px; /* 버튼의 너비 설정 */
+  height: 30px; /* 버튼의 높이 설정 */
+  border: none; /* 기본 버튼 테두리 제거 */
+  color: transparent; /* 텍스트 숨김 */
+  font-size: 0; /* 텍스트 크기 숨김 */
+}
+
+
+
+
+
+#newsstand-grid {
+  display: none; /* 그리드 잠깐 숨기기 */
+  height : 450px;
+  width : 1245px;
+  grid-template-rows: 112.5px 112.5px 112.5px 112.5px;
+  grid-template-columns: 207.5px 207.5px 207.5px 207.5px 207.5px 207.5px;
+  margin-top: 30;
+  margin-left: 30;
+  /*background-color: aqua;*/
+}
+#newsstand-grid div {
+  border: 1px solid #ccc; /* 각 셀에 회색 테두리 추가 */
+  width: 100%;  /* 셀이 부모 컨테이너에서 차지하는 전체 너비 */
+  height: 100%; /* 셀이 부모 컨테이너에서 차지하는 전체 높이 */
+  display: flex;
+  align-items: center; /* 세로 중앙 정렬 */
+  justify-content: center; /* 가로 중앙 정렬 */
+}
+.news-icon {
+  width: 50px; 
+  height: 50px;
+}
+
+#listcontent{
+  width: 1280px;
+  height: 40px;
+  /*border: 1px solid #e0e0e0; /* 박스를 위한 테두리 */
+
+  /*background-color: #f9f9f9; /* 배경 색상 설정 (연한 회색) */
+  margin-top: 20;
+  margin-left: 201px;
+  margin-right: 207px;
+  text-align: center;
+  display: flex; /* Flexbox를 사용하여 가로 정렬 */
+  align-items: center; /* 세로 축에서 중앙 정렬 */
+  padding: 16px 0px;
+
+}
+#listcontent ul{
+  list-style: none; /* 기본 리스트 스타일 제거 */
+  display: flex; /* 가로로 배치 */
+  justify-content: flex-start; /*왼쪽 정렬*/
+  padding: 16px; /* 내부 여백을 설정하여 텍스트와 박스 사이에 공간을 만듦 */
+  border: 1px solid #D2DAE0;
+  background-color: #f9f9f9; /* 배경 색상 설정 (연한 회색) */
+  margin-left: 30;
+  width:100%
+}
+#listcontent li{
+  margin: 0 16px; /* 각 리스트 항목 간격 */
+  color: #879298;
+  font-family: "Pretendard Variable";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+#contentbox{
+  border: 1px solid #D2DAE0;
+  height: 325;
+  width: 1199;
+  margin: 0 auto; /* 가로 가운데 정렬 */
+  padding: 24;
+}
+#contentbox #header{
+  display: flex; /* 가로로 배치 */
+  justify-content: flex-start; /*왼쪽 정렬*/
+  margin-bottom: 16;
+}
+#contentbox #header img{
+  width: 52.5px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+#contentbox #header .Edit_Date{
+  margin-right: 16px;
+  font-family: "Pretendard Variable";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: #5F6E76;
+  margin-top: 2;
+}
+#contentbox #header .subscribe{
+  display: inline-flex;
+  height: 24px;
+  padding: 0px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  border-radius: 50px;
+  border: 1px solid #D2DAE0;
+  background: #FFF;
+}
+#contentbox #header .subscribe span{
+  font-family: "Pretendard Variable";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: #879298;
+}
diff --git a/view_grid.png b/view_grid.png
diff --git a/view_list.png b/view_list.png