메뉴 건너뛰기

관리자2020.04.16 23:52

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이 뭐하는 것인지, 간단한 것을 만들 수 있는지 정도만 달성하는 것이 좋을 것 같습니다.

실제로는 전문적인 웹 저작 도구를 이용하여 웹 페이지를 만듭니다. 저작 도구의 도움 없이 이론적으로 이 모든 것을 알고 맨땅에 웹 페이지를 만드는 것은 거의 불가능합니다.
지금으로서는 웹 저작 도구를 잘 사용할 수 있는 기초를 닦는다고 생각하는 것이 좋을 것 같습니다.
힘내세요. 파이팅!

파일 첨부

여기에 파일을 끌어 놓거나 파일 첨부 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )
위로