자바스크립트| 라이센스요청(안내) 주문제작 | 질문답변| 팁앤태크| 강좌 | 설문
 
 
  포인트안내 | 입금통보 | 제이쿼리 라이센스안내
오늘 : 138 명 | 어제 : 245 명 | 현재 : 42 명
 
[공지사항] 5월출첵이벤트 (8)
+ 강좌 +
- 부족하지만 아는선에서 이제 시작하는 분들께 조금 도움이 될까 하여 작성해 보았습니다
- 댓글남겨주시면 힘이 되고 남기신 글 모두 확인되니 필요한 경우 답변 받을 수 있습니다
 
작성일 : 13-06-10 14:02
제목 [자바스크립트] jquery(제이쿼리)를 위한 기초 스타일
작성자 디블
조회수 7,742    http://designblack.com/jquery/study/jquery01.html [706]
대체로 css라는 틀위에 jquery(제이쿼리) 인테리어공사(?)가 들어가니 필수로 css는 알고 계셔야합니다.

전문가수준을 요하는건 아니니 몇가지 꼭 알고 계셔야 하는 부분들 살펴보고 가겠습니다...
css 한두번은 해 보셨어야 이해 될겁니다.


내용을 살펴보시고 만들어진 예제를 확인하세요.
추가로 꼭 알고 계셔야 하는 내용은 계속 보충하도록 하겠습니다.


inline , block

display:inline
display:block
display:none
display:inline-block

어떻게 보여질지 결정합니다.
inline 은 한줄로 옆으로 길게 연결됩니다.
block 는 반대로 줄바꿈되어 아래로 연결되겠죠...
none는 보이지 않게 하고
inline-block 는 inline처럼 옆으로 연결되지만 block으로 인식하게 합니다.
여기서 포인트는 inline은 한줄로 연결되는 개념이라 상하개념이 없습니다.
하여 상하 margin, padding 값이 들어가지 않고 width, heigh 값도 가질 수 없습니다
inline요소처럼 보이게하면서 상하 margin , padding을 적용해야 하는경우 width, height 을 적용해야 하는경우 inline-block 를 적용 할 수 있습니다.
다만 inline요소에 inline-block을 적용해야 하며 block요소에 inline-block를 적용하는경우 ie6,7에선 block요소로 보입니다

inline요소는 한줄로 보여지는 요소들로 a, span, b, img,... 등이 있습니다
block요소는 줄바꿈이 되는 요소들로 p, div, ul, ol, dl,... 등이 있습니다



relative , absolute

position:relative
position:absolute
position:fixed

배치되는 기준을 결정합니다.
relative 는 자기 위치를 고수하며 자신이 내부요소의 배치 기준이 되도록 합니다.
높이값을 조정하면 아래 요소가 밀리게 됩니다

absolute 는 자기 위치를 버리고 부모요소의 relative 를 기준으로 합니다.
높이값을 조정해도 아래 요소는 영향을 받지 않습니다

fixed는 스크롤에 관계없이 창을 기준으로 배치됩니다.
상하단에 항상 떠 있는 배너나 고정 메뉴들이죠

움직임을 주게 되는 경우 필수내용입니다


float

플롯을 설명할때 부유란 말을 많이 씁니다..
부유란 말대로 공중에 붕 띄우다란 의민데... 인라인요소인 텍스트가 부유된 요소 주위로 흐르게 할때 이용하라고 만든거 같습니다...
근데 소스들을 보면 거의 메뉴같은걸  나열할때 많이 쓰게 되는거 같습니다
list 요소로 메뉴를 구성하고  가로로 나열하는게 일반적이라 float:left 를 이용하고 있습니다
가로로 나열하라고 만든 요소는 아닌거 같은데 제가 봐도 대안이 없어서 쓰는게 아닌가 싶습니다...
inline-block이 block요소에 적용된다면 float 을 쓸 일이 거의 없지 않았을까 싶네요 

float:left , float:right 한후 해제할땐 clear:both 를 이용합니다.


overflow:hidden

마스크의 역활을 합니다.
모션을 줄경우 틀 안에서만 내용이 보여져야 하고 틀 밖에선 보이지 말아야 합니다.
이렇게 마스크로 내부만 보이도록 만들 수 있습니다.
마비 13-11-28 10:07
좋은 정리 감사해용~*좋은 하루 되셔용
사랑이피요 14-07-09 17:48
......;;
네오비스 14-11-26 02:13
좋은정보ㅎㅎ
phantom 15-01-22 09:18
큰일이네..T..T  뭐라 하는지 하나도 이해를 못해서.. 이걸 이해해야 다른것도 할수 있을건데..
김종우 15-01-30 10:19
아... 좋은정보네요 ^^
근데 더 초보자 들을위해 예제를 넣으시면 더 완벽할듯 합니다 ^^
     
디블 15-01-30 10:51
상단에 예제 링크가..^^
길수사랑 15-02-18 03:43
아 좋은 정보네요 ^^
달달허니 15-09-22 09:25
머리에 쏙쏙 들어오는 내용~~ 감사합니다.~^^
타마고산도 18-10-02 11:03
봐도봐도 어려운... ㅜㅜ

 
Total 76
글번호 제목 작성자 작성날짜 조회수
초보는 초보가 가르쳐야 잘 가르친다...ㅋㄷ (66) 디블 04-27 12936
76 [자바스크립트] css text and img menu , ir , javascript menu (19) 디블 06-13 7833
75 [자바스크립트] 제이쿼리 셀렉트, css , bind (9) 디블 06-12 8041
74 [자바스크립트] 제이쿼리 시작 (2) 디블 06-10 7667
73 [자바스크립트] jquery(제이쿼리)를 위한 기초 스타일 (9) 디블 06-10 7743
72 [자바스크립트] 표준코딩? 비표준코딩? (5) 디블 06-04 7404
71 [자바스크립트] jquery(제이쿼리)? (4) 디블 06-01 7368
70 [플래시] 3.0_contextMenu (3) 디블 07-22 7894
69 [플래시] 3.0_php (11) 디블 06-22 5149
68 [플래시] 3.0_xml (10) 디블 06-18 5176
67 [플래시] 3.0_imgSkew (5) 디블 06-18 2729
66 [플래시] 3.0_textFormat (1) 디블 06-18 2992
65 [플래시] 3.0_loadMovie (6) 디블 06-18 3526
64 [플래시] 3.0_tween (2) 디블 06-17 2922
63 [플래시] 3.0_link (1) 디블 06-17 2776
62 [플래시] 3.0_hitTest (1) 디블 06-17 3603
 1  2  3  4  5  6  
디자인블랙 | 공세헌 | 부산 해운대구 중동 달맞이경동메르빌 104동 1607호 | 010-4577-5965
메일 : designblack@nate.com : 네이트온 : 10~18시
사업자등록번호 605-22-56543 | 통신판매신고 제 2008-부산진-0178호 | 이용약관
농협 : 177506-51-008469 : 공세헌