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

우선 반응형 웹 디자인을 하기 위해선 마크업을 잘 해야한다. (마크업 이란. 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로 HTML에선 HTML구조를 짜는 과정을 말함) 완성된 모습 코드리뷰 먼저 가장 눈여겨 봐야할 점은 모바일과 웹의 모습을 순차적으로 본다면 순서가 다르다. 이럴땐 order: -1 을 이용하여 순서를 바꿔줘야 한다. 코드를 보면 위에서 순서대로 1,2,3,4 순으로 작성했다. 모두 웹사이트상을 기준으로 작성했다고 생각하면 편하다. 이제 우리는 모바일을 위해 마크업의 순서를 살짝 변경해줄거다. 뭐를이용해서? order : -1; 속성을 이용해서. order 속성을 -1 주면 우선순위가 먼저로 바뀌게 된다. 따라서 모바일의 로그인, 회원가입에 해당하는 2번 memb..