박스모델 position 특성



웹 페이지 작성할 때, table 로 구획정리하지않고 div 로 구현한 후, css를 이용해서 조정하는 방법을 사용한다.

근데, 위치 조정할 때마다 헷갈리고 그러네..ㅡ.ㅡ


요점만 간략히 정리해보면서 머리에 쏙 집어넣어야겠다.


소스작성은 대개...


html 에서는 아래처럼 작성하고,


<div class="box1">

hello

</div>


css 에서 아래처럼 작성한다.


.box1 {

  width: 100px;

  height: 200px;

  position: fixed; 

  top: 10px;

  left: 10px;

}


위 예에서 box1 에 position 속성으로 fixed 라는 것을 사용하고 위치를 top 10px, left 10px 라고 적었다.

의미는??

위치 정렬 기준이 fixed이고, 그걸 기준으로 할때 위에서, 왼쪽에서 각각 10px 떨어뜨려놔라~라는 의미다.

fixed는 머고? 그걸 기준으로 할 때는 멀 기준으로 한다는 거여??


흠...이제부터 알아보는거지...


박스모델에 사용할 수 있는 position 속성은 아래 4가지가 있단다.


1. static

2. relative

3. fixed

4. absolute


사용법은 위의 예처럼, 박스모델의 css 에 

position을 fixed, relative, absolute 중 하나로 지정하고 top, left, right, bottom 의 값을 설정해 준다.

이 값들은 원래~위치를 기준으로 위에서 얼마, 왼쪽에서 얼마..등등의 상대값의 의미를 가지게 된다.(응? 원래 위치???)


그럼, 원하는 목적에 따라서 relative를 사용하던지, fixed를 사용하던지, absolute를 사용하던지 해야하겠는데...

각각이 다르게 동작을 할거라는건 당연한거고..어떻게 다른지를 머리에 잘 집어넣어놔야겠는데...


static

이 중, static 이라는 녀석은 position 속성이 주어지지 않았을 때 적용되며, 브라우저는 지가 정해놓은 정렬 기준에 따라 박스모델을 위치시킨다.

아무런 속성을 주지않았을 때, 브라우저가 박스모델을 정렬했을 경우의 위치를 원래 위치라고 하자.


div같은 박스모델이 여러개가 있으면 크기에 따라서 한 줄(좌우방향으로)에 두개 세개씩 위치시키던지, 들어갈 자리가 모자라면 아래로 내리던지 브라우저가 알아서 한다. 이렇게 정리된 위치가 원래 위치다.


static 은 특별히 사용할 일은 없겠다. 안 적으면 static 이니까...


relative 

원래 위치를 기준으로 top, left 등 살짝 위치를 밀어준다.

하지만, 원래 위치에 있을 때의 공간을 그대로 차지하게 되며 다른 박스모델이 그 공간에 침범할 수 없다. 원래 있을 위치에서 이동을 했지만, 그 원래 위치가 차지한 공간에 다른 박스모델이 못 들어간다는거다. 다른 말로 normal flow에 영향을 미친다고 이야기한다. normal flow 라는 건 브라우저가 정렬할 때 고려하는 순서라고나 할까, 브라우저가 정렬을 할 때, 이 공간도 감안해서 정렬을 한다는 거다.


fixed

relative가 원래의 위치를 기준으로 상대값을 지정해줬다면, 이녀석은 기준값이 그냥 브라우저 화면이다.

브라우저 창을 기준으로 top, left등을 지정해준다.브라우저 창 크기가 바뀌어도 말 그대로 fixed 되어있겠다.

중요한 것은 fixed 속성을 가지게 되면 normal flow에서 제거된다. 브라우저가 정렬을 시도할 때, fixed 속성을 가진 박스모델은 제외시킨다. 이녀석이 원래 있던 공간에 다른 박스모델이 들어갈 수 있다. fixed는 그냥 핀으로 콕! 꽂아둔것같다.


absolute

