웹프로그래밍

Global It Leader!!


CSS


 
 

태그들이 원하는 위치에 가지 않을때

페이지 정보

작성자 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 3,544회 작성일 14-01-21 19:57

본문

이유는 여러가지겠죠
 
먼저 display 속성을 살펴봅시다.
 
모든 태그는 display 속성이 있어요.
 
block              ,        inline
 
block 타입은 한 줄을 차지함니다. 무조건 1줄을 차지해요
 
inline은 자리가 남으면 그뒤로 계속 태그를 추가 할 수 있어요.
 
 
 
여기 까지라면 우리 생각대로 모양이 나와야 하는데 안그럴것이야.
 
왜냐하면 inline 속성값을 가지면 margin, padding 값이 적용이 안됨니다.
 
그래서 크기가 맘대로 우왕 ㅋ
 
margin과 padding 을 적용하려면
 
display:block;
 
으로 해서 블록 형태로 바꿔주도록 합시다.
 
주의사항  
 
블록타입은 인라인 타입을 감쌀수 있지만
인라인 타입은 블록타입을 감쌀수 없습니다.
 
 
두번째로 float 속성  
 
하위 태그에 float 속성이 있으면
 
그 상위 태그는 높이를 잡지 못한다.
 
<div>
 <p style="float:left;">하잉 </p>
</div>
<div>
<p> 안녕핬ㅇ</p>
</div>
 
이경우 div는 높이를 잡지못해서 높이가 없게되고
밑에있는 div가 자리를 치고 올라온다.
 
이렇게 높이를 잡지못하면 테두리(border)도 병1신같이 그리고
백그라운드 이미지도 병1신같은 위치ㅔ 그려지고...
 
이럴땐
1.부모태그의 height 속성값에 값을 주어 크기를 지정 하거나
2.부모태그의 속성에도 float속성을 주면된다.
3.  :after 라는 가상 선택자를 활용한다.
 
근데 그 부모의 부모가 있으면
그놈도 float을 해야되고 그 float이 float을 부른다는것을 염두해두고 짜야한다.
 
3번은 조금 어려우니 설명하자면.
 
<a>
   <b> </b>
   <c></c>
</a>
인데. b가 float : left ,   c가 float : right 이라면. a는 높이를 못잡는다.
 
이경우
a:after{  불라불라 } 라고 하면
 
</a> 태그 밑에 하나의 가상 태그가 추가되는거다. 그냥 가상태그만 추가되봐야 없던 높이가 생기진 않는다. 그러니 아래와같이 스타일을 지정하자.
 
a:after{ content: "";          display:block;        clear: both; }
컨텐츠가 비면 빈컨텐츠라 크기가 없다. 그래서 높이를 못잡아줌 ㅠㅠ 빈문자열이라도 넣자.
디스플레이 타입이 inline이면 한줄 차지를 않기때문에 역시 높이를 못잡아준다.
clear : both 이전에 다루었던 내용이다. 위쪽에 float 속성이 있을경우 덮쳐서 겹쳐지지않고
그 밑에 위치한다.
 
위와같은 스타일 속성을 삽입하면 크기가 문제없이 지정된다.
 
 
float 속성에 하나더 말하자면 
 
 
이건 자기를 감싸고있는 태그만 호구로 만드는게 아니라
밑에 있는 태그가 위로 올라오게 만든다.
 
그럴땐 clear : left(right, both)속성을 사용하자.
 
<p style="float:left;">하잉 </p>
<p style="clear:left">메롱</p>  //이렇게 clear을 맞춰서 사용해주면 된다. 그럼 겹치지 않고 바로 밑에 붙어서 시작한다. 만약 위에 float 형식이 2종류가 다있으면 both를 사용하면된다.

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
72 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 8329 08-21
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7821 11-28
70 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7704 05-12
69 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6130 09-18
68 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5721 06-01
67 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5674 08-22
66 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4577 05-20
65 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4444 04-17
64 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4422 02-17
63 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4396 02-17
62 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4327 02-17
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4156 10-11
60 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3958 08-19
59 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3915 03-08
58 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3869 02-08
57 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3857 01-21
56 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3775 09-06
55 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3672 12-23
54 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3659 05-20
열람중 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3545 01-21