HTML, CSS 코딩시 기본적인 유의사항

1. 공백테크

- <br />

2. 모든 script 및 style 요소에는 type속성이 포함

3. 모든 img 및 area 요소에는 alt속성이 포함

4. 모든 script내의 태크는 escape시켜야한다.

5. 모든 문서내 url에서 &를 쓰면안된다

- <a href="foo.cgi?chapter=1&section=2">...</a>
- html문서내에서만 &를 &로 바꾸어야하며 브라우저 주소창이나 이메일
본문에서는 &를 써야한다. 웹서버에서는 &가 아니라 &만을 인식

6. 검색 form

7. <div> 는 block : 뒤에 개행이 이루어짐(줄바뀜)
<span>은 inline : 뒤에 개행이 이루어지지 않음(줄바뀌지않음)

8. block : <div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd> 등
lnline : <a>, <img>, <select>, <input>

9. Heading태그 : <hi> ~ <h6> = 제목을 표기

10. <p> : 하나의 문단을 <p>, </p>로 작성
<p>는 하위에 block요소를 포함할수없음

11. <em>, <strong> : 이탤릭, 볼드체 = 문장안에 중요도가 있을때사용
<i>, <b> : 단지 이텔릭이나 볼드를 표현할때사용

12. <dfn>태그는 정의를 나타낼 때에 사용된다.

13. <code>는 컴퓨터 코드를 나타내는 태그이고
<samp>는 코드의 결과 출력물을 나타낼때에 사용한다.

14. <kbd>는 유저의 키보드 입력을 나타내고,
<var>는 프로그램에서의 변수를 나타낸다.
<kbd>Enter</kbd>키를 누르세요

15. <cite>는 인용이나 출처를 밝힐 때에 사용한다.

16. 문서에 <ins>새로 추가</ins>되거나
<del>삭제된 내용</del>을 표시 할 수 있습니다.
보통 <ins>는 밑줄을, <del>은 취소선으로 표현이 된다.

17. 리스트에는 <ul>, <ol>, <dl>세가지가 있다.

18. <ul>은 하위로 <li> 엘리먼트를 갖게 되고 각
<li>엘리먼트의 앞부분에는 불렛이 나타나게 된다.(마크없이 없는 목록)

19. <ol>은 하위로 <li> 엘리먼트를 갖게 되고
각 <li>엘리먼트의 앞부분에는 자동적으로 숫자가 나오게 된다.(순서있는 목록)

20. <dl>은 하위로 <dt>와 <dd>엘리먼트를 갖게 된다. (용어 정의 목록)
<dt>는 term을 <dd>는 definition을 나타낸다.

21. class : .a
id : #a

22. * {
margin: 0;
padding: 0;
}
- 모든 엘리먼트를 선택

23. 하위선택자 : A B = 태그A로 감싸져 있는 태그 B를 지정

    자식선택자 ; A > B = 태그 A로 감싸져 있는 태그 B중 한단계 밑에것을지정

    인접선택자 : A + B = 태그 A와 B가 연속으로 나와있는것을 지정

24. first-child 선택자 : A:first-child = 태그 A로 감싸져있는 가장 처음 태그를 지정

언어선택자 : A:lang(B) = 태그 A중 언어가 B로 성정된 것을 지정

    링크선택자 : A:link = 태그 A중 링크가 걸려있으면 지정
                 A:visited = 태그 A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정

    동적선택자 : A:active = 태크 A중 사용자가 마우스를 누르고 있는 태그를 지정
                 A:hover = 태그 A중 사용자가 마우스 포인터를 위에 올려 놓은 태그를 지정
                 A:focus = 태그 A중 사용자의 키보드 입력을 받는 태그를 지정

25. P:first-line 선택자 : A:first-line = 태그 A의 문단중 첫번째 줄을 지정
    P:first-letter 선택자 : A:first-letter = 태그 A의 문단중 첫번째 글자를 지정
    P:before 선택자 : A:before 태그 A의 문단 앞을 지정
    P:after 선택자 : A:after = 태그 A의 문단뒤를 지정

    ex) text-content:"]" , text-transform: uppercase

26. 컬러값 입력시 주의사항
    #rrggbb 방법 - color: #ff0000; (=color: #f00;)
    rgb(r,g,b) 방법 - color: rgb(255,0,0); (=color: rgb(100%,0%,0%);)
    color: ff0000; 이나 color=#ff0000 - 잘못된 방법

27. position은 static, relative, absolute의 세가지 값을 가질 수 있다.
    1. static : 기본값.
    2. relative : static과 같지만 offset을 지정 할 수 있고 하위 엘리먼트 offset의 기준점이 된다.
    3. absolute : 화면상에서 다른 컨텐츠에 위치에 영향을 미치지 않고 위치 지정이 가능하다.
                  보통 레이어라고 불리우는 것.

28. float은 left, right, none의 세가지 값을 가질 수 있다.
    1. left : 엘리먼트를 좌측으로 배치함.
    2. right : 엘리먼트를 우측으로 배치함.
    3. none : float시키지 않음

29. z-index: 1; = 레이어상하관계
레이어를 문서에 넣어줄대는 한꺼번에 여러개의 레이어를 넣는것도 가능합니다.
레이어의 상하관계를 숫자로 설정해주는 속성으로 숫자가 클수록 위쪽에 배치됨

30. 레이어 overflow : 레이어 속의 내용이 넘칠 경우 사용할 수 있는 옵션으로
    overflow:visible ==> 레이어 크기를 키워서 보여준다 (* 디폴트)
    overflow:hidden ==> 레이어 크기만큼만 보여준다
    overflow:auto ==> 내용에 따라 자동으로 스크롤을 만든다
    overflow:scroll ==> 무조건 스크롤바를 생성한다

31. 이미지의 성격에 알맞은 대체 텍스트를 alt 속성값으로 넣었으며,
링크에 대한 보다 자세한 설명은 title로 넣었음.
ex) <a href="" title="">, <img src="" alt="">

출처 - http://blog.naver.com/marine884k/140048492659