💬 들어가며 마크업과 CSS 를 하다보면, 상자 안에 가운데 정렬해 아이콘을 넣어야 할 때가 있다. 가로 정렬, 세로 정렬등이 있지만 이번에는 세로로 가운데정렬을 하는 경우를 살펴보자. 위와 같은 예시 이미지 처럼, 반응형에 맞춰 input 창의 세로 높이도 조절이 될때마다 그에 맞게 눈동자 아이콘이 가운데에 위치 하도록 해보자. 초보자들은 내가 했던 것 처럼, input 창의 height 값에 맞춰서 대강 가운데에 오도록 했을 것이다. 💡 문제 해결 input 창과 눈 아이콘을 의미하는 button 태그는 같은 레벨에 있을 것이다. 해당 두가지를 div태그로 묶어 relative를 준다. 그렇다면 div창크기에 맞춰 input이 생길 것이고, button은 div태그의 크기에 맞춰서 이동되도록 할 것 ..

태그와 태그는 모두 클릭 가능한 요소이지만, 차이점이 존재한다. 태그 태그 목적 하이퍼링크 생성 클릭 가능한 버튼 생성 탭 순서 탭 키를 이용한 포커스 이동 시 고려됨 탭 키를 이용한 포커스 이동 시 고려되지 않음 전달되는 값 href 속성을 이용하여 다른 페이지 또는 문서로 이동 클릭 이벤트를 처리하기 위해 자바스크립트 함수 또는 폼 제출 사용 스타일 밑줄과 파란색으로 기본 스타일 지정됨 기본 스타일이 없으며, 개발자가 스타일을 직접 지정해야 함 Anchor 태그 Anchor 태그는 어디론가 이동할 수 있는 링크나 페이지내의 특정 영역으로 이동할 때 사용한다. 엔터키로 동작하며 내부엔 text contents 가 있어야한다. 또한 href 가 없이 javascript로 작동하게 하면 안된다는 특징이 있..

HTML 이란? Hypertext Markup Language로 하이퍼텍스트를 작성하기 위해 만들어진 기본적인 웹 언어다. 하이퍼 텍스트 : 단편적인 정보들을 하이퍼링크라는 고리를 이용하여 엮어 다른 문서로 이동하거나 정보를 보내는 등의 다각적으로 정보에 접근할 수 있는 체계를 의미한다. 시멘틱 마크업(semantic markup) 이란? 시멘틱 마크업이란 웹 문서를 구조화하고 내용을 의미론적으로 표현하는데 사용되는 HTML 요소들을 말한다. 시멘틱마크업은 웹 페이지의 요소들이 그들의 의미와 역할을 명확하게 나타내도록 설계되었다. 이는 SEO(검색엔진 최적화)와 접근성을 향상시키는데 도움을 줄 수 있다. 시멘틱 마크업을 사용하면 얻는 이점 검색엔진 최적화 (SEO) : 검색엔진은 문서의 구조와 의미를 파..