웹퍼블리싱 팁

1. HTML 코멘트:

<!-- 내용 -->

의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'.

CSS 코멘트:

/* 내용 */

의 형태로 되어 있는 부분이 CSS의 '코멘트(comment)'.

2.클래스 vs 아이디
같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다.
한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있다!)

font-weight~폰트 굵기:
사용 가능한 값은 얇은 순서로 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight: normal;은 font-weight: 400과 똑같고, font-weight: bold;는 font-weight: 700

150, 230과 같은 값은 사용불가~
폰트나 브라우저에 따라서 지원하는 폰트 굵기 값이 다름. 어떤 폰트는 100, 400, 700만 지원될 수도 있다는 뜻.

text-decoration:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;

line-height

위 사진에 파란 줄이 보이는데, 이 파란 줄 사이가 실제 내용이 들어가 있는 'content area'(콘텐츠 영역)이다. font-family와 font-size에 따라서 'content area'가 정해지고, line-height는 'content area'에 영향을 주지 않는다.

line-height를 통해서는 각 줄이 실질적으로 차지하는 공간을 정해줄 수 있다. 예를 들어서 99px로 설정하면 'content area'보다 40px이 많기 때문에 위 아래로 20px의 공간이 추가로 생긴다.

반대로 40px로 설정하면 'content area'보다 19px이 적기 때문에 위 아래로 -9.5px의 공간이 줄어든다.

font-family~폰트 바꿔줌

<span> tag & <div> tag
 <span>~본문에 영향 x
 <div>~본문에 영향 o아예 나뉘어짐