메뉴 건너뛰기

Dev tips

HTML / CSS HTML & CSS Tip

taknim 2008.09.23 02:45 조회 수 : 10634 추천:2298

http://bluesky.springnote.com/pages/375557
HTML의 속성 div와 span의 차이점

HTML의 element를 크게 2가지로 구분하면 화면에 표시되지 않는 element와 div, p, table...과 같이 화면에 표시되는 elementfh 나눌 수 있다.

또한  화면에 표시되는 element를 다시 두가지로 나누어 분류하면 block-level과 inlne-level로 구분할 수 있다.

  • 화면에 표시되지 않는 element
  • 화면에 표시되는 element
    • block-level
    • inline-level

div와 span는 동일한 역할을 수행하며 그 역할은 바로 content를 group화 해주는 기능이다.

css를 그룹별로 지어주기 편하게 해주기도 하고, id를 부여하여 한 영역에 대해 javascript를 통해 동적으로 변화하게 해줄수도 있는 편리한 element이다.

동일한 역할을 수행하는 이 두 element가 가지는 차이점은 바로 div는 block-level element이고 span은 inline-level element라는 것이다.

 

block-level은 줄단위로 block를 묶어주는 기능을 하며

inline-level은 그보다 좀더 좁은 범위인 줄 안에서 묶어주는 기능을 한다.

결국 block-level의 그룹화를 해주는 div를 사용하면 한 줄에 1개의 div가 존재하게 되고

반면 inline-level의 그룹화를 해주는 span은 한줄에 여러개의 span의 그룹화된 content가 위치 할 수 있게 된다.

 

이에 대한 비교는 직접 연속하여 그룹화 된 요소를 출력해보면 금방 알 수 있다.

  1. <div style="border:1px gray solid;">block-level element</div>
    <div style="border:1px gray solid;">block-level element</div>
    <span style="border:1px gray solid;">inline-level element</span>
    <span style="border:1px gray solid;">inline-level element</span>

 

또한 block-level element가 한줄을 다 차지한다 해도 자신을 포함한 element가 허용하는 한도내에서만 차지한다.

만일 테이블의 셀안에 div를 넣게되면  그 셀의 크기가 허용하는 범위 내에서 한 라인을 차지하게 된다.

즉 테이블의 열이 여러개 존재하게 되면 이는 눈으로 보기에는 동일한 한줄에 그 셀의 열의 수 만큼 div가 존재하게 되는 것이다. (엄밀히 말하면 테이블의 각 셀마다 독립된 block이 생성되게 되는 것이다.)

  1. <table width="400">
  2. <tr>
    1. <td><div style="border:1px gray solid;">block-level element</div></td>
    2. <td><div style="border:1px gray solid;">block-level element</div></td>
  3. </tr>
  4. </table>

 

Style의 속성 display와 visibility의 차이점

visibility 속성은 엘레멘트에 의하여 생성된 박스를 표현할 것인가를 지정한다.

만약 어떤 테이블이나 이미지나 그밖의 요소에 대하여 style="visibility:none;" 과 같이 스타일을 주었다면 해당 요소는 화면에 보이지 않게 되지만 생성된 박스는 공간을 차지하고 있다.

즉 visibility 속성은 보이는 것에 대한 속성을 결정하지만 박스의 생성은 이미 되어있는 상태이다.

반면에 display 속성은 박스의 생성 또한 금지하게 하는 속성이다.

따라서 어떤 요소에 대하여 style="display:none;" 과 같이 스타일을 주었다면 해당 요소는 화면에서 아예 없던 것과 같이 공간을 차지하지 않게 된다.

 

<Input type="file"> 찾아보기 버튼을 이미지로 대체하기

파일 업로드시 찾아보기 버튼을 이미지로 이쁘게 출력하는 방법으로 기존에는 input type="file"인 input 메뉴는 style="display:none;"으로 숨기고 그 자리에 text 박스와 image로 대체하는 꼼수?를 자주 사용했었다.

  1. <script language="javascript">
    1. function fileUpload() {
      1. // file input form의 찾아보기를 선택한 것과 같은 효과
      2. document.form.fileUpload.click();
      3. //fileUploadText text input form에 click()을 통해 찾아보기한 파일의 주소를 넣어주어 file이 업로드 된 것처럼 보여준다.
      4. document.form.fileUploadText.value = document.form.fileUpload.value;
    2. }
  2. </script>
  3. <form name="frmRecomm">
    1. <input type="file" name="fileUpload" style="display:none;" />
    2. <input type="text" name="fileUploadText" />
    3. <img src="/search.jpg" onClick="javascript:fileUpload();" />
  4. </form>

 

허나 Explorer 7이 나오면서 위와같은 꼼수를 사용하면 Access Denied와 같은 에러 메세지를 보게 된다.

보안정책과 관련해서 해당 꼼수에 대해서 Default로 차단이 되게 된 것이다.

 

