본문 바로가기

DIV 가운데 정렬3

[html/css] 수직으로 가운데 정렬 방법 (다섯 가지) [html/css] 수직으로 가운데 정렬 방법(다섯 가지) html/css 배우면서 골치 아픈 부분 중 하나죠. 수평과 수직 중앙 정렬하는 방법이, 왜 이렇게 난해해야만 되는가 다시 한 번 의아해 하며 정리해 보았습니다. 수평 중앙 정렬 방법은 아래 글 참조해 주시고요. div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) [html/css] table 중앙 정렬하기 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) 저작권 관련 공지 바로가기 !important 오늘 배워볼 부분은 수직으로 가운데 정렬하기입니다. 1. 인라인 요소와 인라인 블록 요소의 수직 중앙 정렬 2. table 수직 중앙 정렬 1. 2는 하기 링크 참조해주세요. 또 3번 .. 2014. 6. 11.
[html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) [html/css] div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬) 얼마 전에 div 1개 정렬하는 방법을 알아 보았습니다. [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) 이번 시간에는 div 2개 정렬하는 방법에 대해 알아 볼게요. div가 2개일 때는 조금 더 복잡합니다. 2개 이상의 div는 문장 속에 삽입되는 경우도 있지만, 대부분은 레이아웃을 할 때 자주 사용되지요 그래서, 예제도 레이아웃 중심으로 배워 보겠습니다. STEP 0. 브라우저 기본값 초기화하기(reset) 각 브라우저마다 기본값이 달라, 여백에 약간씩의 오차가 발생하는데.. 브라우저 기본값의 초기화 리셋(reset.css)의 개념 모든 브라우저에서 통일된 화면을 볼 수 있도록 초기화(reset) 하는 과.. 2014. 4. 23.
[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) [html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬) div 태그는 하나 이상의 태그를 마치 그릇처럼 담아서 여러 스타일을 주기에 편리합니다. 즉 div는 여러 요소를 담는 박스라고 보시면 됩니다. 보통 div 1개를 쓰는 경우는 글 속에 삽입하는 경우가 많으므로, css 작성은 인라인 스타일로 작성했습니다. [html/css기초] span, div CSS란? (HTML과 CSS의 차이, CSS 작성법) div 만드는 법 내용 여는 태그와 닫는 태그 사이에 내용을 넣으면 됩니다. 함께 사용할 수 있는 속성 width 너비 height 높이 margin 객체와 객체 사이의 공간 (여기서는 박스를 정렬할 때 사용하기도 함) padding 선과 내용사이의 공간 text-align 박스 안에 .. 2014. 4. 15.