웹프로그래밍 - 2020 중간고사

KU / WebProgramming

2022.02.20.

웹프2020중간고사를 풀면서 어려웠던 점들, 혹은 헷갈렸던 점들을 정리해보았다.

float: left를 사용하였을때 footer가 아래부분에 계속 배치된 상태를 유지하려면 어떻게 해야하나?
=> footer에 clear: both; 속성 넣기

clear: both;

float: left와 float: right를 한 상태에서 footer도 같이 따라 붙지 않게하기 위해 float: left와 float: right를 취소해주는 역할!

nav영역의 탭바 구현

menu1, menu2, menu3을 눌렀을 때 각각의 기사가 보여지도록 하려면 어떻게 해야하나?
=> input[type=“radio”] 활용!
처음에 아무리 버튼을 눌러도 해당 기사글이 보여지지 않았다.
=> radio 버튼과 article 영역이 형제 위치, 혹은 article이 radio버튼의 자식 위치에 있어야 한다!
=> 그래야 radio버튼이 article를 참조할 수 있다
문제에서 #content영역안에 article이 출력된다라고 명시되어 있어서,

<div id="content">
  <div class="article"></div>
</div>

위와 같이 무조건 #content안쪽에 article이 있어야 한다고 착각함.
=> nav영역에 article를 생성하고, 절대 좌표를 활용하여 위치를 조정하면 된다.
input[type=“radio”]태그들의 눌림여부는 :checked 선택자로 체크가능

#menu1:checked ~ #story1,
#menu2:checked ~ #story2,
#menu3:checked ~ #story3 {
  display: block;
}

위에서 깨달은 radio와 article의 위치상의 문제해결법을 여기서도 적용하려 했지만, 되지 않았다.
레이아웃 왼쪽의 Quick Menu의 라디오버튼은 무조건 Quick Menu안에 있어야 하는 상황이다.
=> input[type=“radio”]의 기능을 적용시킬 수 있는 label 태그를 활용!!

<div id="quick-menu">
  <label for="menu1" class="qmenu-item">quick1</label>
  <label for="menu2" class="qmenu-item">quick2</label>
  <label for="menu3" class="qmenu-item">quick3</label>
</div>

nav영역의 menu버튼들과 같은 기능을 수행할 수 있어야 한다 해서 처음에는 menu버튼들과 article이 있는 영역에 같이 배치되어있어야 한다고 생각했다.
그러면 절대좌표 사용하면서 일일히 하나씩 배치를 다시해야하는데, 문제에선 그 좌표에 대한 정보는 존재x
=> label태그의 for속성을 활용하니까 해결을 할 수 있었다.
"기존 radio버튼과 같은 기능을 수행할 수 있게" 라는 문구가 큰 힌트!

기타사항

serif글씨체 적용

본문 기본 글씨체가 serif이면?

* {
  font-family: serif;
}

font-family 속성 활용하면 된다

구글 웹 폰트

link에서 font이름 어떻게 알아낼지 궁금하였지만,

<link
  href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap"
  rel="stylesheet"
/>

family= 속성 부분을 보면 알 수 있었다.

a태그 밑줄 해제 및 그림 테두리 해제

구글링 해본결과,

a {
  text-decoration: none;
}
img {
  border: 0;
}

그림 테두리 해제를 위한 속성이 따로 있는 줄 알았지만, 단순히 border: 0;을 해도 적용이 된다.

left, right, 그리고 footer의 배치
- clear: both;
nav영역의 탭바 구현
Quick Menu 구현
기타사항