이와 관련해서 찾아보기 버튼을 이미지로 대체하기 위해서 몇몇 대안들이 나왔는데 그 중 2가지를 말하자면

  1. text input form과 찾아보기 이미지를 화면에 출력시킨후 찾아보기 버튼위에서 onMouseMove일때 찾아보기 버튼의 위치를 div로 설정해주는 것
  2. text input form과 찾아보기 이미지를 화면에 출력시킨후 찾아보기 버튼위에 file input form을  span안에 싸서 file input form의 찾아보기 버튼을 이미지 찾아보기 버튼의 위치 위에 오버랩 후 opacity=0을 주는 것

 

1번이 더 설명이 짧지만 실제로 소스를 짜보면 2번이 훨 간단하다.

이유는 1번의 경우 text input form에 마치 file input form에 데이터가 들어간 것처럼 처리를 해주어야 하고, onMouseMove일때 찾아보기 이미지 버튼위에 찾아보기 버튼을 올려주기 위해 div나 span으로 영역을 지정해준 후 javascript로 onMouseMove의 경우에 대한 처리가 필요하기 때문이다.

2번은 반면에 input form을 그냥 고정을 하면 된다.

 

2번 방법에 대한 소스를 보자면 아래와 같다.

  1. <script language="javascript">
  2. function fileUpload() {
    1. //fileUploadText text input form에 click()을 통해 찾아보기한 파일의 주소를 넣어주어 file이 업로드 된 것처럼 보여준다.
    2. document.form.fileUploadText.value = document.form.fileUpload.value;
  3. }
  4. </script>
  5. <form name="frmRecomm">
    1. <input type="text" name="fileUploadText" />
    2. <span style="position:absolute; overflow:hidden; width:54px; height:18px; margin-top:1px; background-image:ur(/search.jpg);">
      1. <input type="file" name="fileUpload" style="opsition:absolute; left:-20px; width:0px; height:20px; filter:alpha(opacity=0);" onChange="javascript:fileUpload();" />
    3. </span>
  6. </form>

 

내가 만든 소스는 완벽해!

라고 착각한는 분들은 자신이 만든 소스를 체크해보라!

http://www.w3.org/

좌절하는 사람 몇몇이 보인다.

 

올바른 HTML 태그 사용 예제

List
  1. <ul> 
    1. <li>리스트</li>
    2. <li>리스트</li>
    3. <li>리스트</li>
  2. </ul>

Table
  1. <table summary="">
    1. <caption></caption>
    2. <thead>
      1. <tr> 
        1. <th></th>
        2. ...
        3. <th></th>
      2. </tr>
    3. </thead>
    4. <tbody>
      1. <tr> 
        1. <td></td>
        2. ...
        3. <td></td>
      2. </tr>
    5. </tbody>
    6. <tfoot>
    7. </tfoot>
  2. </table>

<caption>...</caption> : 제목을 알려주는 태그

<th>...</th> : content중 헤더임을 나타내는 태그

<thead>...</thead>, <tbody>...</tbody>, <tfoot>...</tfoot> : 내용을 그룹화 해주는 태그

 

 

CSS 권장 호출 방법
  1. <style type="text/css"> 
    1. <![CDATA[ 
      1. @import "css경로";
    2. ]]>
  2. </style>

 

CSS float(유동) 속성을 이용한 Layout 구성에 대하여 -> display속성을 통한 재배치를 권장.

웹표준에 관한 책을 읽고 있던 중 흥미로운 CSS사용법이 하나 있길래 소개한다.

웹페이지를 구상하고 화면을 나눌 때 FrameSet의 Frame으로 아예 화면에 틀을 나눠버리거나 Table의 Tr, Td 속성을 이용해 구역을 나누는게 일반적인 방법이다.

가장 직관적이며 구성을 만들기가 쉽기 때문이다.

이제부터 설명하는 내용은 table이 아닌 CSS의 float 속성을 사용하여 Layout을 표현하는 방법이다.

이러한 구성이 왜 좋은가에 대해서는 아래 소개하는 사이트를 참고하기 바란다.

위의 글을 읽어보면 알게 되겠지만 정리를 하면

  • Table Layout은 2차원 화면상의 구역을 논리적으로 나눈 것
  • CSS float 속성을 이용한 Layout은 1차원적으로 나열된 Content 박스들을 화면에 보기좋게 위치시키는 것

위와 같이 정리가 되겠다.

 

결국 float속성은 CSS를 이용해 화면에 float속성을 부여한 박스를 위치시키는 위한 설정 속성이며 이를 통해 CSS를 이용한 화면 구성이 가능하다는 것을 알 수 있다.

float란?

