총 게시물 62건, 최근 0 건 안내 RSS 글쓰기
이전글  다음글  목록 글쓰기
[TIP&TECH]

초보자분들을 위한 CSS 20가지 유용한 TIPS (하드코딩하는사람들)

글쓴이 : 등푸른망둥어 날짜 : 2014-06-24 (화) 11:29 조회 : 10447
글주소 : http://www.androidside.com/B57/768
 
  데브렉 닷넷마스터
윈도폰7, 실버라이트, ASP.NET, C#, Ajax, jQuery 닷넷 강의.
www.devlec.com
  코드잇, 온라인 코딩 스쿨
온라인에서 실습까지 가능한 대세 HTML/CSS 강의. 지금 무료로 시작해보세요!
www.codeit.kr
  SBS아카데미컴퓨터학원문성현
강남역컴퓨터학원, 방학특강할인!, 맞춤별 교육, 교육브랜드대상, 수강료&위치조회
sbs-artcom.co.kr
신청하기


구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다.
CSS 관련 해서 참고 하시고 많은 도움 받았으면 합니다.
 
 
 
0.CSS의 기본적인 형태 및 속성 설명

링크 : http://ko.learnlayout.com/
 
1.Use Reset.css
 
ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다.
 
프레임워크가 사용하는 몇몇 reset.css 안내
 

2. Use Shorthand CSS ( css 문장을 짧게 표시 )
 
.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left;
    }
 
위 css 를  아래처럼 변경 할 수 있습니다.

.header {
      background: #fff url(image.gif) no-repeat top left
    }
 

3. class 와 ID 이해

클래스는 "." 으로 표시합니다.
ID는 "#" 으로 표시합니다.
 

4. <li> 유용한 li
 
*  li 메뉴,리스트 등을 만들 때 아주 좋습니다.
 
 
5. table 를 버리고 , div 사용하도록 노력
 
div 사용하면 스타일이 유연하게 변경 할 수 있습니다.
, table 은 고정 되어 있습니다
 
참고 사이트
 
6. css 디버그 툴
 
css 이해하는데 도움이 되고, 문제 원인을 쉽게 발견 할 수 있습니다.
 
참고사이트
 

7. 길게 늘어놓으는 css 를 피하세요.
 
ul li {.... }
ol li {...  }
table tr td { ... }
 
위를  단축
li {...}
td {...}
 
실제 css 적용되는 부분에 삽입 하세요

8. !Important
 
!Important 지정된 곳이 css 가 우선 적용 됩니다. (css 가 덮어 쓰기가 되지 않습니다.)
 
.page { background-color:blue !important;   background-color:red;} 
 
.page에 background-color 는 blue 가 적용 됩니다.

9. 텍스트 이미지 교체
 
h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}
 
 
10. css Positioning 을 이해
 
아래의 참고 사이트는 css position 을 이해하는데 상당히 도움이 됩니다.
 
참고사이트
 
 
11. css @Import Vs <link>
 
css 를 불러오는 2가지가 있습니다. @import, <link>
 
<link href="styles.css" type="text/css" />
<style type="text/css">@import url("styles.css");</style>
@import  sytles 위처럼 숨길 수 있습니다.
 
link  미디어 타입을 지정 할수 있습니다.
<link href="styles-nons4.css" media="all" type="text/css" />
 
 
12. css 디자인 폼
form 들을 css 로 디자인 할 수 있습니다
 
참고 사이트

 
13. css를 웹사이트 적용할지 도움을 받으세요
 
css 가지고 멋진 사이트를 만들고 싶으시면 아래의 참고사이트를 확인하고 도움을 받으세요
 
참고 사이트
 
 
14. 둥근 모서리 코너 css
 

 
15. Keep CSS Codes Clean ( CSS 소스 정리 )
css 코드가 난장판이면 , 리팩토리 하느라 시간을 낭비 하지 마세요
 
아래의 주소에서 리팩토링을 해주네요.
 
[12 가지 원칙, 당신의 코드를 깨끗히 하는 ]
http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/
 
 
16.  px vs em
 
