<abbr>과 <achronym>

# Work/HTML/CSS 2011. 3. 24. 17:08 |
반응형

일부의 텍스트를 생략어(abbreviated form)로 정의하는데는 'abbr' 요소를, 두문자어(acronym)로 정의하는데는 'acronym' 요소를 사용합니다.

abbr요소는 'WWW', 'URL', 'HTML', 'IT'등 한 문자씩 발음하는 단어를 acronym 요소는 'NATO', 'UNESCO', 'SOHO'등 한 단어로 발음하는 단어를 정의하는 점이 다릅니다.

양쪽모두 인라인 요소이며, 인라인 요소와 텍스트를 포함합니다.

abbr요소, acronym요소 모두 title 속성으로 전체 철자 지정이 HTML4.01에서 요구되며 WCAG 1.0 에서도 "우선도3"으로 지정되어 있습니다.

<p>최근 <abbr title="Information Technology">IT</abbr>의 진보에 의해 지금까지 '잠재적 노동력'이었던 주부 등이 <acronym title="Small Office/Home Office">SOHO</acronym>의 형태로 재택근무를 하는 것이 가능해졌다.</p>


또 그 단어가 생략어(abbr)에 해당하는지 두문자어(acronym)에 해당하는지 판단할 수 없을때에는 'abbr'요소로 정의해 두는게 더 좋다고 합니다.'acronym'요소로 정의하면 음성브라우저에서 한개의 단어로 인식하여 발음 하므로 굉장히 일반적인 두문자어가 아닌 경우 사용자가 이해하기 힘들 가능성이 있기 때문입니다.

abbr요소와 acronym요소의 읽는 방법 지정
abbr요소와 acronym요소의 읽는 방법 지정은 HTML과 XHTML에서는 존재하지 않지만 css2의 '음성스타일시트(Aural Cascading style sheet:ACSS)의 한 종류인 'speak' 속성으로 지정할 수 있습니다.
abbr요소를 한문자씩 acronym요소를 한개의 단어로 발음하게 지시하려면 다음과 같이 지정합니다.
(다만 브라우저가 speak속성에 대응하는것이 전재입니다.)

abbr {speak:spell-out;}  /*한 문자씩 발음*/
acronym {speak:normal;}  /*한 단어로 발음*/


[출처]
abbr요소, acronym요소 (웹표준 스터디)


반응형
호정찐
반응형

컨테이너안에 블록 엘리먼트를 만든후, 블록엘리먼트에 마진값을 주면 컨테이너 전체가 마진값을 먹습니다.

이것은 브라우저 오류가 아닙니다. 이런 현상을 마진 통합 현상이라고 합니다. 수평 마진은 예상했던 대로 작동하나 수직 마진은 예상했던 대로 동작하지 않을 것입니다. 수직 마진에 대하여 조금 더 자세히 이해할 필요가 있습니다.

형제끼리 또는 부모와 자식간에 발생하는 수직 마진은 마진끼리 더하기가 되지 않고 인접한 마진끼리 서로 비교해서 큰 값 하나만 적용이 되는데 이런 현상을 마진 통합이라고 합니다.

.A { magin:100px 0; }
.B { magin:50px 0; }

일단 형제간의 마진 통합을 설명할께요. A와 B라는 가상의 블럭이 형제 관계로 존재한다고 가정합니다. A라는 상자의 수직 마진이 100px 이고 B라는 상자의 수직 마진이 50px 이라 칩시다. 상식적으로 계산하면 A라는 상자와 B라는 상자 사이에는 150px의 마진이 존재해야 하는데 그렇지 않다는 것이죠. 50px과 100px 가운데 100px이 더 크기 때문에 A의 아래쪽 마진인 100px만 적용이 됩니다. B는 위쪽 마진을 포기한 것이구요. 이게 형제간 마진 통합의 예 입니다.

.P { margin:50px 0; }
.C { margin:100px 0; }

다음은 부모 자식간의 마진 통합 입니다. P라는 부모와 C라는 자식이 존재한다고 가정합시다. 부모인 P는 수직 마진이 50px 입니다. 자식인 C는 수직 마진이 100px 입니다. 그렇다면 P와 형제 관계에 있는(C에게는 삼촌뻘) 녀석들은 P와 얼마나 멀리 떨어져 있어야 할까요? 일단 정답은 상황에 따라 다르다 인데 P 요소가 수직 방향으로 padding, border가 존재하지 않는다면 P는 형제들과 수직 방행으로 100px 떨어지게 됩니다. 왜냐하면 부모와 자식 사에에 padding, border가 존재하지 않기 때문에 수직 마진이 통합되어 버린 것입니다. 자식의 마진 100px이 더 크기 때문에 부모는 50px의 마진을 버린 것이죠. 이런 현상을 부모 자식간의 마진 통합이라고 합니다. 만약 부모 P 요소의 수직 방향(상하)에 마진 통합을 방해하는 padding, border가 존재한다면 마진 통합 현상은 발생하지 않을 것입니다.