float속성은 문자 그대로 흐름을 말한다.
흐름에 대해 생각해보면 어려운 것이 아니다.
먼저 우리는 책을 읽을 때 왼쪽에서 오른쪽으로, 위에서 아래로 읽어 나간다.
이러한 보통의 흐름을 정상유동이라고 한다.
오른쪽에서 왼쪽으로, 아래에서 위로 흐르지 않는다.
어떤 부분에 style로 float를 지정하게 되면 그 부분은 는 흘러가야 한다. 화면상 어디론가로... 그 속성은 먼저 하나의 박스로 인식이 된다.
흘러가기 위해서는 흘러갈 대상이 필요하기 때문에 그 대상을 지정하는 구역인 박스가 먼저 생성되어야 한다.

 

사용은 아주 간단한다.

  1. <style>
    1. .leftContent { float:left;}
    2. .rightContent { float:right;}
  2. </style>
  3. <div id="leftContent">
    1. 왼쪽 내용
  4. </div>
  5. <div id="rightContent"> 
    1. 오른쪽 내용
  6. </div>

 

사실 웹표준에 관해 언급하는 대부분의 문서들에는 위와 내용에 대해서 언급하며 효율적인 구성을 이야기하고 있다.

하지만 난 위의 방법보다는 block과 inline의 차이점을 이용한 더 간단한 방법에 대해서 이야기를 하고자 한다.

float의 특성이 적용되면 먼저 block레벨의 element는 inline레벨의 element로 변하게 된다.

유동이 된다는 것은 곧 한 라인에 자신이 채워진 나머지 영역이 생기게 되는 것을 의미하며 이는 block레벨에서 inline레벨의 요소가 된다는 것을 의미하기 때문이다.

그럼 위와 같은 float를 통해 나누는 것은 의미가 없다고 생각한다.

float가 좋은 역할을 하는 부분은 사실 위와 같은 레이아웃의 구성이 아닌 텍스트와 이미지의 재배치와 관련이 있다.

이미지가 혼재한 기사에서 이미지를 끼고 텍스트들이 흘러가도록 만들기 위해 부여되는 옵션이지 div로 감싼 내용을 화면에 적절하게 배치시키기 위한 속성은 아니다.

float를 하게되면 display속성은

 

무료 웹폰트

이 카테고리에 들어있어야 할 Tip인지는 애매모호하지만 일단 적어놓는다.

김어진 정자체 (엽토체)

http://jeongjache.ez.ro

소이폰트 (바른체,뜰,논,울타리 등 굉장히 많음)

http://soyafont.com

풀잎체 엔터 폰트

http://typoenter.net/

티티체

http://ttcgi.com/info_0_ttche.php

seevaa9

http://seevaa.byus.net

화이트데이체

http://white-day.pe.kr

 

화면전환효과 주기

메타 태그에는 페이지 진입과 아웃시 화면 전환 효과를 설정하는 기능이 있습니다.

한때 자주 쓰이던 방식이지만 오래된 영화처럼 촌스러운 느낌이 들어서 요즘에는 거의 사용되지 않고 있는 효과들입니다.;;;

태그는 아래와 같이 사용하면 됩니다.

  1. <META HTTP-EQUIV="Page-Enter" content="BlendTrans(Duration=1,Transition=5)">
  2. <META HTTP-EQUIV="Page-Exit" content="BlendTrans(Duration=2,Transition=11)">

Transition 값

Transition=0 : 가운데로 모으기 (박스 형태)

Transition=1 : 밖으로 펼치기 (박스 형태)

Transition=2 : 가운데로 모으기 (원 형태)

Transition=3 : 밖으로 펼치기 (원 형태)

Transition=4 : 위로 닦아내기

Transition=5 : 아래로 닦아내기

Transition=6 : 오른쪽으로 닦아내기

Transition=7 : 왼쪽으로 닦아내기

Transition=8 : 세로 블라인드

Transition=9 : 가로 블라인드

Transition=10 : 가로 체크 무늬

Transition=11 : 세로 체크 무늬

Transition=12 : 흩어 뿌리기

Transition=13 : 수직 안쪽으로 나누기

Transition=14 : 수직 바깥쪽으로 나누기

Transition=15 : 수평 안쪽으로 나누기

Transition=16 : 수평 바깥쪽으로 나누기

Transition=17 : 계단 모양 왼쪽 아래로

Transition=18 : 계단 모양 왼쪽 위로

Transition=19 : 계단 모양 오른쪽 아래로

Transition=20 : 계단 모양 오른쪽 위로

Transition=21 : 가로 실선 무늬

Transition=22 : 세로 실선 무늬

Transition=23 : 순서없이 전환

 

HTML 태그로 배경색 그라데이션 효과 주기
  1. <style>
    1. body{filter='progid:DXImageTransform.Microsoft.Gradient(gradientType=0,StartColorStr=#7983d5,  EndColorStr=#ffffff)'}
  2. </style>

 

CSS의 네이밍도 대소문자를 구분한다.