CSS 측정 단위
em-height (em), Pixel (px), Percentage (%)
Inch (in), Centimeter (cm) & Millimeter (mm)
 
 
17. CSS 브라우져 호완성 표
 

18. 디자인 멀티 컬럼 CSS
 
CSS 멀티 컬럼 레이아웃 잡을 때 도움되는 참고 사이트 
 
 
19. 공짜 CSS 에디터
 
 
 
20. CSS Media Types 의 이해
 
 
 
* 짧은 영어로 이해하려고 애썼어요, 오타나 잘못된 정보 보이시면 댓글 달아주시면 감사드려요.
 
 
 



등푸른_망둥어

등푸른망둥어 님의 웹(WEB) 최신글 [더보기]


추천/비추천 클릭하면 추천받으신 분, 추천하신 분 모두에게 포인트가 지급됩니다.

등푸른망둥어 2014-06-24 (화) 13:55
html / javascript / jquery / css / mobile 등의 수집 위키.
댓글주소
한사글 2014-07-07 (월) 07:50
감사합니다
댓글주소
참눈이 2014-07-09 (수) 11:40
감사합니다. 
댓글주소
rhinoshorn 2014-11-26 (수) 06:09
고맙습니다 :)
댓글주소
크로이스터 2014-11-26 (수) 12:20
무엇보다도... 사이트에 필요하고 에누리 없이 필요한 사항만 담아 놓는것이 중요하죠 ㅎㅎ
댓글주소
yoru 2014-11-26 (수) 22:09
감사합니다!
댓글주소
에디야 2014-11-28 (금) 14:52
잘보고 갑니다.
댓글주소
딸기우유주까 2014-11-30 (일) 16:06

잘 봤네요 ㅎㅎ

감사합니다.

댓글주소
leoni 2014-12-01 (월) 11:48
웹 작업할 때 유용할 것 같아요. 감사합니다.
댓글주소
일우정 2014-12-29 (월) 09:47
감사해요~
댓글주소
일우정 2014-12-29 (월) 11:52
잘쓸게요 감사합니다
댓글주소
밥사조오 2015-01-19 (월) 16:10
감사합니다.잘쓰겠습니다.
댓글주소
그아이 2015-02-02 (월) 11:30
감사합니다.

댓글주소
감자들 2015-02-07 (토) 11:26
좋은글 참고가 됩니다... 스크랩하여 보겠습니다
댓글주소
안녕한동이 2016-02-17 (수) 10:44
감사합니다~잘 쓰겠습니당!!
댓글주소
이전글  다음글  목록 글쓰기

총 게시물 62건, 최근 0 건 안내 RSS
번호 분류 제목 글쓴이 날짜 추천 비추천 조회
62 소스코드
 $scope.page = 0;   $scope.total = 1;   $scope.restaurants = [];   $scope.getRestaurants = function () {     $scop…
조각 08-10 2 0 1541
61 소스코드
감사합니다.
우리큰형님 07-08 3 1 2520
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 5 0 4305
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3970
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3824
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 4365
56 TIP&TECH
A self-hosted chat app for small teams built by Security Compass. Features and Stuff BYOS (bring your own server) Persistent messages M…
카이로 03-18 3 0 6459
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 4823
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 20645
53 TIP&TECH
$sudo apt-get install python-software-properties python g++ make  $sudo add-apt-repository ppa:chris-lea/node.js  $sudo apt-get update…
카이로 12-18 4 0 6041
52 소스코드
50+ FREE BEAUTIFUL JQUERY CSS3 MENU PLUGINS & TUTORIALS Free beautiful jQuery CSS3 menu navigation plugin and tutorials that it is an important…
카이로 11-28 3 0 5727
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 10448
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 6347
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 7419
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 13143
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 6253
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 5686
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 8384
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 7427
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 7030
 1  2  3  4  맨끝
 


Copyright ⓒ www.androidside.com. All rights reserved.
채팅 권한: 글쓰기 1개
2레벨 이상만 대화 가능
공개 채팅: 평일 !(9시 ~ 17시),토,일
안사2 변경사항 보러가기 챗방이 잘 안보이면 크롬에서 접속해주세요
챗방 숨기기 |  챗방 보이기