마진 통합이 양수끼리 또는 음수끼리 통합될 때에는 계산하기가 쉽습니다. 양수든 음수든 더 큰 절대값(100px > 50px | -100px > -50px)을 지닌 마진이 적용이 되니까요. 그러나 양수와 음수값이 서로 만나게 되는 경우 절대값은 의미가 없고 그대로 샘을 해서 계산하면 됩니다. 예를 들어 100px 마진과 -200px 마진이 만나면 -100px의 마진이 남습니다. 양수 마진과 음수 마진이 만났을 땐 그냥 이렇게 100-200= -100 계산해 버리시면 돼요.

왜 이렇게 했는지 곰곰히 생각해 보면 통합하지 않는 것보다 훨씬 효과적이라는 것을 깨닫게 되실껍니다. hx 요소는 기본적으로 수직 마진이 좀 크고 p 요소는 좀 작지요. 이 두 요소가 형제 관계로 만났을 때 마진이 통합되어 버리지 않으면 엄청 큰 마진이 생기게 됩니다. 따라서 마진은 무조건 더하지 않고 큰 값 하나만 유효하다 라는 원칙으로 하여금 다양한 요소들이 부모 자식 또는 형제 관계로 만나게 되는 경우에 자연스러운 마진을 가질 수 있게 됩니다.

지금 설명드린 내용은 모두 CSS 표준 명세에 따른 것입니다. 이렇게 렌더링 하지 않는 브라우저들은 표준 스펙을 제대로 구현하지 못한 것입니다. float된 요소와 float되지 않는 요소는 서로 다른 층에 떠 있기 때문에 마진 통합 현상이 발생하지 않습니다.


 

[요약]
마진 통합 현상이란?
; 인접한 블록 레벨 엘리먼트의 margin-top과 margin-bottom 간의 마진이 합쳐지는 현상.

- margin-top, margin-bottom 의 값이 같을 경우 위에 먼저 마크업 된 블록 레벨 엘리먼트의 마진값
   (위의 블록 엘리먼트의 margin-bottom)에 합쳐진다.

- 블록 레벨 엘리먼트에 포함된 블록 레벨 엘리먼트의 마진통합현상
   
- 부모 엘리먼트에 컨텐트(텍스트, 이미지)가 없는 경우에 일어난다. 부모 엘리먼트의 마진 영역에 통합된다.
  
- 부모 엘리먼트에 컨텐트가 있는 경우는 일어나지 않는다.
  
- border나 padding이 적용된 경우 마진이 통합현상이 일어나지 않는다.

반응형

'# Work > HTML/CSS' 카테고리의 다른 글

min-height ie6 에서 핵 없이 사용하기  (0) 2011.03.29
<abbr>과 <achronym>  (0) 2011.03.24
Float를 Clear하는4가지 방법  (0) 2011.03.17
파비콘 적용시키기.  (0) 2011.02.27
[용어정리]  (0) 2011.01.21
호정찐
반응형

CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 다단 컬럼 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다. float 속성이 부여된 엘리먼트는 좌측이나 우측으로 배치되면서 주변 콘텐츠의 배치에도 영향을 미친다는 사실은 어렵지 않게 학습되나 ‘float 된 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실’은 몇 번의 경험 또는 선배들의 조언으로 깨닫게 되는 것이지요.

오늘은 float 속성을 이해하고 다단 컬럼형 레이아웃을 시도할 때 주변 엘리먼트들이 원하는 상태로 배치될 수 있도록 이것에 대응하거나 clear 하는 방법에 대하여 공유하고자 합니다. clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성입니다. 만약 Internet Explorer 브라우저를 사용하여 학습을 시도하신다면 일단 멈추시고 표준계열 브라우저에서 먼저 시도해 보세요. CSS 표준 렌더링을 엄격하게 준수하는 Opera와 Safari를 권장합니다. Internet Explorer와 Firefox 브라우저는 float, clear 속성에 관한 버그를 포함하고 있으므로 float과 clear의 표준 렌더링이 어떻게 구현되는지를 학습할 때 도움이 되지 않습니다. 하지만 버그를 해결하는 방법도 소개되어 있으니 안심하세요.

