html & css guideline
Post on 10-Jun-2015
2.610 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML & CSS Guideline Joyfl 설진석
이 슬라이드는 초보자를 위한 것입니다. 고수분들은 가던 길 가세요.
Who? 연세대학교 수학과 SW Maestro 2기 스타트업 Joyfl Cofounder 웹 & 서버 개발자
cso@joyfl.net fb.me/theeluwin
@theeluwin
tag attribute value string text
comment
HTML5 Template
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body>
</html>
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!
WYSIWYG What 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; } .clear { clear: both; }
그러니 웬만하면 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; } #title { color: #770000; }
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; 을 쓰게 됨 이때 텍스트를 넣으면 다시 WYSIWYG에 어긋나게 됨 그래서 a 내용도 span으로 감싸는게 좋음
그럼 a에 inline-‐block을 안쓰면 되잖아요?
쓸일 많을껄?
tag는 의미에 맞게 사용하자
리스트는 ul table은 진짜 표에만
레이아웃 잡을때 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; } #title { color: #770000; }
id에는 prefix를 붙여라 context 때문
class는 클래스처럼 id는 인스턴스처럼 (혹은 자식클래스)
<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; }
옵션의 개념 = 상속 .property
.property-‐option .context .property
<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; }
결론
WYSIWYG하게 layout과 property 구분해서
텍스트 규칙을 지키고 의미에 맞는 tag를 사용
이것들을 지키면 IE가 아닌 이상
자동으로 브라우저 호환 됩니다
IE는 어떻게 하냐고?
if($.browser.msie) if(parseInt($.browser.version, 10) <= 8) for(var i = 0; i < 2000; i++) alert("IE를 사용하지 않겠습니다.");
IE는 답이 없어.. CSS hack 써야함..
아리 로밍 람머스 갱 케틀린 궁
IE 해결책들 있긴 한데.. 참..
<!-‐-‐[if IE]> <script type="text/javascript" src="html5.js"> </script>
<![endif]-‐-‐>
behavior: url("ie-‐css3.htc");
알아두면 좋은 것들
...이 아니라 알아야 하는 것들
jQuery Modernizr Bootstrap Rapha)l
써보셈
그냥 알아두면 좋을 것들
HTML Validator validator.w3.org
CSS Validator jigsaw.w3.org/css-validator
브라우저 기본 속성 초기화 theeluwin.kr/cloud/css/initializr.css
IE가 없어지는 그날까지
메멘 믓시엘
끗
top related