예제에서
div 셀렉터에 position:absolute;를 선언했을때랑 하지 않았을때랑 값의 차이가 없고
또 div >p 셀렉터에서 position:absolute;를 삭제하면 merry라는 글자가 오른쪽 하단에 나란히 배열되던데
position:absolute;를 선언하지 않았더라도 p태그에 left값과 top값을 지정해 줬으면 그에 맞는 위치에 배치되어야 하는거 아닌가요?
굉장히 어려운 부분인데 책에 설명이 없어 이해가 어렵습니다.
그리고 position:absolute;는 html문서값이 기준이 되는게 맞나요? 그리고 자신의 부모태그의 static이 아닌것을 계속 찾다가 아닌것 즉 relative등을 만나면 그것을 기준점
으로 한다는 인터넷에 설명이 있던데 무슨뜻인지...
지금까지 공부하면서 이부분이 젤 어렵네요 도와주세요 교수님~~
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이 뭐하는 것인지, 간단한 것을 만들 수 있는지 정도만 달성하는 것이 좋을 것 같습니다.
실제로는 전문적인 웹 저작 도구를 이용하여 웹 페이지를 만듭니다. 저작 도구의 도움 없이 이론적으로 이 모든 것을 알고 맨땅에 웹 페이지를 만드는 것은 거의 불가능합니다.
지금으로서는 웹 저작 도구를 잘 사용할 수 있는 기초를 닦는다고 생각하는 것이 좋을 것 같습니다.
힘내세요. 파이팅!