멋쟁이사자처럼 프론트엔드스쿨 4일차 기록

오늘 수업 내용 

• HTML/CSS 강의

배운 것(new!)

<fieldset>

HTML 양식 속에서 그룹을 만들 수 있는 요소.

• <legend> fieldset 태그 내부에서 그룹의 설명을 제공. (사진에서는 "Choose your favorite monster" 부분에 해당)

<output>

• 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

input 값에 변화가 발생했을 때 form oninput 속성에 전달된 스크립트가 실행된다. 위의 예제에서는 oninput에 result.value(output 태그)의 값을 변경하는 스크립트가 전달되어 있으므로 input이 변경되면 output태그의 값이 변경된다.

<progress>

작업의 완료 정도를 나타내는 태그. 주로 진행 표시줄의 형태를 띤다. 

entity code 

특정 character이나 키보드로 입력하기 힘든 character를 표현하기 위해 사용된다. 

속성 선택자

<div class="purple magicdragon">예시</div>

/*속성 선택자를 이용해 위의 element를 선택하는 방법*/
div[class="purple magicdragon"]
div[class*="magic"] // 비추천
div[class~="magicdragon"]

[attr=value] : Represents elements with an attribute name of attr whose value is exactly value.

[attr~=value] : Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

[attr*=value] : Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

오늘의 팁

• br태그를 사용하면 스크린리더에서 읽을 때 연속해서 읽지 못한다. 따라서 단순히 디자인만을 위해 줄을 바꾸는 경우에는 <br> 태그의 사용을 지양해야 한다.
• b태그보다는 strong태그
• footer 안에서는 구획을 나누지 않는다(div)
• CSS는 태그에 가까운 순서대로 우선순위가 높아 먼저 적용된다 (인라인 > 내부 > 외부)

리뷰

 수업을 안 듣고 혼자 UI 따고 있으면 아무래도 몰입도도 떨어지고 지루한 느낌이라 오늘부턴 CSS도 나간다고 하셔서 나름 열심히 수업을 들어보았다. output태그는 난생처음이라 신기했다. 지금까지 개발을 하면서 semantic 하게 코드를 작성하는 것에 대해 크게 신경 쓰지 않았는데 생각보다 많은 사람들이 신경 써가면서 마크업을 하고 있었다. 여러모로 반성. 선택자도 맨날 까먹고 맨날 구글링 해서 쓰는 게 일상이었는데 오늘을 계기로 좀 더 장기기억으로 전환되지 않을까 기대를 해본다. 근데 왜 난 회고 그룹 안 넣어주시지... 뭐지... 잊힌 건가요... ㅠ0ㅠ

 수업을 듣다 보면 다들 좋은 자료를 많이 공유해주시는데 금방 밀려 올라가고 나중에 보면 이게 무슨 링큰지 기억이 안 나서 눌러보기도 싫어진다. 자료는 아깝고, 북마크를 더 하기엔 북마크 바가 이미 만원이라 팀 노션에 링크 저장 페이지를 만들었다. 모두에게 유용하게 쓰이길!

Reference

• 멋쟁이 사자처럼 프론트엔드스쿨
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset