[TIL]내배캠 2일차 (HTML에서 몰랐던 특징들, 특히 처음에 언급한 특징)

오늘은 정말 프론트엔드에 대해서 경멸감을 느끼는 날인 것 같다.
현재의 나로서는 서버를 구성하는 것 보다 프론트가 너무 버겁게 느껴진다... 오류 나면 어디 났는지도 잘 안알려주고 심지어 문제 없는 것 처럼 동작하기도 한다...

정말... HTML 특히 CSS는 거의 기억도 안나가지고 답이 없다...

일단 오늘 프로젝트를 구성하면서 막혔던 문제 몇 가지가 있다.
하나는 HTML 자체의 특성인데 tag를 식별하는 방법이 크게 id랑 class가 있다.
그런데 id 속성은 유일한 값을 가지기 때문에 다른 태그에서 동일한 id를 갖을 수 없는 반면, class 속성은 다른 태그에서도 같은 값을 갖을 수 있다.

다른 하나로는 HTML 태그에는 dataset 속성을 사용할 수 있다.
특징으로는 data- 로 시작하며 그 다음에는 이름을 원하는대로 지을 수 있다.

추가적으로 알게 된 것은 html 태그 속성 중 onclick="function_name()" 속성이 있는데 이는 해당 속성이 있는 요소를 클릭하면 명시된 함수를 호출한다. 그런데 중요한 부분은 함수의 파라미터로 해당 태그에서의 속성값을 넣은 것이다.
예시 코드는 아래와 같다.

<button type="button" data-post_id="1" class="btn btn-outline-secondary" id="modify_info" onclick="modify_member(this.dataset.post_id)">버튼1</button>
<button type="button" data-post_id="2" class="btn btn-outline-secondary" id="modify_info" onclick="modify_member(this.dataset.post_id)">버튼2</button>

function modify_member(post_id) {
  console.log(post_id);
}

각 버튼에 dataset 속성인 post_id가 있는데 버튼을 클릭하여 함수를 호출하면 버튼1은 "1"을, 버튼2는 "2"를 출력하게 된다.

위 코드 내용이랑 id 속성은 유일하다는 부분이 중요한 것 같아 기록해둔다.