'html'에 해당되는 글 12건

  1. 2009.06.08 flow(흐름)
  2. 2009.04.05 span
  3. 2009.04.05 div
  4. 2009.03.23 박스 모델
  5. 2009.03.14 strict HTML에서 XHTML로 옮겨가기 (1)

flow(흐름)

HTML 2009.06.08 02:20
참고 : Head First HTML

flow(흐름) 이란?
브라우저가 XHTML 엘리먼트들을 페이지에 배치하기 위해 사용하는 것이다. 파일의 가장 위에서부터 아래로 엘리먼트의 흐름을 따라가면서 만나게 되는 각각의 엘리먼트를 배치하고, 블록 엘리먼트를 고려하면서 라인 브레이크를 넣는다. 따라서 첫 번째 엘리먼트가 가장 위에 배치되고, 나머지 엘리먼트들이 그 아래를 잇는다. 이것이 바로 flow(흐름) 이다.

인라인 엘리먼트의 흐름
블록 엘리먼트의 경우 각각의 사이에 라인 브레이크를 가지고 있어서 위에서 아래로 배치가 된다. 하지만 인라인 엘리먼트는 어떻게 배치가 될까?  인라인 엘리먼트들은 수평 방향으로 왼쪽에서 오른쪽으로 서로 바짝붙어서 배치된다(흐른다). 인라인 엘리먼트들이 블록 엘리먼트의 여유가 있는한 수평 방향으로 배치될 것이며, 만약 모든 인라인 엘리먼트가 수평으로 배치될 공간이 없다면 다음 줄로 옮겨가게 된다.

flow와 박스모델에 관해서 더 알아야할 사항
두 개의 인라인 엘리먼트가 인접해(수평으로) 있을 때...
- 각각 10씩의 마진을 가지고 있을 경우, 두 개의 인라인 엘리먼트의 사이는 20이 된다.

두 개의 블록 엘리먼트가 인접해(위아래로) 있을 때...
- 각각 10씩의 마진을 가지고 있을 경우, 두 개의 블록 엘리먼트 사이는 10이 된다. 즉, 공유된 마진을 합쳐 버리고 합쳐진 마진의 높이는 더 큰 쪽의 마진의 높이가 된다.

흐름을 제어하는 float
float 속성은 엘리먼트를 떠오르게 한다. 떠올려진 엘리먼트는 흐름에서 제거되었기 때문에, 다른 블록 엘리먼트들이 그 아래로 배치된다. 하지만, 그 블록 엘리먼트 안에 있는 인라인 엘리먼트는 떠올려진 엘리먼트를 존중하여 그 주위로 배치된다.

엘리먼트위로 다른 엘리먼트가 떠다니지 못하게 하는 clear
float 속성에 의해 어떤 엘리먼트가 떠오르게 되고 다른 엘리먼트가 그 아래로 배치되는데, clear 속성을 사용하면 해당 엘리먼트 위로 다른 엘리먼트가 떠다니지 못하게 방지한다.

인라인 엘리먼트도 떠오를 수 있나?
당연히 가능하다. 최상의 예는 문단에 있는 이미지를 뜨게 하는것 이다. 그러면 텍스트가 이미지 주위로 흐를 것이다.
신고

'HTML' 카테고리의 다른 글

flow(흐름)  (0) 2009.06.08
span  (0) 2009.04.05
div  (0) 2009.04.05
박스 모델  (0) 2009.03.23
폰트  (0) 2009.03.22
strict HTML에서 XHTML로 옮겨가기  (1) 2009.03.14
Posted by 째코

span

HTML 2009.04.05 23:10
참고 : Head First HTML

<div> 엘리먼트가 블록 엘리먼트를 논리적으로 분리(그룹핑) 하기 위한 컨테이너라면
<span> 엘리먼트는 인라인 콘텐츠를 논리적으로 분리하기 위한 컨테이너다.

<div> 엘리먼트와 마찬가지로 CSS로 꾸밀 수 있다.

분리하기 전
<ul>
<li>럼블피쉬, 비와 당신</li>
<li>대성, 대박이야</li>
<li>바비킴, 사랑 그놈</li>
</ul>

분리한 후
<ul>
<li><span class="artist">럼블피쉬</span>, <span class="title">비와 당신</span></li>
<li><span class="artist">대성</span>, <span class="title">대박이야</span></li>
<li><span class="artist">바비킴</span>, <span class="title">사랑 그놈</span></li>
</ul>

신고

'HTML' 카테고리의 다른 글

flow(흐름)  (0) 2009.06.08
span  (0) 2009.04.05
div  (0) 2009.04.05
박스 모델  (0) 2009.03.23
폰트  (0) 2009.03.22
strict HTML에서 XHTML로 옮겨가기  (1) 2009.03.14
Posted by 째코
TAG html, Span

div

HTML 2009.04.05 22:45
참고 : Head First HTML

<div> 를 이용하여 페이지를 논리적인 그룹뿐 아니라 포지셔닝을 위해 그룹핑 할 수 있다.
<div> 블록 엘리먼트들을 위한 컨테이너다.

