Lazy Developer

Span 태그와 Div 태그는 실제로 아주 비슷하고 기능상으로 거의 차이가 없다. 하지만 이 두 개의 태그는 사실 매우 다르다. http://webdesign.about.com/od/htmltags/a/aa011000a.htm - 여기에 매우 설명이 잘 되어 있다.

이 문서에 의하면,

The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page.
Div 태그는 웹 페이지에서 논리적인 구획을 정의한다. 레이아웃 적인 측면으로 보면, Div 태그는 한 가지 일만을 하는데, 그것은 바로 페이지의 페이지의 섹션 정렬을 지정하는 것이다.

The <span> tag has very similar properties to the <div> tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.
Span 태그는 div 태그와 매우 비슷한 속성을 가지는데, 그것이 감싸고 있는 텍스트들의 스타일에 영향을 준다. Span 태그 안의 아이템들은 특정한 스타일 속성을 가지게 되거나 정렬될 수 있다.

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>.
Span 태그와 div 태그의 가장 큰 차이는, span 태그는 자체로는 어떤 기능도 하지 않는다는 것이다. Div 태그는 마치 한 문단처럼 행동하는데, 문서의 논리적인 구획을 정의하기 때문이다. Span 태그는 그 내부의 요소들이 특정한 스타일이나 정렬 규칙을 가진다는 것을 브라우저에게 알려줄 뿐이다.

그래서 (내가 몇 번 겪었던 일이긴 한데) Div 태그를 두 개 연속으로 쓸 경우에는 줄나눔이 발생을 하게 된다.

자, 그래서

<div>div1-text</div><div>div2-text</div>
<br>
<br>
<span>span1-text   </span><span>span2-text</span>

이렇게 작성된 HTML의 경우, 이렇게 보인다.

요즘은 Ajax 때문에...HTML에 관심이 많다...ㅎㅎㅎ

우리는 Internet Explorer 등의 웹 브라우저를 통해서 인터넷을 보게 된다. 주소 창에 주소를 입력하거나, 즐겨 찾기에서 선택을 하기도 하고, 또는 링크를 누르는 동작을 통해서 웹 페이지들을 탐색한다. 하지만, 그 내부적으로는 HTTP 프로토콜을 통해서 서버에 Request를 보내고 그에 대한 Response를 받는 복잡한 동작이 이루어지게 된다. 그 Request에는 Cookie나 사용자의 입력값 등의 정보 들이 Header에 들어가게 되고, 이런 정보들은 실제 웹 브라우저에서는 보이지 않는다.

웹 애플리케이션을 개발한다면, 이런 정보들이 제대로 들어가고 있는지를 보는 것은 중요하다. 대부분의 웹 애플리케이션에서 서버 사이드에 있는 로직들은 이런 Header정보를 많이 사용해서 처리하게 되는데, 디버깅 환경이 아니라 실제 운영 환경에서 문제가 생겼을 때 브라우저에서는 Header 정보를 볼 수가 없기 때문에 문제를 해결하기가 쉽지가 않다.

Fiddler는 이 HTTP Request/Response 정보를 볼 수 있게 해주는 아주 유용한 툴이다. http://www.fiddlertool.com/fiddler/ 에서 다운로드받을 수 있다. NetMon 등을 통하면 물론 그 컴퓨터의 모든 네트워크 트래픽을 모니터링 할 수가 있지만, 이 Fiddler는 인터넷 프로토콜만을 모니터링해주기 때문에 웹 개발자들에게 아주 유용하다.

Fiddler의 화면이다. 왼쪽에는 History가, 오른쪽에는 각 세션의 자세한 정보가 나타나게 된다.

각 세션의 Request/Response Header 정보를 자세하게 볼 수 있다.

또 하나의 유용한 기능, 웹 페이지의 Response Time 정보를 알 수가 있다.

C# 1.X에서는 파라미터로 넘어온 문자열에 대해서 보통은 아래와 같은 방식으로 체크를 했었다.

if (str != null && str.Length != 0)

{

}

하지만, 이제 C# 2.0에서는 이렇게 길게 코딩할 필요가 없어졌다...!!!

if(!String.IsNullOrEmpty(str)

{

}

이렇게 간단하게 한 번의 메소드 호출로...해결할 수 있다.

그리고, 차라리 젤 위에 있는 예전 방식으로 하고, 아래 방식은 절대로 쓰지 말 것...

If(str != null && str != "")

{
}