반응형

xhtml 3

박스 모델

박스 모델 페이지 내에서의 모든 태그들은 사각형의 박스 모델로 표현이 된다. content 부분이 내용이 들어가는 부분이다. content 부분은 보이지 않는 ( 패딩, 보더, 마진 미설정시 ) padding, border, margin 으로 둘러싸여져있다. 안녕하세요 ! 반갑습니다. 오늘은 좋은 날씨입니다. 먼저 이해를 돕기 위해 border를 1px , 빨간색 실선으로 설정. 코드를 실행하면 안녕하세요와 반갑습니다.... 가 빨간색 실선으로 붙어서 표시되는 것을 볼수 있다. 그러면, 여기에 margin을 추가해 보자. 위의 코드에서 p { border-width:1px; border-color:red; border-style:solid; margin:5px; } margin을 추가해서 실행해보면, 안..

Web/Css 2007.11.14

스타일시트를 문서에 적용하는 법

CSS(Cascading Style Sheets)를 문서에 적용하는 방법 1. 방법 1 html 문서내에 직접 입력을 하는 방법. 안녕하세요 ! 2. 방법 2 문서 내의 태그에 직접 입력을 하는 방법. 안녕하세요! 3. 방법 3 링크를 이용하는 방법. -- style.html -- 안녕하세요! -- style.css -- p { color:orange; font-weight:bold; } 4. 방법 4 임포트를 이용하는 방법. -- style.html -- 안녕하세요! -- style.css -- p { color:orange; font-weight:bold; } 결과는 모두 안녕하세요! 가 오랜지색으로 굵게 표시 된다. 거의 모든 브라우저에서 적용이 되지만 import의 경우에는 적용이 안되는 브라우저..

Web/Css 2007.11.14

레이아웃 가운데 정렬하기

CSS를 사용하여 레이아웃을 가운데 정렬하는 방법 1. 방법 1 가운데 정렬할 박스 : 박스의 크기는 가로 800픽셀로 가정 오랜지색으로 표현된 부분은 explorer 버그로 인한 설정. 파이어 폭스의 경우에는 오랜지색 필요없음. 현재 익스플로러 사용자가 더 많은 관계로 반드시 필요함. 2. 방법 2 가운데 정렬할 박스 박스의 크기가 800px인 박스의 시작점을 좌측에서 50%인 지점에서 시작( 그렇다면 시작지점이 브라우저의 정중앙이 된다.) 시작지점에서 박스의 사이즈의 반인 400px 만큼 마이너스로 이동하므로 결국은 가운데 정렬이 된다. 쉽게 플러스는 오른쪽, 마이너스는 왼쪽이라 생각하면 된다. 만약 박스의 가로 사이즈가 700px 이라면 -350px가 되어야 한다. 즉, margin-left: -(..

Web/Css 2007.11.14
반응형