예제에서
div 셀렉터에 position:absolute;를 선언했을때랑 하지 않았을때랑 값의 차이가 없고
또 div >p 셀렉터에서 position:absolute;를 삭제하면 merry라는 글자가 오른쪽 하단에 나란히 배열되던데
position:absolute;를 선언하지 않았더라도 p태그에 left값과 top값을 지정해 줬으면 그에 맞는 위치에 배치되어야 하는거 아닌가요?
굉장히 어려운 부분인데 책에 설명이 없어 이해가 어렵습니다.
그리고 position:absolute;는 html문서값이 기준이 되는게 맞나요? 그리고 자신의 부모태그의 static이 아닌것을 계속 찾다가 아닌것 즉 relative등을 만나면 그것을 기준점
으로 한다는 인터넷에 설명이 있던데 무슨뜻인지...
지금까지 공부하면서 이부분이 젤 어렵네요 도와주세요 교수님~~
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18279 |
| 343 | 오랜만에 찾아 뵙습니다.. 3 | 은성 | 2017.05.10 | 338 |
| 342 | 예제코드 크롬 브라우저실행 1 | ㅇ | 2018.09.17 | 94 |
| 341 | 예제에 필요한 그림이나 동영상 같은 자료파일은? 1 | donghee | 2017.09.15 | 130 |
| 340 | 예제에 나오는 이미지와 동영상파일은 어디서 다운받을 수 있나요... 1 | gofkdvjvl | 2017.09.21 | 215 |
| 339 | 예제5-9와 예제 5-14 3 | 궁금해요! | 2018.04.20 | 127 |
| 338 | 예제4-5 질문드립니다. 3 | 초보 | 2020.04.27 | 97 |
| 337 | 예제3-8 1 | 새싹 | 2018.04.22 | 123 |
| 336 | 예제2-11 1 | 포도 | 2018.04.05 | 123 |
| 335 | 예제 9-8 질문입니다. 2 | 모르겠어요 | 2020.07.31 | 101 |
| 334 | 예제 9-18번 질문 1 | 초보 | 2020.06.21 | 84 |
| 333 | 예제 9-12질문이요! 1 | ㅇㅇ | 2018.11.27 | 68 |
| 332 | 예제 8-9(373p) 1 | 열공이 | 2022.05.29 | 87 |
| 331 |
예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다.
1
|
배우고 익히는 초심자 | 2020.06.14 | 245 |
| 330 | 예제 6-24관련 질문드립니다. 3 | 초보 | 2020.06.05 | 67 |
| 329 | 예제 6-13 질문이요! 2 | 궁그미 | 2020.07.30 | 145 |
| 328 |
예제 5-6 질문입니다.
1
|
이상민 | 2019.09.01 | 176 |
| » | 예제 5-3 220page 2 | 호기심 | 2020.04.16 | 355 |
| 326 | 예제 5-11을 하다 사소한 궁금한 것이 생겼습니다 1 | 수소방울 | 2017.10.13 | 167 |
| 325 |
예제 4-14 질문이욤
2
|
코딩딩 | 2020.05.17 | 113 |
| 324 | 예제 4-11 질문합니다. 2 | 초보 | 2020.05.04 | 88 |
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이 뭐하는 것인지, 간단한 것을 만들 수 있는지 정도만 달성하는 것이 좋을 것 같습니다.
실제로는 전문적인 웹 저작 도구를 이용하여 웹 페이지를 만듭니다. 저작 도구의 도움 없이 이론적으로 이 모든 것을 알고 맨땅에 웹 페이지를 만드는 것은 거의 불가능합니다.
지금으로서는 웹 저작 도구를 잘 사용할 수 있는 기초를 닦는다고 생각하는 것이 좋을 것 같습니다.
힘내세요. 파이팅!