2023. 2. 14. 23:54ㆍ프론트엔드 과거의 흔적
오늘은 웹 개발에 있어서 가장 필수적인 부분인 HTML과 CSS, JavaScript가 각각 어떤 역할을 하는지를 배웠다. 또한 기초적인 HTML의 구성 요소와 문법, 시멘틱(semantic)요소를 사용하여 사람과 컴퓨터가 읽기 쉬운 코딩을 하는 법과 그래야 하는 이유 등에 대해 생각해 보는 시간을 가졌다.
HTML은 웹 페이지 혹은 웹 앱의 기본적 틀을 마크업하는 언어이고, CSS는 HTML로 작성된 뼈대에 살을 입히고 색을 칠하는 수단이라고 할 수 있으며 자바스크립트는 그럴듯한 겉모습을 갖춘 코드에 동적 반응을 부여하는 역할을 한다.
자주 사용하는 HTML 요소로는 <head>, <header>, <meta>, <title>, <footer>, <h> 그룹 태그, <a>, <div>, <nav>, <ul>, <ol> 등이 있고 이외에도 input 태그나 label 태그, button 태그 등이 있다.
input 태그는 생각보다 다양한 속성 값을 부여할 수 있었다! 따로 자바스크립트나 다른 장치를 이용해서 구현하는 줄 알았던 년도나 체크박스, 드롭다운 등의 요소도 HTML로 구현이 가능하다는 사실이 흥미로웠다.
동시에 여러 종류의 태그들이 제각기 쓰임이 다 다른 것을 보면서 작성하고자 하는 의도에 가장 어울리는 태그를 사용하도록 노력하는 것의 중요성을 배웠다. 한편 <div>태그가 시멘틱 요소와 가장 거리가 먼 태그라는 사실을 알게 되었는데, 각각의 요소의 역할에 맞게 <head>, <main>, <footer> 등의 태그를 사용할 경우 실무에서 협업을 할 때 각각의 태그와 그 내용이 어떤 것일지 쉽게 알 수 있어 업무적으로 유용하며, 여러 검색 엔진에 노출되는 기준을 생각해 보아도 제목과 주요 내용이 정확하게 구분된 글이 <div> 태그로 가득 찬 글 보다 훨씬 높은 노출율을 보일 것이다. 즉 시멘틱 마크업을 하는 것은 사람과 컴퓨터가 모두 수혜를 볼 수 있는 바람직한 코드 작성법인 것이다.
어제는 OT의 비중이 월등히 높았고, 오늘이 사실상 첫 수업을 들은 날이다. 어제 배운 개념인 메타인지를 곱씹어보면서 하루의 끝에 반드시 자신을 점검하는 말을 스스로 던져보아야겠다고 다짐했다.
오늘 나는 확실하게 어제보다 성장했을까?
HTML이 어떠한 언어인지 표현할 수 있는가?
시멘틱 요소를 사용한 코딩이 어떤 것이며 그 의미와 중요성을 말할 수 있는가?
필요한 HTML 태그를 찾아서 적재적소에 활용할 수 있는가?
'프론트엔드 과거의 흔적' 카테고리의 다른 글
| [2023.02.16]-Flexbox를 이용한 레이아웃 잡기, 첫 페어프로그래밍 (0) | 2023.02.16 |
|---|---|
| [2023.02.15]-CSS의 기본적 사용법에 대해 배운 날 (0) | 2023.02.16 |
| [CSS]-개념과 기초 문법 (0) | 2023.02.15 |
| [HTML5]-<a> 태그 사용 시 새 창에서 페이지가 열리도록 하는 법 (0) | 2023.02.15 |
| [2023.02.13]-SEB_FE_44기와의 첫 만남 (0) | 2023.02.13 |