gradu 님의 블로그

HTML 이나 리액트 혼자 독학하는 사람들은 이런 경험해본 적 있을 지 모르겠다. PC 로 기깔나게 만든 나의 소중한 첫 웹 사이트를 배포한 뒤,친구들에게 자랑하려고 주소를 보내주고 난 뒤의 반응... "우와 신기해.. 근데 원래 이렇게 짤리는 거야?"뭐?!..난 완벽해. 난 완전해. 난 무적이야...!근데 뭐가 문제인 거야,,, 분명 이쁘게 열려야 할 텐데?  내가 만든 웹 사이트는 모바일이라고 알아서 줄어들어 주지 않는다.. 프론트는 차갑구나... 오늘은 CSS 기초 바로 너머에 있는 기술인 Media Query 에 대해 알아보고 반응형 웹 디자인을 하는 방법에 대해 살펴보려한다. #    RWD, 반응형 웹 디자인이란? 반응형 웹 디자인(Responsible Web Design)이란 웹을 경험하는 ..

페이지를 디자인하다 아이템을 중앙 정렬해야 하는 상황이 있었다. flexBox 와 아직 친하지 않아서 다른 방법을 찾아보았다. 그 중 간단한 방법인 margin: auto; 에 대해서 소개할게. 말 편하게 할게 그냥.    # margin: auto; 가 뭔데 그래서?CSS에서 margin 속성은 요소의 바깥 여백을 지정해 줘 이 때 margin 을 auto 로 설정하면 브라우저가 알아서 처리해 그 기준이 수평 중앙 정렬이야 그러니까 어떤 html 요소에 대해 수평 방향으로 중앙 정렬을 적용하고 싶으면 그냥 margin: auto; 를 작성하면 돼.myContent { width: 50%; margin: auto;}    # 주의할 점 1. 수평 방향으로는 정렬을 하지 않는다 그래서 화면 정 가운데에 요..