오늘 글의 핵심은 ‘float된 자식 엘리먼트의 높이를 부모 엘리먼트에 반영하도록 대응하는 방법’ 이라고 한마디로 설명할 수 있겠습니다. 부모 떠난 자식을 다시 부모의 품 안으로 돌아오도록 하려면 어떻게 해야 하는지 한번 살펴 보시죠.

float에 아무런 대응도 하지 않은 상태

#container는 부모 엘리먼트이며 #lnb와 #content는 자식 엘리먼트로서 현재 float된 상태 입니다. 아래 예제는 float에 아무런 대응을 하지 않으면 자식 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실을 보여주고 있습니다. #container의 높이가 자식 엘리먼트의 높이를 반영하지 않고 있다는 사실에 주목해 주세요. float에 아무런 대응도 하지 않은 상태의 예제가 준비되어 있습니다.

float에 아무런 대응도 하지 않은 상태의 예제

float에 float으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있습니다. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영합니다. 하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실에 주목해 주세요. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어려운 단점이 있습니다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다. float에 float으로 대응하는 방법 예제.

float에 float으로 대응하는 방법 예제

float에 overflow 속성으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다. float에 overflow 속성으로 대응하는 방법 예제.

float에 overflow 속성으로 대응하는 방법

float을 빈 엘리먼트로 clear 하는 방법

이 방법은 #container 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다. float을 빈 엘리먼트로 clear 하는 방법 예제. 예제에서는 .clear 라는 빈 엘리먼트를 가시적으로 보이도록 하였지만 실무에서는 보통 .clear {clear:both; height:0; overflow:hidden;} 처리하여 .clear 라는 빈 엘리먼트가 스스로 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다.

float을 빈 엘리먼트로 clear 하는 방법 예제

float을 가상 선택자 :after로 clear 하는 방법

가장 탁월하다고 생각하는 방법 입니다. 우선 ‘가상 선택자‘라는 개념을 이해하셔야 하기 때문에 약간 상세히 설명드리겠습니다. 여러분들이 익히 알고 계시는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 입니다. ‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있는데요. ‘가상 클래스‘는 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있습니다.  :link, :visited, :hover, :active, :focus, :first-child가 가상 클래스에 해당됩니다. 한편 ‘가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있습니다. 심지어 :before와 :after는 HTML문서상에 존재하지 않는 콘텐츠를 출력시키기도 합니다.  Hello World Collection이라는 웹 사이트에 신현석님이 ‘Hello World’라는 메시지를 어떻게 출력했는지 살펴보시면 재미있고 이해하기도 쉽죠. 이렇게 가상의 엘리먼트를 생성 #container:after {content:" "} 시킨 다음 display:block; clear:both 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear됩니다. float을 가상 선택자 :after로 clear 하는 방법 예제.

float을 가상선택자 :after로 clear 하는 방법 예제

상기 예제로부터 가상 엘리먼트가 스스로 높이를 갖지 않고 화면에 보이지 않도록 처리 하려면 아래와 같이 처리 합니다.

#container:after {content:""; display:block; clear:both;}

하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다. 

#container {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
#container:after {content:" "; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */

IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법 입니다.

float을 display:inline-block 으로 clear 하는 방법

float된 자식요소들의 높이를 부모에게 전달하는 방법으로써 부모 요소에 display:inline-block 속성을 부여하는 방법도 있습니다. [코멘트 해주신 김영환님 감사합니다] inline-block 속성이 부여된 요소는 float된 자식의 높이만큼 늘어납니다. [CSS 2.1 관련 설명 코멘트 해주신 연홍석님 감사합니다] 모든 브라우저가 동일하게 float을 해제하는 방향으로 작용합니다. 단, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있습니다. 또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 이점 유념하시는게 좋겠습니다. 


출처 : http://naradesign.net/wp/2008/05/27/144/




ps 위와 관련된 기타 부가설명 내용 (ex.hasLayout, Zoom:1; 등..) http://blog.wystan.net/2007/08/14/understanding-haslayout-property-and-holly-hack

http://firejune.com/1653
 

반응형

'# Work > HTML/CSS' 카테고리의 다른 글

<abbr>과 <achronym>  (0) 2011.03.24
마진 통합현상(collapsing margin)이란?  (0) 2011.03.24
파비콘 적용시키기.  (0) 2011.02.27
[용어정리]  (0) 2011.01.21
footer 영역 항상 하단에 고정하기  (0) 2011.01.21
호정찐