<div>ㅇㅇ
<span>
<a href="#">안녕하세요?</a>
</span>
<span style="background:url(images/bg_sprite.png) 0 -1763px;padding-left:39px;"></span>
</div>
아직 완벽히 이해한 것은 아니나,
위와 같은 경우 39px 해당하는 만큼 백그라운드 이미지가 출력이 된다.
다만, 같은 span태그 옆에서 입력되어야 하며,
다른 인라인 태그가 옆에 있어도 나타나지 않는다.
잘 이해가 안간다. 무조건 같은 스팬 태그 여야만 한다.
| 내용물이 없는 태그에 백그라운드 넣어주기 (0) | 2013.07.08 |
|---|---|
| div안의 div? (0) | 2013.07.08 |
| text-align 속성 (0) | 2013.07.06 |
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
| float:left (0) | 2013.07.04 |
백그라운드를 적용하기 위해서는 그것을 차지할 공간이 필요하다.
내용물이 없는 경우에는 강제로 지정을 해주는 수밖에 없는데,
먼저 width와 height값을 설정을 해주어야 한다.
블락 요소에는 상관이 없지만,
인라인 요소에는 display:block;을 적용해주거나,
또한가지!!!!!!
float 속성을 이용하면, width와 height값 적용이 가능하다.
float 속성은 요소를 display:inline-block속성으로 바꿔주는 것 같은데,
맞는지 확실하진 않지만, 맞는 듯 하다.
inline요소지만, block의 속성인 margin,height,padding,width를 다 사용할 수 있게 된다.
| span의 백그라운드 적용 (0) | 2013.07.08 |
|---|---|
| div안의 div? (0) | 2013.07.08 |
| text-align 속성 (0) | 2013.07.06 |
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
| float:left (0) | 2013.07.04 |
<div class="up1_div">
우항항
</div>
<div class="up2_div">
<div style="margin-top:30px;">
띠밤바 띠밤바
</div>
</div>
만약 이와같은 스타일이 있다면, up2_div에서 margin-top 30px이 아니고 , up2_div에서 margin-top:30px;이다
즉 div는 내용물이 없으면 하나로 움직인다.
| span의 백그라운드 적용 (0) | 2013.07.08 |
|---|---|
| 내용물이 없는 태그에 백그라운드 넣어주기 (0) | 2013.07.08 |
| text-align 속성 (0) | 2013.07.06 |
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
| float:left (0) | 2013.07.04 |
text-align으로 text뿐만 아니라 그 안의 다른 속성도 정렬을 해줄 수 있다.
참고적으로 p태그 안에 div태그는 들어갈 수 없다 (예외)
<div style="text-align:right;">
<span>
이은성
</span>
</div>
이 태그도 오른쪽으로
<div style="text-align:right;">
<p>
이은성
</p>
</div>
이 태그도 오른쪽으로 정렬이 된다.
| 내용물이 없는 태그에 백그라운드 넣어주기 (0) | 2013.07.08 |
|---|---|
| div안의 div? (0) | 2013.07.08 |
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
| float:left (0) | 2013.07.04 |
| min-height (0) | 2013.07.04 |
inline element / block element
인라인 엘리먼트
width, height, margin , padding 속성값 설정 불가능 한줄로 인식
block level 요소 포함 불가능
a, img, object, br, script, map, q, sub, sup, span, bdo 등
margin 좌우값? padding값 좌우하단
인라인엘리먼트는 좌우마진만 적용이 가능하고!!
좌우그리고 하단으로만 패딩적용이 가능하다!! 정말 어렵구나 ㅋㅋㅋ복잡스럽게도 만들었다증말
블락 엘리먼트
width,height, margin,padding 속성값 설정 가능 자동줄바꿈
다른 요소 포함 가능
p,h1~h6,ol,ul,dl,div,noscript, blockquote, form, hr, table, fieldset, address 등.
*블락 엘리먼트안에는 블락인라인 모두 포함할 수 있으나 p태그 안에 div태그가 들어갈 수는 없다. (예외)
안녕
| div안의 div? (0) | 2013.07.08 |
|---|---|
| text-align 속성 (0) | 2013.07.06 |
| float:left (0) | 2013.07.04 |
| min-height (0) | 2013.07.04 |
| Javascript_window.onload (0) | 2013.07.04 |
| text-align 속성 (0) | 2013.07.06 |
|---|---|
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
| min-height (0) | 2013.07.04 |
| Javascript_window.onload (0) | 2013.07.04 |
| !important (0) | 2013.07.04 |
min-height는 말그대로 최소높이이다.
만약 min-height:100px;로 잡으면
내용물이 만약 100px이하라고 하더라도, min-height는 100px이하로 줄어들지 않는다.
그러나 100px 이상이 될경우 늘어나게 높이값은 증가하게 된다.
ie6에서 이 스타일은 적용되지 못하는데
그래서 보완된 것이
_height이다
_를 붙여주게 되면 다른 브라우저에서는 적용이 안되다가,
ie6에서만 효력을 발휘하게 된다. 모든 스타일속성에 대해서 동일하다. 앞에 _만 붙여주면 ie6에서만 먹는다.
근데 ie6를 쓰는 곳이 많은거야??;; 외국에서 쓰나,,,
| 인라인과 블락엘리먼트 (0) | 2013.07.04 |
|---|---|
| float:left (0) | 2013.07.04 |
| Javascript_window.onload (0) | 2013.07.04 |
| !important (0) | 2013.07.04 |
| css - color 적용법. (0) | 2013.07.03 |
window.onload의 역할이 무엇인가?
우선 컴파일이란 용어를 알 필요가 있는데,
컴파일이란, 명령어를 번역하는 것, 즉 명령을 해석하는 것을 말한다.
컴파일이 될 시에, 위에서부터 아래로 읽어지게 되는데,
만약,
document.getElementById("abc").value
<input type="" id="abc" />
만약 이 순서로 될 시에는, 위의 abc가 정의되기 전이라 에러가 발생하게 된다.
그러나 window.onload라는 이벤트를 잡아주면, dom이 완성된 후, 읽혀지게 되므로 에러가 발생하지 않게 된다.
| float:left (0) | 2013.07.04 |
|---|---|
| min-height (0) | 2013.07.04 |
| !important (0) | 2013.07.04 |
| css - color 적용법. (0) | 2013.07.03 |
| specificity 우선순위 (0) | 2013.07.03 |
!important의 기능은
용도는 스타일 적용의 우선순위가 다 무시되고,
1순위로 강제적 지정이 된다는 것이다.
예를 들어서,
<style>
p{color:red !important;}
</style>
<body>
<p style="color:green;">안녕?</p>
</body>
이경우에 안녕? 의 폰트컬러는 red가 된다.
| min-height (0) | 2013.07.04 |
|---|---|
| Javascript_window.onload (0) | 2013.07.04 |
| css - color 적용법. (0) | 2013.07.03 |
| specificity 우선순위 (0) | 2013.07.03 |
| display 속성 (0) | 2013.07.03 |
css에서 폰트컬러, 즉 color를 지정하는 방법은 3가지가 있다.
div{ color:red;}
div{ color:#000000}
div{color:rgb(10%,10%,10%)}
마지막꺼 방법은 처음알게되었다.
| Javascript_window.onload (0) | 2013.07.04 |
|---|---|
| !important (0) | 2013.07.04 |
| specificity 우선순위 (0) | 2013.07.03 |
| display 속성 (0) | 2013.07.03 |
| Position:absolute 와 relative (0) | 2013.07.02 |
☆ Total , Yesterday , Today :: notice :: tag :: media
© Wordpress 2010, Theme by N.Design / Converted by Juo.
back to top
Twitter
Facebook
Flickr
RSS
