html & css guideline

HTML & CSS Guideline Joyfl 설진석

이 슬라이드는 초보자를 위한 것입니다. 고수분들은 가던 길 가세요.

Who? 연세대학교 수학과 SW Maestro 2기 스타트업 Joyfl Cofounder 웹 & 서버 개발자

[email protected] 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 만!

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가 없어지는 그날까지

메멘 믓시엘

html & css guideline

Technology