최근 css, xhtml 공부

우리는 글씨체라는 것이 바로 font-family라는 것을 안다.세상에는 많은 글씨체가 있지만 모든 운영체제가 세계의 모든 글씨체를 가지고 있는 것은 아니다.예를 들어 나는 font-family: "마이크로소프트 블랙"을 썼는데, 이 글씨체는 마이크로소프트 블랙만 있고, ubuntu 아래에 가면 이 글씨체가 없다. 그러면 브라우저는 어떤 글씨체로 표시할까?난자 뜨는 것처럼 뜨는 거 아니에요?
이때 브라우저는 모든 사용자가 지정한 글꼴이 효력을 상실한 후에 최종적으로 대용되는 글꼴을 지정하는 방법을 생각해 냈다. 그것이 바로 유니버설 글꼴족, 바로sans-serif와serif이다.serif는 안감안감 글씨체와 비안감 글씨체에 관해서는 제가 여기서 군말을 많이 하지 않겠습니다. 작은 글씨체에서는 Serif가 더욱 편안하고 뚜렷하게 보이지만 Serif는 안감 때문에 예술감과 매끄러움이 강하지 않기 때문에 큰 글씨체의 제목으로 쓰기에 적합하지 않습니다.산스 - serif는 큰 글꼴로 표시하기에 적합합니다.
 
다음은 라이너 글꼴입니다.
I love web design      I love web design
 
다음은 비안감 글꼴입니다.
I love web design    I love web design
 
그러나 일반 글꼴족이 어떤 글꼴에 대응하는지는 브라우저가 스스로 결정한다.우리는 font-family를 쓸 때 우리가 원하는 글씨체를 최대한 많이 써야 한다. 유니버설 글씨체족에 의존해서는 안 된다. 왜냐하면 그 글씨체가 무엇인지 아무도 모르기 때문이다.
 
중국어와 관련된 글씨체 문제도 존재한다. 예를 들어 font-family: "Comic San MS", 흑체,sans-serif이다.
우리가'사랑하는 웹 디자인'을 칠 때 먼저 코믹 산 MS에서 그 한자가 있는지 없는지를 찾았는데 그 결과 부족한 문자가 바로 찾지 못했다는 뜻이다. 그래서 다시 흑체에 가서 찾았다가 흑체로 표시했다.그러나 i와 opera에서 Comic San MS에서 문자가 부족할 때 마지막 유니버설 글꼴족, 즉 흑체가 조용히 무시되는 것이 버그의 부분이다.
 
만약에 우리가 영어 글씨체로 중국어 글씨체를 표시할 때 어떤 것이 나타날까요?ubuntu 아래에서 모든 기본 중국어 문자는 유원으로 표시되고, buuntu 아래에서 모방할 수도 있습니다.브라우저가 문자가 부족할 때 운영체제의 기본 글꼴을 검색합니다.
 
이어서 나는 html 구조의 문제를 토론할 것이다
우리는 평소에 html을 쓴다. 만약에 전문적이라면 xhtml을 쓸 때 우리의 머릿속에는 어떤 생각을 하고 있을까?우리는 이div는 오른쪽에 놓고 저div는 왼쪽에 놓아야 한다고 생각했다. 그래서 왼쪽div를 먼저 쓰고 오른쪽div를 쓴 다음에 #leftcolumn의 id, 이것은 그야말로 2b 행위이다.왜냐하면, 우리는 이미 레이아웃을 하고 있기 때문에, xhtml은 레이아웃이 없기 때문이다.우리가 고려해야 할 것은 데이터 구조이다. 예를 들어 인터넷 속도가 비교적 느릴 때 브라우저는 흐르는 순서에 따라 html의dom를 불러온다. 이때는 네가 html을 쓴 순서에 따라 불러온다. 만약에 네가 비교적 중요한 구조를 마지막에 두면 이 내용은 많이 늦어져서 나타난다. 우리는 중요한 것을 앞에 놓고 쓸 수 있다.그리고 css 기교, 예를 들어 플로트나 다른 수단으로 레이아웃을 조절한다.우리가 html을 쓸 때 절대로 레이아웃을 생각하지 말고 데이터 구조를 생각해야 한다.
 
인터넷에서 본 xhtml도 있고 xml도 있어요.여기의 x는 무엇을 가리키는가?전자는 html이 더욱 xml의 쓰기 규범이 있고 하나의 xml과 같다는 것을 가리킨다.한편, xml의 x지표기는 확장할 수 있다. 는 xhtml에서 하나의 표이고 xml에서 책상이나 슬라이더일 수도 있다. 이것은 모두 가능하기 때문에 확장할 수 있다. 다시 말하면 xhtml은 확장할 수 없는 것이다.여기에 양날의 검이 하나 있는데 확장할 수 있는 것은 물론 좋지만 이것은 의미가 명확하지 않다. 그러나 xhtml의 의미는 매우 명확하다. 왜냐하면 우리가 브라우저에 쓴 코드는 우리가 마음대로 음란하게 표시한 무더기가 될 수 없기 때문이다. xhtml로 하는 것은 비교적 믿을 만하다. 이것은 절충된 방안이다.그런데 새로운 기술이 있는데 xml+xsl이라고 합니다. 여기서 확장할 수 있는 데이터 구조를 특수한 의미 표시로 바꾸는 것을 의미한다고 생각합니다.흥미가 있으면 xml+xsl을 볼 수 있습니다. xml은 html이나wml 또는 다른 표기 언어로 변환할 수 있습니다. 하지만 저는 이걸 좋아하지 않습니다. 이것은 너무 번거롭고 융통성이 없습니다.
 
