HTML & CSS Guideline        Joyfl        설진석
이 슬라이드는 초보자를 위한 것입니다.   고수분들은 가던 길 가세요.
Who?연세대학교 수학과SW Maestro 2기스타트업 Joyfl Cofounder웹 & 서버 개발자                          cso@joyfl.net                       fb.m...
tag	  attribute	     value	    string	      text	   comment	  
HTML5 Template<!DOCTYPE	  html>	  <html>	   	  <head>	   	   	   	  <title></title>	   	  </head>	   	  <body>	   	  </bod...
Encoding   <meta	  http-­‐equiv="content-­‐type"	  content="text/html;	  charset=UTF-­‐8"	  />	  
CSS        <link	  type="text/css"	  rel="stylesheet"	  href="style.css"	  />	  
Javascript<script	  type="text/javascript"	     src="script.js"></script>	  
<!DOCTYPE	  html>	      잊지 마라	  
standalone tag는	      <tag	  />	  
<br> 쓰지마	   <br	  /> 써	  
아니 그냥 <br	  />도 쓰지마..	  
img에는 alt가 있어야 한단다	  
HTML은 WYSIWYG!
WYSIWYGWhat You See Is What You Get
<div	  id="a">	   	  <div	  id="b">나쁜 예</div>	  </div>	  #b	  {	  float:	  left;	  }	  
#a안에 #b가 있음#b에는 내용이 있는데  #a 높이가 0px..
나쁜 이유?0px짜리 안에 글자가 들어가있으면    안보이는게 정상이잖아?
<div	  id="a">	   	  <div	  id="b">좋은 예</div>	   	  <div	  class="clear"></div>	  </div>	  #b	  {	  float:	  left;	  }	  ....
그러니 웬만하면float 후 clear 해주세요
팁?display:	  inline-­‐block;  사용해보고 몸으로 느끼셈
layout과 property를 구분하라
<h1	  id="title">나쁜 예</h1>	  #title	  {	    	  margin-­‐left:	  10px;	    	  color:	  #770000;	  }	  
<div	  id="title-­‐wrap">	   	  <h1	  id="title">좋은 예</h1>	  </div>	  #title-­‐wrap	  {	  margin-­‐left:	  10px;	  }	  #ti...
color는대문자 & 6글자 혹은rgb, rgba로 통일
#wtf	  {	  color:	  #aC9;	  }	  #good	  {	  color:	  #AACC99;	  }	  
0px은 없다다만 0이 있을 뿐
#wtf	  {	  margin:	  0px;	  }	  #good	  {	  margin:	  0;	  }	  
텍스트는h, p, span 만!
<div>나쁜 예</div>	  <div>	   	  <span>좋은 예</span>	  </div>	  
a는 왜 안되냐고?
a 안에 img가 있는 경우가 많은데a가 display:	  inline-­‐block; 을갖고 있으면 아랫부분에 약간의 여백이 생김그럼 WYSIWYG하지 않기 때문에line-­‐height:	  0; 을 쓰게 됨이때 ...
그럼 a에 inline-­‐block을   안쓰면 되잖아요?
쓸일 많을껄?
tag는 의미에 맞게 사용하자
리스트는 ultable은 진짜 표에만
레이아웃 잡을때 table 쓰다 걸리면해킹해서 웹쉘 설치한다음 sudo	  rm	  –rf	  /*	       해버린다
네이밍 가이드라인
구분자는 hyphen으로!
header-­‐wrap	   headerWrap	  header_wrap	  
사실 취향임..
(w+)-­‐wrap 을 써서layout과 property를 구분
<div	  id="title-­‐wrap">	   	  <h1	  id="title">요러케</h1>	  </div>	  #title-­‐wrap	  {	  margin-­‐left:	  10px;	  }	  #tit...
id에는 prefix를 붙여라   context 때문
class는 클래스처럼	   id는 인스턴스처럼	   (혹은 자식클래스)
<div	  id="header">	   	  <h1	  id="header-­‐title"	  class="title"></h1>	  </div>	  <div	  id="content">	   	  <h1	  id="...
옵션의 개념 = 상속     .property	   .property-­‐option	  .context	  .property	  
<span	  class="name">그냥 이름</span>	  <span	  class="name	  name-­‐blue">파란 이름</span>	  <div	  class="context">	   	  <span	...
결론	  
WYSIWYG하게layout과 property 구분해서    텍스트 규칙을 지키고   의미에 맞는 tag를 사용
이것들을 지키면	      IE가 아닌 이상	  자동으로 브라우저 호환 됩니다	  
IE는 어떻게 하냐고?
if($.browser.msie)	   	  if(parseInt($.browser.version,	  10)	  <=	  8)	   	   	  for(var	  i	  =	  0;	  i	  <	  2000;	  i...
IE는 답이 없어..CSS hack 써야함..
아리 로밍람머스 갱케틀린 궁
IE 해결책들있긴 한데.. 참..
behavior:	  url("ie-­‐css3.htc");	  	  <!-­‐-­‐[if	  IE]>	    	  <script	  type="text/javascript"	  src="html5.js">	    	 ...
알아두면 좋은 것들...이 아니라 알아야 하는 것들
jQueryModernizrBootstrap Rapha l
써보셈
그냥 알아두면 좋을 것들
HTML Validatorvalidator.w3.org
CSS Validatorjigsaw.w3.org/css-validator
브라우저 기본 속성 초기화theeluwin.kr/cloud/css/initializr.css
IE가 없어지는 그날까지   메멘 믓시엘
끗
Upcoming SlideShare
Loading in...5
×

HTML & CSS Guideline

2,637

Published on

초보자를 위한 HTML & CSS 가이드라인

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • 몇가지 안좋은 예가 있는것 같아서 덧글 남깁니다.

    1. float을 쓸때 부모 태그에 높이가 없는 경우, 부모태그도 같이 float이 있거나 overflow 속성이 지정되어있으면 해결 됩니다.

    2. clear를 위한 class를 먹인 태그를 따로 쓰는건 의미에 맞지 않는 보이기위한 태그를 늘리는게 되서 안좋습니다. 되도록 밑에 위치하는 태그에 속성을 먹이는 식으로 자연스럽게 넘어가는게 좋습니다.

    3. display-block은 인라인 속성의 태그를 옆으로 붙여서 보여주기 때문에 공백문자 문제가 생깁니다. block 태그를 float해서 정렬하는 식으로 해결하는게 문제가 덜 생깁니다. 정말 필요한 상황에만 테스트를 충분히하고 쓰시는걸 추천합니다.

    4. wrap 같은 클래스 이름으로 오직 디자인을 위한 태그를 만드는 것보다 의미를 부여해서 이름을 지정하고 레이아웃을 나누는게 좋습니다. 해당 구역의 역활을 제대로 지정하는게 좋겠습니다. 예제에서는 id='title-wrap'보다 의미를 살려서 'header' 같은게 좋겠네요.

    5. a에도 텍스트 넣어도 됩니다. span태그를 남발하는건 여전히 의미없는 태그를 늘리는 결과만 생깁니다. span태그는 문단에 기존 태그로는 표현하기 힘든 특별한 부분을 직접 정의할때만 사용하시는게 좋습니다.

    6. a태그 안에 img가 들어가는것도 안좋은 패턴입니다. 그리고 이상황에서 여백이 생기는 이유는 img의 기본속성이 인라인이라서 그렇습니다. 블럭으로 지정하면 공백으로 인한 아랫부분 여백 문제를 피해갈 수 있습니다.

    7. id는 단 하나만 존재하는 유니크한 태그에 쓰고 class는 반복되서 써야할 경우 쓰는게 가장 합리적입니다.

    8. class에 이름을 넣을때 'name name-blue' 하고 따로 지정하는것보다 'name blue' 이렇게 간결하게 지정한 후 css에선 .name.blue {} 이런식으로 붙여서 적으면 됩니다.

    9. IE는 6~7만 포기한다면 굳이 직접 핵 코드를 작성하지 않아도 8부터는 html5shiv를 이용해서 표준에 맞는 코딩을 할 수 있습니다.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,637
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
34
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

HTML & CSS Guideline

  1. 1. HTML & CSS Guideline Joyfl 설진석
  2. 2. 이 슬라이드는 초보자를 위한 것입니다. 고수분들은 가던 길 가세요.
  3. 3. Who?연세대학교 수학과SW Maestro 2기스타트업 Joyfl Cofounder웹 & 서버 개발자 cso@joyfl.net fb.me/theeluwin @theeluwin
  4. 4. tag  attribute   value   string   text   comment  
  5. 5. HTML5 Template<!DOCTYPE  html>  <html>    <head>        <title></title>    </head>    <body>    </body>  </html>  
  6. 6. Encoding <meta  http-­‐equiv="content-­‐type"  content="text/html;  charset=UTF-­‐8"  />  
  7. 7. CSS <link  type="text/css"  rel="stylesheet"  href="style.css"  />  
  8. 8. Javascript<script  type="text/javascript"   src="script.js"></script>  
  9. 9. <!DOCTYPE  html>   잊지 마라  
  10. 10. standalone tag는   <tag  />  
  11. 11. <br> 쓰지마   <br  /> 써  
  12. 12. 아니 그냥 <br  />도 쓰지마..  
  13. 13. img에는 alt가 있어야 한단다  
  14. 14. HTML은 WYSIWYG!
  15. 15. WYSIWYGWhat You See Is What You Get
  16. 16. <div  id="a">    <div  id="b">나쁜 예</div>  </div>  #b  {  float:  left;  }  
  17. 17. #a안에 #b가 있음#b에는 내용이 있는데 #a 높이가 0px..
  18. 18. 나쁜 이유?0px짜리 안에 글자가 들어가있으면 안보이는게 정상이잖아?
  19. 19. <div  id="a">    <div  id="b">좋은 예</div>    <div  class="clear"></div>  </div>  #b  {  float:  left;  }  .clear  {  clear:  both;  }  
  20. 20. 그러니 웬만하면float 후 clear 해주세요
  21. 21. 팁?display:  inline-­‐block; 사용해보고 몸으로 느끼셈
  22. 22. layout과 property를 구분하라
  23. 23. <h1  id="title">나쁜 예</h1>  #title  {    margin-­‐left:  10px;    color:  #770000;  }  
  24. 24. <div  id="title-­‐wrap">    <h1  id="title">좋은 예</h1>  </div>  #title-­‐wrap  {  margin-­‐left:  10px;  }  #title  {  color:  #770000;  }  
  25. 25. color는대문자 & 6글자 혹은rgb, rgba로 통일
  26. 26. #wtf  {  color:  #aC9;  }  #good  {  color:  #AACC99;  }  
  27. 27. 0px은 없다다만 0이 있을 뿐
  28. 28. #wtf  {  margin:  0px;  }  #good  {  margin:  0;  }  
  29. 29. 텍스트는h, p, span 만!
  30. 30. <div>나쁜 예</div>  <div>    <span>좋은 예</span>  </div>  
  31. 31. a는 왜 안되냐고?
  32. 32. a 안에 img가 있는 경우가 많은데a가 display:  inline-­‐block; 을갖고 있으면 아랫부분에 약간의 여백이 생김그럼 WYSIWYG하지 않기 때문에line-­‐height:  0; 을 쓰게 됨이때 텍스트를 넣으면 다시 WYSIWYG에어긋나게 됨그래서 a 내용도 span으로 감싸는게 좋음
  33. 33. 그럼 a에 inline-­‐block을 안쓰면 되잖아요?
  34. 34. 쓸일 많을껄?
  35. 35. tag는 의미에 맞게 사용하자
  36. 36. 리스트는 ultable은 진짜 표에만
  37. 37. 레이아웃 잡을때 table 쓰다 걸리면해킹해서 웹쉘 설치한다음 sudo  rm  –rf  /*   해버린다
  38. 38. 네이밍 가이드라인
  39. 39. 구분자는 hyphen으로!
  40. 40. header-­‐wrap   headerWrap  header_wrap  
  41. 41. 사실 취향임..
  42. 42. (w+)-­‐wrap 을 써서layout과 property를 구분
  43. 43. <div  id="title-­‐wrap">    <h1  id="title">요러케</h1>  </div>  #title-­‐wrap  {  margin-­‐left:  10px;  }  #title  {  color:  #770000;  }  
  44. 44. id에는 prefix를 붙여라 context 때문
  45. 45. class는 클래스처럼   id는 인스턴스처럼   (혹은 자식클래스)
  46. 46. <div  id="header">    <h1  id="header-­‐title"  class="title"></h1>  </div>  <div  id="content">    <h1  id="content-­‐title"  class="title"><h1>  </div>   .title  {    font-­‐size:  20px;    color:  #770000;   }   #content-­‐title  {  font-­‐size:  10px;  }  
  47. 47. 옵션의 개념 = 상속 .property   .property-­‐option  .context  .property  
  48. 48. <span  class="name">그냥 이름</span>  <span  class="name  name-­‐blue">파란 이름</span>  <div  class="context">    <span  class="name">특정 상황 내의 이름</span>  </div>   .name  {  text-­‐shadow:  0  0  1px  #000000;  }   .name-­‐blue  {  color:  #000077;  }   .context  .name  {  color:  #770000;  }  
  49. 49. 결론  
  50. 50. WYSIWYG하게layout과 property 구분해서 텍스트 규칙을 지키고 의미에 맞는 tag를 사용
  51. 51. 이것들을 지키면   IE가 아닌 이상  자동으로 브라우저 호환 됩니다  
  52. 52. IE는 어떻게 하냐고?
  53. 53. if($.browser.msie)    if(parseInt($.browser.version,  10)  <=  8)      for(var  i  =  0;  i  <  2000;  i++)        alert("IE를 사용하지 않겠습니다.");  
  54. 54. IE는 답이 없어..CSS hack 써야함..
  55. 55. 아리 로밍람머스 갱케틀린 궁
  56. 56. IE 해결책들있긴 한데.. 참..
  57. 57. behavior:  url("ie-­‐css3.htc");    <!-­‐-­‐[if  IE]>    <script  type="text/javascript"  src="html5.js">    </script>  <![endif]-­‐-­‐>    
  58. 58. 알아두면 좋은 것들...이 아니라 알아야 하는 것들
  59. 59. jQueryModernizrBootstrap Rapha l
  60. 60. 써보셈
  61. 61. 그냥 알아두면 좋을 것들
  62. 62. HTML Validatorvalidator.w3.org
  63. 63. CSS Validatorjigsaw.w3.org/css-validator
  64. 64. 브라우저 기본 속성 초기화theeluwin.kr/cloud/css/initializr.css
  65. 65. IE가 없어지는 그날까지 메멘 믓시엘
  66. 66.
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×