예제에서
div 셀렉터에 position:absolute;를 선언했을때랑 하지 않았을때랑 값의 차이가 없고
또 div >p 셀렉터에서 position:absolute;를 삭제하면 merry라는 글자가 오른쪽 하단에 나란히 배열되던데
position:absolute;를 선언하지 않았더라도 p태그에 left값과 top값을 지정해 줬으면 그에 맞는 위치에 배치되어야 하는거 아닌가요?
굉장히 어려운 부분인데 책에 설명이 없어 이해가 어렵습니다.
그리고 position:absolute;는 html문서값이 기준이 되는게 맞나요? 그리고 자신의 부모태그의 static이 아닌것을 계속 찾다가 아닌것 즉 relative등을 만나면 그것을 기준점
으로 한다는 인터넷에 설명이 있던데 무슨뜻인지...
지금까지 공부하면서 이부분이 젤 어렵네요 도와주세요 교수님~~
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18275 |
| 243 | 7장 실습문제 8번에서 질문입니다 1 | JAVAscript공부중이에요 | 2020.05.27 | 408 |
| 242 | 이벤트 관련 질문 3 | 왕초보 | 2020.05.24 | 125 |
| 241 |
예제 4-14 질문이욤
2
|
코딩딩 | 2020.05.17 | 113 |
| 240 | Image 객체 2 | 초보 | 2020.05.14 | 126 |
| 239 | 76페이지 1 | ramoss | 2020.05.13 | 44 |
| 238 | 예제 4-11 질문합니다. 2 | 초보 | 2020.05.04 | 88 |
| 237 |
list type 질문이요
2
|
021 | 2020.05.03 | 107 |
| 236 |
168p 예제4-8 질문
2
|
그냥초보 | 2020.05.01 | 80 |
| 235 |
185쪽 질문있습니다..
3
|
ㅇㅇ | 2020.04.30 | 62 |
| 234 |
css3로 웹 페이지 꾸미기
3
|
ㅇㅇ | 2020.04.30 | 109 |
| 233 | 예제4-5 질문드립니다. 3 | 초보 | 2020.04.27 | 97 |
| 232 |
그림이 안떠요(실습문제 4장 7번)
2
|
초보자 | 2020.04.27 | 684 |
| 231 | 이미지를 어떻게 나오게 하나요? 1 | 나나 | 2020.04.26 | 78 |
| 230 | 3장 실습문제 2번에 쓰이는 이미지 파일은 어디에서 받을 수 있나요? 1 | dpdms0926 | 2020.04.22 | 180 |
| » | 예제 5-3 220page 2 | 호기심 | 2020.04.16 | 355 |
| 228 |
94p 그림2-4 질문
2
|
그냥초보 | 2020.04.15 | 55 |
| 227 |
1장 그림1-14
2
|
000 | 2020.04.14 | 119 |
| 226 |
4장 연습문제 8번 질문이요
4
|
코딩은코딩코딩해 | 2020.04.14 | 253 |
| 225 |
인터넷 익스플로러 재질문이요
2
|
021 | 2020.04.13 | 125 |
| 224 |
인터넷익스플로러 질문이요
1
|
021 | 2020.04.10 | 48 |
1. CSS에 대한 자세한 설명은 이 책의 2개의 장으로 공부하는 것은 불가능합니다. 다만 이책은 간단하게 나마 개념을 전달하는 수준으로만 쓰여졌습니다.
2.질문에서 " div 셀렉터에 position:absolute;를 선언했을때랑 하지 않았을때랑 값의 차이가 없고"의 질문에 대해 이해하기 못하였습니다. div 를 절대배치로 만들지 않으면 그 안에 있는 p 태그도 절대 배치가 안됩니다.
3. "div >p 셀렉터에서 position:absolute;를 삭제하면 merry라는 글자가 오른쪽 하단에 나란히 배열되던데"
그 이유는 position 스타일이 지정되지 않으면 ( 책 215페이지를 잘 읽어보세요), 브라우저는 normal flow(static 배치)로 처리합니다. 즉 웹 페이지에 등장하는 순서대로 태그를 처리하죠. 그래서 <div> 태그 내에 있는 <img>와 5개의 <p> 태그가 순서대로 출력됩니다.
그리고 이때 left, right 등은 모두 무시됩니다. 215페이지의 하단부에 설명하듯이 "정적 배치에서는 left, top, bottom, right 프로퍼티의 값은 위치에 영향을 주지 않는다.." 즉 무시된다는 것입니다. 그래서 <div> 태그 내에서 이미지, M E R R Y가 나란히 출력되는 것이지요.
4. "position:absolute;는 html문서값이 기준이 되는게 맞나요?"의 질문을 이해하지 못하였습니다.
5. "자신의 부모태그의 static이 아닌것을 계속 찾다가 아닌것 즉 relative등을 만나면 그것을 기준점으로 한다는 인터넷에 설명이 있던데 무슨뜻인지..." 저도 모르겠습니다.
일단 너무 어렵게 생각하지 마세요. 그리고 자세히 알려면 많은 공부를 해야합니다.
지금 초보라면, 그냥 용어 정도 알고, position이 뭐하는 것인지, 간단한 것을 만들 수 있는지 정도만 달성하는 것이 좋을 것 같습니다.
실제로는 전문적인 웹 저작 도구를 이용하여 웹 페이지를 만듭니다. 저작 도구의 도움 없이 이론적으로 이 모든 것을 알고 맨땅에 웹 페이지를 만드는 것은 거의 불가능합니다.
지금으로서는 웹 저작 도구를 잘 사용할 수 있는 기초를 닦는다고 생각하는 것이 좋을 것 같습니다.
힘내세요. 파이팅!