태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
'css'에 해당되는 글 3건이 검색되었습니다.
  1. 2009/10/28 float속성 사용시 배경이 없어지는 경우 (3)
  2. 2009/01/22 [표준코딩] clear:both 스타일 요소 알아보기
  3. 2009/01/15 IE전용, IE Developer Toolbar (표준코딩, 사이트구조분석 도움 툴) (7)
인터넷(Internet)/표준코딩     2009/10/28 11:04

CSS 에서 float 속성 사용할 경우 잘 나오던 배경이 사라지는 경우가 있습니다.

예를 들어
CSS 예제1
.wrap {width:500px; background-color:red;}
.left {float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제1
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>


위와 같이 두개로 분리한 영역을 감싸는 영역의 배경이 사라지는 경우죠~

이런 현상은 class="wrap" 이 적용된 영역의 높이가 0px 로 인식도기 때문에 보이지 않는 경우인데..
이유는 float 란 녀석의 속성때문에 그렇습니다.

float란 속성은 div 뿐 아니라 대부분의 코드에 적용가능한 속성인데..
이 속성이 있는 코드들끼리 영향을 주고 받습니다.

즉 위 예제에서 본다면 wrap 과 left, right 는 서로 영향을 미치지 않기 때문에 wrap 속에 left, right가 있더라도 높이가 0이 되는 것이죠.
이 문제를 해결하려면 float 영향을 받아야 하는 코드에 float 속성을 함께 써 주면되겠죠.
불필요한 곳에  float 를 사용하면서 틀어질 수 있는 그리드는 clear:both; 속성으로 방지해 주면됩니다.

아래에 변경된 예제입니다.
CSS 예제2
.wrap {float:left; width:500px; background-color:red;}
.left {clear:both; float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제2
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>

Posted by 아스크림
TAGcss, float, 표준코딩
Trackback 0
Comment 3
COMMENT
  1. sdadsadasd

    asdas

    2010/01/08 21:34  [ ADDR : EDIT/DEL : REPLY ]
  2. BlogIcon sdadsadasd

    asdsaf

    2010/01/08 21:34  [ ADDR : EDIT/DEL : REPLY ]
  3. 남영훈

    남영훈

    2010/01/08 21:48  [ ADDR : EDIT/DEL : REPLY ]
인터넷(Internet)/표준코딩     2009/01/22 16:55
clear:both; 는 float 설정을 초기화 해주는 옵션입니다.

다음과 같이 나란히 두개의 영역이 나오게 <div> 태그에 float 속성을 주겠습니다.

1번
2번
<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="float: left">2번</DIV>

float속성에 left를 기입해 연속적으로 나타나게 합니다.

그렇다면 두번째 <div>에 clear:both  속성을 넣으면 어떻게 될까요?
속성을 부여받은 태그는 이전 태그의 float 속성을 말그대로 clear 해 줍니다.
그래서 위 예제에 적용하면 2번이 아래로 떨어지게 됩니다.

1번
2번
<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="clear:both; float: left">2번</DIV>

붉은 색으로 표시된 clear 속성을 삽입결과 2번 div 가 아래로 떨어지는 걸 보실 수 있습니다.


이 예제는 clear:both 에 대해 알아보기 위한 예제입니다. (실제 코딩에서는 약간 다르겠죠. ^^;;;)


Posted by 아스크림
TAGclear:both, css, 표준코딩
Trackback 0
Comment 0
COMMENT
인터넷(Internet)     2009/01/15 16:23

IE Developer Toolbar 를 소개합니다.

마이크로소프트사의 Internet Explorer(이하 IE) 에서 작동하는 S/W 입니다. 공식적으로 마소에서 배포하는 S/W 이구요.

국내 높은 IE점유율로 IE에서만 잘 보이면 장땡이던 시절이 있었습니다. 그때는 지금과 같이 전문 HTML, XHTML, CSS 코더가 따로 있지 않고 디자이너나, 프로그래머가 병행해서 처리했었죠. 그 만큼 중요하게 생각하지 않았던 부분입니다.

지금은 많이 나아졌지만 국내 웹사이트는 비정상적으로 제작되곤 했죠. 해외에는 뜨지도 않는 그래픽요소가 너무 가득하고, 필요한 정보를 전달하기 위한 사이트구조라기 보단, Look&Feel, 보기 좋은 것에 더 신경을 썼습니다. 물론 디자인이란 것이 보기 좋아야 하지만 웹이란 특성상 디자인은 사용자 UI를 위한 디자인이어야 하는데 디자인을 위한 디자인이었다고 할 수 있죠.

IE Developer Toolbar 는 모든 브라우저를 지원하진 않지만 최근 IE도 W3C 웹표준을 준수한 브라우징을 지원하기에 표준을 적용한 사이트 개발에 많은 도움이 될 것 같습니다.

설치 방법과 사용법은 쉽습니다.

1. 프로그램 다운로드

마이크로소프트사 에서 직접 다운 받을 실 수 있어요. --> http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

여기서 바로 다운 받으시려면 -->

IEDevToolBarSetup.msi


2. 다운받은 파일을 설치합니다.

3. 간단한 설정 (IE 7 기준)

설치 후 브라우저 상단 메뉴에서 간단한 셋팅을 합니다.
'도구 > 추가 기능 관리 > 추가 기능 사용 또는 사용 안 함' 선택

메뉴 선택


IE Developer Toolbar, IE Developer Toolbar BHO 항목을 '사용' 으로 설정합니다.

추가 기능 관리


'확인' 버튼을 누른 후 브라우저를 모두 끄고 새로 띄우세요.

이제 프로그램을 활성화하겠습니다. 브라우저의 제일 오른쪽 '>>' 버튼을 클릭 후 프로그램을 활성화 하세요.

Toolbar 활성화


활성화 하면 브라우저 하단에 툴바가 나타납니다.

브라우저 하단 툴바 구동


여기 까지가 설치 및 프로그램 시작 입니다.

이제 몇가지 주요 기능을 소개하겠습니다.

4. 사용하기

<영역별 기능>

IE Developer Toolbar


  • A 영역 : 메뉴 영역
  • B 영역 : 태그 구조도 (선택 사이트의 태그 구조가 트리형태로 디스플래이 됩니다. 태그의 위치를 쉽게 찾을 수 있습니다.)
  • C 영역 : 선택 태그의 속성 표시 (선택한 태그에 사용된 속성이 표시됩니다.)
  • D 영역 : 선택 태그에 적용된 CSS 표시


만약 <div class="sample" style="width:500px;"> 란 태그가 있다면
B영역엔 - style 500px 라고 나오고
C영역엔 - css에서 sample로 정의된 스타일이 표시됩니다.


<메뉴 기능>

  • File
    • Undo All - 조작된 상태를 초기화 해 줍니다.
  • Find : 원하는 태그를 찾습니다.
    • Select Element by Click - 브라우저에서 사이트를 특정 요소(이미지, 택스트 등..)를 클릭하면 해당 위치와 속성을 보여줍니다.
  • Disable : 사이트에 적용된 기능을 미적용 상태로 보여줍니다. Script, Popup, CSS 세가지를 미적용 상태로 확인 할 수 있습니다.
  • View : 하위 메뉴에 있는 요소를 시각적으로 보여줍니다.

View 메뉴의 Link Paths 선택시


  • Outline : 하위 메뉴에서 선택한 요소를 외곽선를 그려줍니다.

Outline 메뉴의 DIV Elements 선택시

  • Images : 이미지에 대한 정보를 브라우저에 표시해 줍니다.
  • Cache : 각종 캐쉬관련 정보를 지우거나, 비활성화 시켜줍니다.
  • Tools : 브라우저 사이즈를 일정한 포멧으로 조정할 수 있습니다. 또 칼라 피커와 같은 툴을 제공합니다.
  • Validate : 코드를 검사할 수 있는 페이지로 연결해 줍니다. HTML, CSS 의 문법, 유효성등을 체크할 수 있습니다.



여기까지네요. ^.^



Posted by 아스크림
TAGcss, IE Developer Toolbar, W3C, W3C 웹표준, 표준코딩
Trackback 0
Comment 7
COMMENT
  1. BlogIcon cdmanii

    오 이거 좋네요 은폐시켜둔 사이트들도 이걸로는 벗겨질려나요 ? 해봐야겠네요 ㅋ

    2009/01/15 17:21  [ ADDR : EDIT/DEL : REPLY ]
  2. BlogIcon 또자쿨쿨

    안녕하세요.
    블로그검색 온타운 쥔장입니다.
    막 등록하였습니다만, 지금은 서버이전하면서 서버호스팅 업체에서 DNS에 아이피를 잘못 입력해서 연결이 안되고 있네요.
    좀 있다가 검색해보세요~
    그럼 또 뵙겠습니다~

    2009/01/15 18:06  [ ADDR : EDIT/DEL : REPLY ]
  3. BlogIcon please

    아스크림님, 인터넷 툴바에 대한 지식도 상당하시고, 도대체 못하는 게 뭔가요? ^^;;;

    2009/01/15 23:46  [ ADDR : EDIT/DEL : REPLY ]
    • Reply BlogIcon 아스크림

      아니예요. 이건 제 직업과 관련있는거라 알고있을 뿐입니다. 전.. '난 도대체 뭘 잘하나?' 라고 한숨 쉴 때가 많은데.. 이렇게 매번 덧글 남겨주셔서 감사드려요.~

      2009/01/16 01:20  [ ADDR : EDIT/DEL ]
  4. 땡슈

    감사히 받아가고자 글 남깁니다. ^^ 공유 감사합니다.

    2010/02/26 11:28  [ ADDR : EDIT/DEL : REPLY ]