From 4441974a6271957fbaa89dc03239505d11ab8a88 Mon Sep 17 00:00:00 2001 From: soriSeong <103102313+soriSeong@users.noreply.github.com> Date: Mon, 27 Feb 2023 18:53:31 +0900 Subject: [PATCH] Add files via upload --- README.md | 16 +++++++++++++ index.html | 34 ++++++++++++++++++++++++++++ solution.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 15 +++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 solution.css create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..364c5b8 --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ +# week2 - css실습 + +영상 결과물을 보고 따라만들어 보세요! 단 아래의 조건을 지키셔야 합니다! + +1. html 코드는 ‘*** 블로그입니다’를 제외하고 수정하지 않을것!(특히 태그에 class나 id 부여 금지!) +2. height 높이는 마음대로! 단, 배경색이 있는 모든 태그들은 width를 꽉 채운다. +3. nav의 오른쪽 정렬은 float속성을 사용할것!(display = flex or grid금지) +4. 색은 원하는 색으로 해도 된다! 다른 색인걸 확인만 할 수 있으면 OK! + + + + + +[추가로 하고 싶은 말] + +원래 타입선택자로 css를 꾸미는 건 안티패턴이에요!(float도 잘 안씁니다) 하지만 이번 실습은 환경이 제한된 상황에서 어려움을 겪고 이게 왜 안좋은지 알아보는 데에 의미가 있어요! 실전에서는 css로 꾸밀때 class를 사용하도록 합시다! \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1cc80a0 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + Document + + + +
*** 블로그 입니다
+ +
+
+
+ + +
+
+
+

안녕하세요!

+

HTML 실습입니다.

+
+
+ + + diff --git a/solution.css b/solution.css new file mode 100644 index 0000000..20a8c9a --- /dev/null +++ b/solution.css @@ -0,0 +1,63 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + color: #ffffff; +} +header { + width: 100%; + padding: 15px; + background: #000000; + color: white; + text-align: center; + position: sticky; + top: 0; +} +nav { + background: #1c641c; + height: 50px; + width: 100%; + padding: 15px; +} +ul { + list-style: none; + display: flex; /* 금요일에 배울 내용입니다! */ + justify-content: flex-end; +} + +ul > li { + margin: 0px 5px; +} + +article { + width: 100%; +} +section { + width: 100%; + padding: 15px; +} +section:nth-child(1) { + background: #973618; + height: 500px; +} +section:nth-child(2) { + background: orange; + height: 500px; +} +section input { + display: block; + border: 0px; + padding: 20px; + border-radius: 3px; + margin-top: 5px; +} +footer { + background-color: #829967; + width: 100%; + padding: 15px; + text-align: center; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..4326d45 --- /dev/null +++ b/style.css @@ -0,0 +1,15 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +ul { + list-style: none; + display: flex; /* 금요일에 배울 내용입니다! */ + justify-content: flex-end; +} + +ul > li { + margin: 0px 5px; +}