이녀석은 무얼 기준으로 하는가? 이 박스모델을 감싸고 있는 부모 박스 모델의 위치를 기준으로 한다. 단! 이때 부모 박스모델은 static 이 아니어야한다. 만약, static이 아니면서 부모가 없으면 계속 찾아올라가다가 <html>을 만나 부모로 삼는다.

이녀석도 normal flow에서 제거된다.




정리해보면, 브라우저가 기본적으로 가지고 있는 정렬 기준 static이라는 것이 있다. 원래 위치~라는 것이고,


relative : 원래 위치 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간을 감안해서 다른 박스들을 정렬한다.

fixed : 브라우저 창 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간이 없는 듯 다른 박스들을 정렬한다.

absolute : static속성이 아닌 부모 위치 기준 살짝살짝 밀어주기 : 브라우저는 원래의 공간이 없는 듯 다른 박스들을 정렬한다.




이미지 캡쳐는 다음에...














'웹 개발 > CSS' 카테고리의 다른 글

박스모델 div 의 position 특성  (0) 2015.07.02
CSS margin, padding 한줄에 적을 때 순서  (2) 2013.01.09


Posted by 똑똑한 영장류


CSS margin과 padding 한줄에 적을 때 순서


css 에서 박스모델의 margin과 padding을 설정해줄때, 몇가지 방법이 있습니다.


첫째. 각각 다 지정해주는 방법

margin-top: 10px;

margin-right: 20px;

margin-bottom: 15px;

margin-left: 5px;


혹은 margin: 10px 20px 15px 5px;

이때, 순서는 상우하좌 입니다. 시계방향으로 돌아가네요.



둘째. 상하의 margin 이 같고, 좌우의 margin 이 같을 때


margin: 10px 5px;



셋째. 좌우는 같은데, 상하가 다를 때


margin: 10px 5px 25px;


이때, 처음나오는 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고

가운데, 5px 가 좌우 마진입니다.


padding의 경우도 마찬가지입니다.


정리하면, 아래 4가지.


margin: [margin-top] [margin-right] [margin-bottom] [margin-left];


margin: [margin-top] [margin-left = margin-right] [margin-bottom];


margin: [margin-top=margin-bottom] [margin-left = margin-right];


margin: [margin-top = margin-bottom = margin-left = margin-right];





'웹 개발 > CSS' 카테고리의 다른 글

박스모델 div 의 position 특성  (0) 2015.07.02
CSS margin, padding 한줄에 적을 때 순서  (2) 2013.01.09


Posted by 똑똑한 영장류


Chap 11.



진행하는 동안 보이는 페이지의 모습이 바뀔 순간이 왔습니다. 사이트 전체에 적용될 CSS 파일을 작성해서 적용을 할 수도 있겠습니다만, 많은 시간과 노력이 필요합니다.


그래서!!


잘 만들어져있는 CSS 파일을 이용하도록 하겠습니다.


트위터 개발자들이 만들어서 배포하고 있는 부트스트랩 이라는 CSS 프레임워크가 있습니다.

아래 사이트에서 다운받을 수 있습니다.


오늘 현재 버전 2.2.2 가 나왔네요.


http://twitter.github.com/bootstrap


악! 주소가 바뀌었는데, 수정을 못 하고 있었네요..

부트스트랩 주소입니다.


http://getbootstrap.com



다운받아서 압축을 해제하면 bootstrap 디렉토리아래에 css 디렉토리, img 디렉토리, js 디렉토리가 있습니다.


bootstrap 디렉토리 전체를 www 디렉토리 안에 업로드를 합시다.

www/bootstrap/css ... 이렇게 위치가 되겠죠.


그리고 나서, 이 css 파일을 이용하기 위해서 <head>  태그 안에 아래와 같이 작성을 해 줘야 합니다. header.php 를 수정해야겠군요.


<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">


이제 모든 페이지에서 부트스트랩을 이용할 수 있습니다.


부트스트랩은 많은 것이 가능합니다. 사이트에서 살펴보면 자바스크립트를 이용한 재미난 기능들도 많습니다. 따로 부트스트랩 카테고리를 만들어서 기능별로 하나씩 포스팅을 할 계획입니다. 근데, 너무나 쉽게 되어있어서...ㅋㅋ