그룹핑의 목적은 그룹화된 CSS와 포지셔닝이다.
당연히 유지보수 또한 좋아진다.

그룹핑 전
<h2>고양이</h2>
<p>
고양이는 야옹 야옹 울어요
<p>

<h2>개</h2>
<p>
개는 멍 멍 짖어요
<p>

그룹핑 후
(단지 <div>로 묶는 것은 의미가 없다. 반드시 이름(id) 이 있어야 한다.)
<div id="cat">
<h2>고양이</h2>
<p>
고양이는 야옹 야옹 울어요
<p>
</div>

<div id="dog">
<h2>개</h2>
<p>
개는 멍 멍 짖어요
<p>
</div>

한번 더 그룹핑
(그룹은 중첩될 수 있다.)
<div id="pet">
<div id="cat">
<h2>고양이</h2>
<p>
고양이는 야옹 야옹 울어요
<p>
</div>

<div id="dog">
<h2>개</h2>
<p>
개는 멍 멍 짖어요
<p>
</div>
</div>

신고

'HTML' 카테고리의 다른 글

flow(흐름)  (0) 2009.06.08
span  (0) 2009.04.05
div  (0) 2009.04.05
박스 모델  (0) 2009.03.23
폰트  (0) 2009.03.22
strict HTML에서 XHTML로 옮겨가기  (1) 2009.03.14
Posted by 째코
TAG div, html

박스 모델

HTML 2009.03.23 01:05
참고 : Head First HTML

박스 모델
CSS의 관점에서 보면 모든 엘리먼트는 하나의 박스다.
모든 박스는 마진, 테두리, 패딩, 콘텐츠 영역으로 구성되어 있다.

콘텐츠 영역
모든 엘리먼트는 텍스트나 이미지와 같은 몇가지 콘텐츠를 가지고 시작하며, 이 콘텐츠는 그것을 포함할 정도로 충분한 크기의 박스 내부에 위치한다.
콘텐츠 영역은 콘텐츠와 콘텐츠 영역 그 자체 사이에 빈 공간을 가지고 있지 않다.

패딩(padding)
어떤 박스도 콘텐츠 영역 주위에 패딩층을 가질 수 있다.
패딩은 선택적인 것이므로, 꼭 필요한 것은 아니지만 콘텐츠와 박스의 경계사이에 시각적인 여백을 주기 위해 사용할 수 있다. 패딩은 투명하며 자신만의 고유의 색을 가지지 않는다.

테두리(border)
엘리먼트들은 주위에 선택적으로 테두리를 가질 수 있다.
테두리는 패딩을 둘러싸며 콘텐츠와 같은 페이지에 있는 다른 엘리먼트 사이를 시각적으로 분리하는 역할을 한다. 테두리의 넓이, 색 그리고 스타일은 변경할 수 있다.

마진(margin; 여백)
마진 또한 선택적이며 테두리를 둘러싸고 있다.
마진은 엘리먼트와 같은 페이지에 있는 다른 엘리먼트 사이에 빈 공간을 추가하는 역할을 한다.
만약 두 개의 박스가 서로 인접해 있을 경우 마진은 그들 사이에 있는 빈 공간의 역할을 수행한다.
패딩과 같이 마진은 투명하며 자신만의 색을 갖지 않는다.

패딩과 마진의 차이점
패딩이 콘텐츠에 여유 공간을 제공하는 반면, 마진은 엘리먼트와 다른 엘리먼트 사이에 여백을 준다.
만약 콘텐츠에 시각적인 경계가 있다면 패딩은 경계의 안쪽에 있으며, 마진은 경계의 바깥쪽에 있다.
마진은 엘리먼트를 둘러 싸며 주위에 있는 것으로부터 완충 역할을 수행하는 반면, 패딩은 엘리먼트의 일부라고 생각 하면 된다.
신고

'HTML' 카테고리의 다른 글

span  (0) 2009.04.05
div  (0) 2009.04.05
박스 모델  (0) 2009.03.23
폰트  (0) 2009.03.22
strict HTML에서 XHTML로 옮겨가기  (1) 2009.03.14
Strict HTML 4.01 지침서  (0) 2009.03.14
Posted by 째코
참고 : Head First HTML

  1. DOCTYPE을 HTML 4.01 Strict에서 XHTML 1.0 Strict로 변경한다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  2. <html> 시작 태그에 xmlns, lang, xml:lang 속성을 추가한다.
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  3. 빈(empty) 엘리먼트 끝에 있는 ">"를 "/>"로 변경한다.
    <br> --> <br />

흠... 간단 하군요~
신고

'HTML' 카테고리의 다른 글

박스 모델  (0) 2009.03.23
폰트  (0) 2009.03.22
strict HTML에서 XHTML로 옮겨가기  (1) 2009.03.14
Strict HTML 4.01 지침서  (0) 2009.03.14
표준, 신뢰성  (0) 2009.03.14
HTML의 간단한 역사  (0) 2009.03.14
Posted by 째코
TAG html, xhtml


티스토리 툴바