예제에서
div 셀렉터에 position:absolute;를 선언했을때랑 하지 않았을때랑 값의 차이가 없고
또 div >p 셀렉터에서 position:absolute;를 삭제하면 merry라는 글자가 오른쪽 하단에 나란히 배열되던데
position:absolute;를 선언하지 않았더라도 p태그에 left값과 top값을 지정해 줬으면 그에 맞는 위치에 배치되어야 하는거 아닌가요?
굉장히 어려운 부분인데 책에 설명이 없어 이해가 어렵습니다.
그리고 position:absolute;는 html문서값이 기준이 되는게 맞나요? 그리고 자신의 부모태그의 static이 아닌것을 계속 찾다가 아닌것 즉 relative등을 만나면 그것을 기준점
으로 한다는 인터넷에 설명이 있던데 무슨뜻인지...
지금까지 공부하면서 이부분이 젤 어렵네요 도와주세요 교수님~~
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18280 |
| 343 |
3장의 실습문제
1
|
minju0508 | 2017.04.02 | 1335 |
| 342 | 423쪽, 예제9-20 1 | 사랑나눔 | 2019.06.27 | 127 |
| 341 | 425페이지 오픈챌린지09번 질문입니다. 1 | 멍청이 | 2019.08.22 | 179 |
| 340 | 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 | 아인슈페너 | 2023.11.24 | 77 |
| 339 | 432PAGE 9장 실습문제 9번 재질문올립니다. 2 | asdfSDF | 2019.08.23 | 154 |
| 338 | 432페이지 9장 실습문제9번 질문입니다. 1 | asdf | 2019.08.22 | 266 |
| 337 | 465page 오픈챌린지10장 질문입니다. 2 | asdf | 2019.08.23 | 413 |
| 336 | 4장 171쪽 2 | chu | 2022.04.04 | 57 |
| 335 | 4장 19번 1 | .. | 2018.09.28 | 906 |
| 334 | 4장 6번문제 물어볼려고합니다 1 | 배재한 | 2019.04.16 | 566 |
| 333 |
4장 8번 문제 질문드려요!
1
|
safd | 2017.06.09 | 683 |
| 332 | 4장 9번 이론문제 2 | 궁금해요 | 2022.09.07 | 121 |
| 331 | 4장 실습문제 7번, 9번 1 | ehdtn6288 | 2018.10.01 | 428 |
| 330 |
4장 연습문제 8번 질문이요
4
|
코딩은코딩코딩해 | 2020.04.14 | 253 |
| 329 | 4장 예제 17번 1 | 신입 | 2018.04.19 | 111 |
| 328 |
4장 예제 4-17질문입니다.
1
|
Escui | 2021.04.22 | 145 |
| 327 | 5-3 220page 1 | 고수가되고싶어요 | 2020.10.24 | 141 |
| 326 | 520페이지 에 쿠키쓰기 질문 1 | os | 2017.12.09 | 104 |
| 325 | 570page 예제 13-7 1 | 이주원! | 2019.09.03 | 167 |
| 324 | 5단원 실습 6-2번 질문합니다 2 | 공부해염 | 2019.04.13 | 222 |
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이 뭐하는 것인지, 간단한 것을 만들 수 있는지 정도만 달성하는 것이 좋을 것 같습니다.
실제로는 전문적인 웹 저작 도구를 이용하여 웹 페이지를 만듭니다. 저작 도구의 도움 없이 이론적으로 이 모든 것을 알고 맨땅에 웹 페이지를 만드는 것은 거의 불가능합니다.
지금으로서는 웹 저작 도구를 잘 사용할 수 있는 기초를 닦는다고 생각하는 것이 좋을 것 같습니다.
힘내세요. 파이팅!