Skip to content

Commit

Permalink
css 작업중....
Browse files Browse the repository at this point in the history
  • Loading branch information
Seulah Kim committed Nov 17, 2023
1 parent e5c6904 commit 13406a8
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 73 deletions.
1 change: 0 additions & 1 deletion .idea/misc.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

187 changes: 120 additions & 67 deletions Quest01/skeleton/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,126 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8">

<!-- TODO: 또 무엇이 필요할까요? -->
<title>quest01test</title>
</head>
<body>
<header>
<!-- TODO: 어디까지를 header로 보는 것이 좋을까요? : 본문 시작 전-->
</header>
<!-- TODO: 또 무엇이 필요할까요? -->
<title>quest01test</title>
<style>
.shortIcon {
width: 75px;
height: 30px;
font-size: 14px;
text-align: center;
border: 0.5px rgb(128, 128, 128) solid;
}
</style>
</head>
<body>
<header>
<!-- TODO: 어디까지를 header로 보는 것이 좋을까요? : 본문 시작 전-->
</header>
<div class="container" style="padding-top: 50px; margin-left:700px; width: 450px; height: auto;">
<section class="main">

<section class="main">
<!-- TODO: main은 어떤 식으로 나눌 수 있을까요? -->
<div class="logo">NAVER</div>
<div class="search">
<input type="text" placeholder="검색어를 입력해주세요"/>
</div>
<div class="home-shortcut">
<a href="">뉴스판</a>
<a href="">경제지표판</a>
<a href="">연예판</a>
<a href="">트렌드판</a>
<a href="">메일</a>
<a href="">카페</a>
<a href="">블로그</a>
<a href="">기타</a>
</div>
<div>
<div class="weather-small">
날씨 위젯
</div>
<div class="weather-big">
날씨 상세
</div>
<div class="banners">
<div class="banner-1">코로나 관련</div>
<div class="banner-2">임시정부 수립일</div>
<div class="banner-3">앱 광고</div>
<div class="banner-4">웹툰
<select>
<option>웹툰1</option>
<option>웹툰2</option>
<option>웹툰3</option>
</select>
</div>
<div class="banner-5">인기 주제 판
<a href="#">영화판</a>
<a href="#">뿜판</a>
<a href="#">웹툰판</a>
<a href="#">경제M판</a>
</div>
<div class="banner-6">업데이트 사전 안내</div>
</div>
</div>
</section>
<!-- TODO: main은 어떤 식으로 나눌 수 있을까요? -->
<div class="logo" style="justify-content: center; display: flex">
<p style="color: limegreen; font-size: 50px; font-weight: bolder">NAVER</p>
</div>
<div class="search" style="justify-content: center; margin-bottom: 30px; display: flex">
<input type="text" style="width: 270px; height: 30px" placeholder="검색어를 입력해주세요"/>
<button>검색</button>
</div>
<div class="home-shortcut"
style="flex-wrap: wrap; display: flex; gap: 1rem; width: 400px; margin-left: 50px; margin-bottom: 50px">
<a href="#" class="shortIcon">뉴스판</a>
<a href="#" class="shortIcon">경제지표판</a>
<a href="#" class="shortIcon">연예판</a>
<a href="#" class="shortIcon">트렌드판</a>
<a href="#" class="shortIcon">메일</a>
<a href="#" class="shortIcon">카페</a>
<a href="#" class="shortIcon">블로그</a>
<a href="#" class="shortIcon">기타</a>
</div>
<div>
<div class="weather">
<div class="weather-small"
style="padding-left: 40px; padding-bottom: 20px; border: 1px lightgray solid">
<p style="font-weight: bold">날씨 : 10˚ 맑음</p>
<p style="font-size: 12px">어제보다 2˚ 높아요</p>
</div>
<div class="weather-big"
style="padding-left: 40px; padding-top: 10px; border: 1px lightgray solid; height: 250px">
<span style="font-weight: bold">날씨</span>
<span style="font-size: 12px"> 서울시 잠실동</span>
<div style="padding: 10px">
<a href="#" style="font-size: 12px; border: 1px rgb(128,128,128) solid;">시간대별 날씨</a>
<a href="#" style="font-size: 12px; border: 1px rgb(128,128,128) solid;">시간대별 미세먼지</a>
<a href="#" style="font-size: 12px; border: 1px rgb(128,128,128) solid;">주간 날씨</a>
<a href="#" style="font-size: 12px; border: 1px rgb(128,128,128) solid;">주간 미세먼지</a>
</div>
</div>
</div>
<div class="banners"
style="padding-top: 10px; height: 250px; gap: 3rem">
<div class="banner-1"
style="align-content: baseline;flex-wrap: nowrap; padding-top: 20px; padding-left: 50px; padding-bottom: 30px; border: 1px lightgray solid; gap: 3rem; ">
<div class="banner-1-1" style="float: left">
<span style="font-weight: bold;">코로나 19</span>
<p style="font-size: 12px"> 국내외 확진 현황</p>
</div>