그럼.. 부트스트랩 CSS가 제대로 적용이 되는지 확인해보겠습니다.


header.php 에 위와 같이 해 두고, index.php 의 회원가입 링크나 로그인 링크를 수정해 보죠.


<a href="./member/signup.php">회원가입</a>


현재 위처럼 되어있는 <a> 태그에 아래와 같이 클래스를 먹여줍시다.


<a href="./member/signup.php" class="btn">회원가입</a>



부트스트랩 적용 전에 아래처럼 보이던 index.php가



적용 후, 아래와 같이 포맷팅이 되었습니다.




단순히 <a>태그에 btn 클래스를 적용하는 것만으로 '회원가입'과 '로그인' 링크가 기본 버튼 모양으로 표시됩니다.


부트스트랩이 적용되는 것은 확인했습니다.


이제 첫페이지 레이아웃을 간단히 구현해 봅시다.



기본 프레임은 부트스트랩을 이용하고, 사이트에 차별화된 내용은 추가적으로 작성해야겠습니다.

이름은 main.css 라고 붙입시다.

header.php 에 아래 내용을 추가하고, www 안에 main.css 파일을 만들어줍시다.

<link href="./main.css" rel="stylesheet">

CSS파일의 첫줄에는 아래 내용을 기록해서 인코딩이 UTF-8 임을 알려줍니다.


@charset "utf-8";


앞서 <div>에 header, content, footer 라고 클래스를 먹여놓은 것이 있었습니다.


해당 클래스를 main.css 에 설정을 해봅시다.



@charset "utf-8";

.header {
    border: 4px solid #f00;
    margin-bottom: 10px;
}

.content {
    border: 4px solid #f00;
}

.footer {
    margin-top: 10px;
    border: 4px solid #f00;






첫페이지가 위의 모습으로 나타나내요.


앞으로 CSS도 카테고리를 만들어서 공부될만한 것들 올려보겠습니다.


오늘은 여기까지 하겠습니다. ㅎㅎ


이상!








Posted by 똑똑한 영장류

 

다음 지도 API v3를 이용해서 간단한 기능의 웹 페이지를 작성하던 중에 발견한 내용을 정리합니다.

다음 지도 API v3 를 이용해보려고, 우선 다음에서 제공하는 매뉴얼대로 테스트 페이지를 작성해서 실행해 보았습니다. 시키는대로 하면 아래와 같이 이쁘게 지도가 표시가 됩니다.


다음 지도 API v3 홈페이지 : http://dna.daum.net/apis/maps/v3

간단하게 API 사용법을 살펴본 후에, 제가 만들어보려던 웹 페이지를 만들면서 트위터의 부트스트랩 CSS 파일을 불러오도록 소스를 작성하였습니다.
트위터 부트스트랩 홈페이지 : http://twitter.github.com/bootstrap/

그렇게 트위터의 부트스트랩 CSS를 적용시키니까, 아래와 같이 지도가 제대로 표시가 되지 않더군요.


헐~...
트위터 부트스트랩에 있는 CSS 파일의 내용과 맞지 않는 부분이 있는 것 같습니다.
그래서 잠시 들여다보고 이유를 찾아냈습니다.

bootstrap.css 파일을 열어서 img 부분을 살펴보면 아래와 같습니다.

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

다음 지도 API 가 지도를 특정 div 내에 img로 올리는 모양인데, max-width: 100%; 저부분이 문제인거 같습니다.

주석 처리한 후 확인을 해보니, 정상적으로 잘 보입니다.

트위터 부트스트랩은 원래대로 두고, 웹 페이지에 아래와 같이 style 을 지정해 봤는데, 소용이 없네요.

#map img {
/*  max-width: 100%; */
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

CSS가 상속이 되니 안 될수 밖에요...
그래서, 아래와 같이...

#map img {
  max-width: none;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

설정무시를 했더니 정상적으로 표시가 되는군요.
트위터 부트스트랩 건드리지 않고, 깔끔하게 해결할 방법을 찾았습니다.



Posted by 똑똑한 영장류