웹사이트 운영자라면 알아야할 html, css 상식

 

 

웹사이트 운영자라면 알아야할 html, css 상식

 

크리스마스는 잘 보내셨나요?

 

저는 25일에 광명 이케아 갔다가 엄청 고생하고 왔습니다 ㅎㅎ

 

생각보다 가는 대중 교통 편이 너무 복잡하더라구요.

 

결국 택시 타고 갔는데, 입구에서 30~40분을 기다리고, 레스토랑에서 20분 정도 기다리고

 

나오면서 길 못찾아 헤매고, 건물 안은 사람들이 미어 터집니다.

 

그럼에도 가볼만은 했다고 생각은 하지만.... 다음엔 사람 없을 때 가고 싶네요.

 

며칠 남지 않은 12월, 사람들 많은 데 가서 고생하지 마시고, 조용하고 한적한 곳에서

 

지난 일을 관조하는 것도 좋을 것 같습니다.

 

오늘은 연말 결산으로, 지금까지 써온 글 중에 사이트(티스토리, 블로그, 까페 포함) 운영자라면 알아두어야

 

할 html, css 상식을 다루어 볼까 해요.

 

그러니까 이 글은 티스토리 운영자를 포함하여 직접 HTML, CSS를 손대고 싶지만

 

두려움을 갖고 있는 사람들을 위한 기초적인 내용을 묶은 글과

 

HTML, CSS를 보다 깊게 공부하는 분들이 알아야할 필독 글이 포함돼 있습니다.

 

 

 

이건 정말 알아야 해!

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

html, css, javascript 주석 처리 방법

 

여기까지는 어렵지도 않고, 처음 접하는 분들은 흥미로운 내용일 거라 생각합니다.

 

특히 html, css를 직접 손볼 때 주석조차 모르시는 분들도 간혹 계시더라구요.

 

 

그 다음으로 아래 링크는 태그 작성이나 편집을 하시는 분들이라면 필요한 내용이지만

 

조금 어려울 수 있습니다. 하지만 한 번씩 읽어두시면, 읽지 않으신 것보다 사이트 운영이

 

 

한결 수월해지리라 생각합니다.

 

또 원하는대로 스타일이 적용되지 않을 때 그 이유를 알 수 있습니다.

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

css 선택자, 선택자 종류와 사용법

 

CSS 선택자 요약표

 

[css] 색상값 단위 5가지(rgba 포함)

 

css 길이 단위

 

스타일 적용 우선 순위와 속성 강제 적용 !important

 

티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유

 

 

 

 

html과 css를 공부하는 사람이라면 알아두어야 해!

 

아래 글은 html과 css를 본격적으로 공부하는 사람들이 필요한 내용입니다.

 

굳이 깊게 공부할 필요가 없는 부분은 지나쳐도 됩니다~

 

 

브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

크로스브라우징, 웹표준과 핵(hack)

 

박스 모델 이해하기

 

haslayout 이란 (IE버그 해결책)

 

브라우저 업체별 접두어(vendor prefix)

 

  

 

레아이웃 관련

 

span, div 태그 차이

 

DIV 태그를 이용하여 레이아웃 만들기

 

float 속성에 대하여

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

float를 취소하기 (clearfix 4가지 방법)

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

 

정렬하기

 

table 중앙 정렬하기

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

수직으로 가운데 정렬 방법 (다섯 가지)

 

 

 

글꼴 관련

 

글꼴을 지정하는 font 속성 배우기

 

font-style 속성 (normal, italic, oblique 차이)

 

font-weight 속성 (bold, 100~900, bolder, lighter)

 

font-variant 속성(normal, small-caps)

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

 

글꼴을 지정하는 font-family 속성(serif, sans-serif차이)

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

@import rule 사용법, link 태그와 차이

 

나눔고딕 웹폰트 적용, 제대로 배우기

 

 

 
IE6~8에 대응하기

 

반응형 스킨을 사용하고 있거나, HTML5버전과 CSS3의 각종 효과를 바라는 분들에게

 

필요한 내용입니다.

 

HTML5 요소와 CSS3 선택자나 속성들은 IE9 이하에서 지원이 되지 않는 경우가 많습니다.

 

하지만 우리나라에서는 아직도 IE 7, 8 이용자가 많기 때문에 그에 대응하는 방법을 알아 보아요~

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기