<footer>
<!-- TODO: 하단의 여러 가지 링크들은 어떻게 처리하면 좋을까요? -->
<div style="width: 50%; padding:10px">
<div class="info">
<a href="">로그인</a>
<a href="">전체서비스</a>
<a href="">PC버전</a>
<a href="">이용약관</a>
<a href="">개인정보처리방침</a>
<a href="">고객센터</a>
</div>
</div>
</footer>
</body>
<div class="banner-1-2" style="padding-left: 200px;">
<span style="font-weight: bold">코로나 팩트체크</span>
<p style="font-size: 12px"> 백신 정보 팩트는?</p>
</div>
</div>
<div class="banner-2"
style="height: 40px; text-align: center; padding-top: 20px; padding-bottom: 10px; border: 1px lightgray solid;">제 102주년
대한민국 임시정부 수립일
</div>
<div class="banner-3"
style="height: 40px; text-align: left; padding-top: 20px; border: 1px lightgray solid;">
<div style="font-size: 12px; padding-left: 30px">앱으로 <span style="font-weight: bold">새로운 네이버</span>를
더 쾌적하게 사용해 보세요.
<button>앱 사용하기</button>
</div>
</div>
<div class="banner-4"
style="height: 40px; padding-left:30px; text-align: left; padding-top: 20px; border: 1px lightgray solid">웹툰
<select>
<option>웹툰</option>
<option>웹툰1</option>
<option>웹툰2</option>
</select>
</div>
<div class="banner-5"
style="height: 40px; padding-left:30px; text-align: left; padding-top: 20px; border: 1px lightgray solid">인기 주제 판
<a href="#">영화판</a>
<a href="#">뿜판</a>
<a href="#">웹툰판</a>
<a href="#">경제M판</a>
</div>
<div class="banner-6"
style="height: 40px; padding-left:30px; text-align: left; padding-top: 20px; border: 1px lightgray solid">업데이트 사전 안내
</div>
</div>
</div>

</section>

<footer>
<!-- TODO: 하단의 여러 가지 링크들은 어떻게 처리하면 좋을까요? -->
<div style="width: 50%; padding:100px; margin-top: 100px">
<div class="info">
<a href="" style="font-size: 12px">로그인</a>
<a href="" style="font-size: 12px">전체서비스</a>
<a href="" style="font-size: 12px">PC버전</a>
<a href="" style="font-size: 12px">이용약관</a>
<a href="" style="font-size: 12px">개인정보처리방침</a>
<a href="" style="font-size: 12px">고객센터</a>
</div>
</div>
</footer>
</div>
</body>
</html>
28 changes: 23 additions & 5 deletions Quest02/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,31 @@
* [그리드 레이아웃과 다른 레이아웃 방법과의 관계](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/%EA%B7%B8%EB%A6%AC%EB%93%9C_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EB%8B%A4%EB%A5%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83_%EB%B0%A9%EB%B2%95%EA%B3%BC%EC%9D%98_%EA%B4%80%EA%B3%84)

## Checklist
* CSS를 HTML에 적용하는 세 가지 방법은 무엇일까요?
* CSS를 HTML에 적용하는 세 가지 방법은 무엇일까요?
- Inline Style Sheet : HTML 태그의 style 속성에 CSS 코드를 넣는 방법
- Internal Style Sheet : HTML 문서 안에 '<style>'과 '</style>'안에 css 코드를 넣는 방법
- Linking Style Sheet : 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법
* 세 가지 방법 각각의 장단점은 무엇일까요?
- Inline Style Sheet : 해당 요소에 간편하게 적용할 수 있지만 재사용이 불가함
- Internal Style Sheet : 문서 안에 여러 요소를 한번에 꾸밀 수 있으나 또 다른 HTML 문서에는 적용할 수 없음
- Linking Style Sheet : 여러 HTML 문서에 사용 가능
* CSS 규칙의 우선순위는 어떻게 결정될까요?
* CSS의 박스모델은 무엇일까요? 박스가 화면에서 차지하는 크기는 어떻게 결정될까요?
* `float` 속성은 왜 좋지 않을까요?
* Flexbox(Flexible box)와 CSS Grid의 차이와 장단점은 무엇일까요?
* CSS의 비슷한 요소들을 어떤 식으로 정리할 수 있을까요?
1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 inline으로 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스로 지정한 속성
5. 태그이름으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
= 같은 우선 순위에 있는 경우, 부모 - 자식 관계가 많은 경우가 우선 되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됨
* CSS의 박스모델은 무엇일까요? 박스가 화면에서 차지하는 크기는 어떻게 결정될까요?
- 모든 HTML 요소는 박스 모양으로 구성되며,박스 모델이라고 부름. 박스 모델은 HTML 요소를 padding, border, margin, content로 구분함
- 표준 박스 모델에서 width와 height을 부여하면 content box의 너비와 높이가 정의됨 -> 패딩과 테두리는 박스의 너비와 높이에 추가되어 박스가 점유하는 전체 크기가 정해짐
* `float` 속성은 왜 좋지 않을까요?
- `float`는 요소의 배치를 제어하기 위해 사용하는 속성으로 모든 자식 요소에 float속성을 적용 하면, 부모 요소는 해당 자식 요소가 존재하지 않는 것으로 판단하여, 높이를 인식하지 못하는 문제가 발생함
* Flexbox(Flexible box)와 CSS Grid의 차이와 장단점은 무엇일까요?
- Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눔 : 요소를 부모 요소 내에서 유연하게 배치하기 위해 사용. 네비게이션 바, 버튼, 입력 폼 등과 같은 작은 요소를 다룰때 유용
- grid는 2차원으로 수평, 수직을 동시에 영역을 나눔 : 대시보드, 웹 어플리케이션 인터페이스 뉴스 기사 페이지 등 복잡한 레이아웃을 다룰때 유용함
* CSS의 비슷한 요소들을 어떤 식으로 정리할 수 있을까요? - 다중 선택자 (복합 셀렉터라고도 함). 공통으로 css가 적용되어야 할 부분을 선택자로 지정하여 해당 그룹에 대해 한꺼번에 css 적용 시킴

## Quest
* Quest 01에서 만들었던 HTML을 바탕으로, [이 그림](screen.png)의 레이아웃과 CSS를 최대한 비슷하게 흉내내 보세요. 꼭 완벽히 정확할 필요는 없으나 align 등의 속성은 일치해야 합니다.
Expand Down

0 comments on commit 13406a8

Please sign in to comment.