웹 디자인이나 혹은 웹을 사용하시는 분들이 계신가요?

이번 강좌는 웹과 관련이 없으신 분들은 넘어가도 좋습니다^^

 

웹사이트를 제작할때 디자인과 별개로 사용하는 기능들이 있습니다. CSS는 그 중 속해 있는 것이구요.

하나의 웹을 만들기 위해선, HTML이라는 뼈대와 CSS라는 살과 옷이 있습니다.

사람의 인체로 간단하게 설명하자면 머리 몸통 다리 발 이렇게 대략적으로 나누어, 머리에는 눈과 코와 귀가 있어야해! 라고

HTML로 뼈대를 설정해 줍니다. 그곳에 살을 붙여 주는것이 CSS입니다. CSS는 눈에는 쌍카풀, 갈색 눈동자, 긴 속눈썹! 이렇게 뼈대에 살과 멋을 붙여주는 것인데요,

여기에 움직임과 제어를 주는 것이 Java, jQuery 등등이 있습니다.

 

CSS 복사 메뉴를 이해하기 위해 간략하게 설명한 것이니 가볍게 읽고 이해하시면 됩니다.

 

 

sir을 기준으로 설명해 볼까요?

 

 

 

분홍색으로 처리된 영역을 제외한 가운데 부분이 sir의 contents입니다.

너비는 1050픽셀 이네요.(제가 잘못 재서1~2픽셀의 차이가 있을 수 있습니다^^;)이 분홍색 영역은 개인의 피씨 마다 해상도나 모니터 영역의 차이가 있으므로 분홍색이 차지하는 영역의 크기는 각각 다릅니다.

 

 

 

헷갈리니 분홍색 영역을 잘라버리겠습니다.

 

상단 좌측의 로고 보이시나요? 그 부분을 레이어로 따로 만들었습니다.

CSS 복사 기능을 사용해보도록 하겠습니다. 로고 레이어를 클릭 후 상단 메뉴 레이어에서 CSS 복사를 클릭해 주세요.

 

 

 

후에 메모장이나 빈 페이지에, 또는 CSS를 사용하는 프로그램에 붙여넣기 Ctrl + V를 해 주세요.

(저는 이곳에 붙여넣기 하였습니다.)

 

.SIR_로고 {

  position: absolute;
  left: 0px;
  top: 21px;
  width: 54px;
  height: 36px;
  z-index: 2;

}

 

CSS에서 해당 컨텐츠의 픽셀값을 일일 재고 측정할 필요 없이 전체의 너비(width)값에서 SIR로고의 위치값을 계산하여 줍니다.

(클라스 명은 임의로 레이어값으로 먹여지니, CSS에서는 알맞는 클라스 값으로 수정하여 사용하세요~)

 

 

웹을 사용하지 않는 분들께 위의 내용을 간단하게 설명해 드리겠습니다.

 

 

.SIR_로고 { = 로고 레이어

  position: absolute; = SIR로고의 위치값을 틀 없이 자유롭게 지정
  left: 0px; = 왼쪽으로부터 0픽셀
  top: 21px; = 위쪽으로 부터 21픽셀
  width: 54px; = 너비는 54픽셀
  height: 36px; = 높이는 36픽셀
  z-index: 2; = 겹침 요소 위치 선정 2번째

}
​

 

위와같이 편리한 기능을 가지고 있지만, 내가 개설한 HTML의 뼈대와 부모 자식, 속해있는 구조의 속성에 맞추어 CSS를 주어야 하기 때문에 100% 신뢰하고 사용하여선 안됩니다.