html 클론 페이지 리뷰

html 학습으로 클론한 페이지 코드를 리뷰해주셨다.
어제 section과 article 사용이 헷갈렸는데 전자는 위,아래와 의미적으로 관련이 조금이라도 있을 때 사용하고 후자는 혼자 똑 떼어놔도 괜찮을 때 사용하라고 하셨다. 또 의미와 상관없이 강제로 문단을 나누려고 br을 썼는데 스크린 리더기가 문장을 읽을 때 문단을 분리시켜서 읽으니까 개행을 목적으로 되도록 사용하지 말고 css로 입히라고 하셨다.

css 학습 전에 block과 inline에 대해 정리하는 시간을 가졌다. 그런데 인라인 요소들은 일반적으로 인라인 요소만 중첩이 가능하다는 것을 처음 알았다.

이제라도 알아서 다행이다~ㅎㅎ (긍정회로 on)
오늘 선택자를 배우면서 강사님이 해주신 말씀이 있다.

id는 값을 두 개주면 안돼요! 그런데 진짜 안 되는거 맞을까요? 항상 공부하면서 이런 의구심을 가지세요.

이 말을 듣고보니 진짜 뭐가 안되는거지 싶었는데 바로 또 검증해주셨다. id 값을 태그 두 개에 같이 사용했는데, 에러는 발생하지 않지만 의도와 다르게 사용됐다. 그 값으로 연결된 곳으로 이동하려고 하면, 아이디 값을 두 곳에 줬기때문에 2번으로 이동하고 싶어도 먼저 id 값이 작성된 1번으로만 이동했다. 오늘 복습하면서 꼭 이런 마음가짐으로 공부를 해봐야지 다짐했다.

복습하면서 form 관련 태그들로 약관 동의 예시를 만들었다. 강사님이 주신 예시에서는 각각의 input 태그가 label에 따로 들어가 있었는데 이걸 왜 나눈거지 싶어서 하나로 합쳐봤다.

<label>
      <input type="radio" name="check1">
      <span>약관에 동의합니다.</span>
      <input type="radio" name="check1">
      <span>약관에 동의하지 않습니다.</span>
</label>

여기서 동의하지 않습니다 텍스트를 눌러도 동의합니다의 input에 체크가 된다. 엥 따로 라벨링한 이유가 이거였구나... 덕분에 각각의 label이 그 자식 요소인 input과 연결돼서 사용된다는 것을 제대로 이해했다. input을 분리시켜서 각각의 label에 넣으면 제대로 라벨링 되어서 동의 텍스트를 누르면 동의로 체크돼고, 동의하지 않는 텍스트를 누르면 그것에 체크된다.

css 학습 시간에 선택자에 대해 배웠다. 그 중에서도[속성^="값"],[속성$="값] 이 속성 선택자가 뭔가 답답했다. 얘가 답답하다는게 아니라 이걸 제대로 이해 못하는거 같아서 내가 답답쓰 ㅋㅅㅋ.
전자는 속성 값이 "값"으로 시작하는 것, 후자는 "값"으로 끝나는 것을 선택한다는데 이걸 어떻게 쓴다는 거지 싶었다. 그런데 인터넷에 나와있는 예시를 보자마자 바로 이해했다.

[class^="btn-"] {
	border-radius: 10px;
}
[class$="fail"] {
	background-color: red;
}
[class$="success"] {
	background-color: green;
}

두 개의 버튼이 있고 각각 클래스가 "btn-fail","btn-success"로 되어있다.
공통적으로 스타일링 할 부분이 있으면 [속성^="값"]으로, 따로 스타일링 할 부분은 [속성$="값"]으로 선택한 것이다.

이걸 보니까 선택자를 잘 다루면 굉장히 효율적으로 스타일링 할 수 있겠다는 생각이 들었다.