김샘의 생활공방

Responsive Web Design 이 용어는 스마트폰의 태동과 함께 시작된 개념으로 무척이나 오래되었죠. 작은 기기(스마트폰, 테블릿pc)에서 웹페이지를 검색하는 시대이다 보니 자연스럽게 최적화된 웹페이지의 레이아웃의 필요성이 대두되어 많은(?) 관심을 가지게 되었지만 아직도 이 기술을 잘 활용하지는 않는 편이죠. 관리가 무척 번거롭거든요. 대부분은 모바일용 사이트를 따로 관리하도록 쇼핑몰 업체 등이 제공하는 것을 보면 간단한 사이트 정도많이 화면에 반응하는 레이아웃을 컨트롤 할 수 있기에 그렇게 생각되네요. 아무튼 이 개념을 연습해 보도록 하죠. Media Queries 알아보기 Media query 는 CSS3에서 소개된 기술로서 특정한 조건이 충족될 때만 발현되는 스타일 시트 블록 구문이라고 ..

css로 화면에 중앙에 내용을 정렬하는 방법은 몇가지 테크닉이 있는데 그 가운데 첫번째로 margin 속성을 이용하는 방법을 설명드리면 아래와 같이 스타일을 지정하는 방법이 있습니다. 위와 같이 div(컨테이너)를 가운데 정렬시키는 방법은 margin:auto 속성을 지정하면 됩니다. 아래에 샘플 코드를 예시합니다. 가운데 정렬 시키기 블록 요소(div와 같이)를 수평으로 중앙에 놓으려면 margin:auto 안녕하세요.

웹페이지에서 css의 padding 속성은 정의된 경계 내부의 요소 콘텐츠 주변에 공간을 생성하는 데 사용됩니다. 요소의 각 면(위, 오른쪽, 아래, 왼쪽)에 대해 패딩을 설정하는 속성이 있습니다. padding-top padding-right padding-bottom padding-left 단위로는 px, pt, cm 등을 쓸 수 있으며, % 형태로 설정 가능하며 inherit 으로 설정하여 부모 객체의 스타일 정보를 그대로 승계 가능합니다. 위 이미지의 스타일 적용 예제는 아래와 같습니다. 개별적인 padding 값을 설정하기 이 div(컨테이너)는 위쪽은 50px, 오른쪽은 30px, 아래쪽은 50px, 왼쪽은 80px 의 padding 값을 부여했습니다.