CSS3 3. 웹브라우저도 객체이다.(DOM, 노드, JS로 html,css 다루기) DOM(문서 객체 모델) = 웹페이지에 나타나는 html문서 전체를 객체로 표현한 것 document 객체가 웹문서의 최상단 객체로의 진입점 역할을 함. (window 객체는 전역객체로 모든 객체들을 포함하고있음 (전역객체) window.console.log() 가 원래 맞음) DOM tree = html에서 태그의 구조처럼 DOM도 document 객체를 최상위로 해서 window - document - html - head - meta - title - body - h1 - h2 이런식으로 똑같이 계층구조를 이룸 이것을 DOM tree라고 하고, Dom tree 안의 각 객체들을 노드라고 부름. 노드간의 관계에는 부모노드, 자식노드, 형제노드 등의 용어가 있고, 노드의 타입에는 태그를 표현하는 요소노.. 2023. 12. 21. 2. CSS 레이아웃 Display 는 글의 흐름에서 요소들을 어떻게 배치할지 정하는것 Block (...) 은 위에서 아래로 inline(...)은 옆으로 배치됨 (position : static) 이러한 형태를 무시하고 배치하고싶을때 Position 을 사용한다 position : relative; top(left,right,bottom) 30px; position : relative; 는 원래 있어야하는 자리를 기준으로 주어진 값만큼 이동시키는 것인데, 이동할때 다른요소들은 영향을 받지 않는다. (이동하기 전 공간에 있다는 판정이됨) (바로아래에 블록이있고 top :30px을 주면 아래 블록이랑 겹쳐짐) position : absolute; top(left,right,bottom) 30px; position :absol.. 2023. 12. 21. 1. CSS 기초 css 규칙 파일을 따로 만들어서 정리하는게 좋음 파일명.css 파일을 만들어주자 css 규칙 부분에 넣음 css 규칙은 아래와 같이 이루어짐 (선택자는 .클래스 #아이디 태그 다 가능) 선택자 { css 선언 } ex. 예시처럼 하면 모든 h3에 다 적용되니까 색을 넣고 싶은 부분에 이런식으로 아이디를 주고 예시의 h3부분에 #ted를 대신 넣어주면 ted부분에만 들어감 여러개를 선택해서 꾸미고싶으면 class 써주면됨 예시의 h3 부분에 .lth 넣어주면 lth가 붙은 모든곳에 들어감 하나의 태그에 여러가지 선택자를 넣어줄수도 있음 (가운데 띄어쓰면됨) 여러개의 선택자를 하나로 묶어서 사용할수있음 ( , 사용) (id 선택자도 같이 사용가능) (선택자 목록이라고 함) .ted , .ted10722 {.. 2023. 12. 21. 이전 1 다음