시각 요소는 반드시 xhtml 중의 실질적인 요소에 대응해야 하는 것은 아니다.html에 포함된 것은 하나의 내용입니다!따라서 우리는 xhtml을 디자인할 때 어떤 효과를 얻으려고 생각하지 말고 단순히 정보의 조직 형식을 생각해야 한다.여기 css zengarden이 아주 잘해요.
 
어의와 구조는 xhtml의 두 핵심이다.
 
 
CSS 정보
w3에서div에 대한 정의가 어떤지, The div element, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.The element define content to be block-level but impose no other presentational idioms on the content. 여기에 div는 for structure에 사용되는 것이지 for layout에 사용되는 것이 아니라는 것을 명확하게 썼다.
지금 나는 코드 구조가 무엇인지, 의미 구조가 무엇인지 이야기할 것이다.저는 이렇게 보았습니다. 의미 구조는 바로 우리가 그 표지만 보는 것입니다. 우리는 그 표지만 보면 그 표지가 무엇을 대표하는지 알 수 있습니까? em나strong은 강조를 표시하고 p는 한 단락을 표시하며 input은 입력 상자입니다.그러나 네가 그 표시된 의미 코드를 알아봤다고 해서 완벽한 것은 아니다. 이것은 사실 매우 부족하다.예를 들어 우리는 프로그램을 쓴다. 우리는 어떤 모듈화된 사상으로 쓰지 않고 그냥 마음대로 쓴다. 대상이나 함수에 대한 추출이든 모두 한 덩어리로 쓴다. 물론 프로그래머가 코드를 보면 당연히 알아볼 수 있지만 코드 구조가 좋지 않다.대상을 대상으로 하는 것도 사용하지 않고, 함수를 추출하는 것도 없고, 외부 인터페이스에 노출되는 것도 없다. 모듈화가 잘못되면 다른 사람들이 당신의 코드를 사용하기 어려울 것이다.마찬가지로 당신의 xhtml 코드 구조가 좋지 않아서 미용사는 당신이 쓴 xhmtl을 이용하여 착수하기 어렵다. 왜냐하면 모두 한데 섞여서 구조의 분리를 하지 못했기 때문이다.좋은 코드 구조는 xhtml을 고정하는 데 편리할 뿐만 아니라 css에 높은 자유를 제공할 수 있다.
예컨대

<h3>  </h3>
<label for="name">   </label>
<input id="name"/>
<label for="password">  </label>
<input type="password" id="password">
<input type="submit " />



<div id="login_form">
<h3>  </h3>
<div>
<label for="name">   </label>
<input id="name"/>
</div>
<div>
<label for="password">  </label>
<input type="password" id="password">
</div>
<div><input type="submit " /></div>
</div>

 
 
 
여기의div는 코드 구조를 더욱 좋게 하기 위해서입니다. 여기 많은 사람들이div를 위해 줄을 바꿀 수 있기 때문에div를 사용합니다. 만약에 그 input도 줄을 바꾸는 효과에 도달할 수 있다면 우리는div를 사용하지 않겠습니까?아니요!또한div는 내용을 구분하는 데 사용되기 때문에 코드를 더욱 구조화할 수 있습니다. 구조와 무관한 것들로 줄을 바꿀 생각은 하지 마세요!
그런데 여기서 문제가 하나 있다. 만약에 우리가 모두div로 노드를 만들거나 구분을 하면 의미가 모호해지기 쉽다. 예를 들어 우리는div로 로그인 폼의 노드를 만들고div로 자료를 보여주는 노드를 만든다. 때로는 노드를 만들지 않고 행 요소로도div를 사용한다. 위의 로그인 폼 안의div처럼 이럴 때 헷갈린다.만약에 css를 사용한다면 득점호를 노드로 하는div는 어때요? 줄로하는div는 어때요? 패딩이 다르고magin도 달라요!클라스도 만들어야 돼, 이렇게 생각하면 이상해, 의미가 간결하지 않아!겉으로는 xhtml2.0 어떤 섹션과 라인이 있고 div도 보존되어 있는데 이 문제를 해결할 수 있지 않을까요?연구를 해봐야겠어..
 
제가 전에 html을 쓸 때 다른 사람들이 어떤 strong과em의 표기를 사용하는지 자주 보았는데 그게 좋지 않다고 생각합니다. 왜냐하면 저는 font가 좋지 않다는 것을 알고 있기 때문입니다. 표현과 구조를 혼합했기 때문에strong은 글씨체를 굵게 만들 수 있기 때문입니다. 저는 이것도 표현과 구조를 결합시킨 것이라고 생각합니다. 사실 이렇게 생각하는 것은 큰 실수라고 생각합니다.엠과 스트롱은 표현을 위한 것이 아니라 내용을 강조하기 위한 것으로, 본질적으로는 내용이다.스트롱의 기본 css 스타일을 완전히 없애서 스트롱이 굵은 글씨체를 보이지 않게 할 수 있습니다.그리고 storng에 아무런 시각적 효과가 없어도 우리는strong을 써야 한다. 그것은 의미와 내용상의 것이기 때문에 강조하기 위한 것이고 시각적 효과는 xhtml 작성자가 예상치 못한 효과이기 때문이다.
 
언제 테이블을 사용합니까? 구조가 열에 중심을 두거나 추세가 여러 열로 확장될 때 테이블을 사용합니다.언제ol/li를 사용합니까? 구조가 등급 (폴더 트리의 구조, 또는 추세가 등급으로 확장되는 구조) 에 중심을 두었을 때ol/li를 사용합니다.