☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS32 [JavaScript] 자바스크립트 (DOM 탐색하기) Document 탐색하기조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 요소와 요소의 콘텐츠를 조작할 수 있음.DOM에 수행하는 모든 연산은 document 객체에서 시작한다.document 객체는 DOM에 접근하기 위한 ‘진입점’이다.진입점을 통과하면 어떤 노드에도 접근이 가능하다.자식 노드와 후손 노드자식 노드 : 바로 아래의 자식 요소를 나타낸다후손 노드 : 중첩 관계에 있는 모든 요소를 의미한다. 자식 노드와 그 보다 자식 노드 모두가 후손 노드가 된다.바로 아래뿐만아니라 그 아래 그 아래..DOM 컬렉션childNodes 는 배열같아 보이지만, 배열이 아닌 반복 가능한 유사 배열 객체인 컬렉션(collection)이다.childNodes가 컬렉션이기에 가지는 특징.비록 배열은 아니지만 f.. 2024. 12. 3. [JavaScript] getElementByID, getElementByName, querySelector 이번에 이 친구들을 제대로 알고 사용하고자 자세히 알아보았다.맨날 쿼리셀렉터만 남발했었는데 이제야 이해가 된다.getElementByIDgetElementByID : 요소의 아이디에 접근주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다.**ID가 없는 요소에 접근하려면 Document.querySelector() 를 사용한다. 어떤 글 blue red // JSfunction changeColor(newColor) { var elem = document.getElementById("para"); elem.style.color = newColor;} getElementByNamegetElementByName : 네임 속성 값n.. 2024. 12. 3. [JavaScript] 자바스크립트 (DOM 이란) 졸업프로젝트가 끝났으니 다시 블로그 업뎃! 시작한다. 밀린 JS 강의 들으며 쫓아가는중..DOM 이란HTML을 이용한 화면에 UI 표현하기브라우저에서 UI를 볼 수 있는 것은 ⇒ HTML을 분석해서 보여주는 것이기 때문이다.이 HTML은 요소(Element)들로 구성되어 있다.돔 이란? (Document Object Model): 돔(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다.또한, 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.돔으로 만든 다음에 이걸 html로 분석하여 보여주는것이다.돔 조작DOM 트리를 DOM 에서 제공해주는 API를 이용하여 조작.. 2024. 12. 3. [CSS] Box-sizing을 어디에 사용하는데? : 패딩을 넣었는데 화면이 잘릴때! 인스타그램 클론코딩을 하고 있었다. 헤더에 position: fixed;를 주고, 헤더 크기가 작길래 width: 100%를 주었더니.header{ height: 60px; width: 100%; padding: 0 16px; /* ...생략... */ position: fixed; top: 0; left: 0;}아니 글쎄, 헤더 이미지가 잘려버리는것이다.margin을 줘도 먹지않았다.. 이럴때 쓰는게 바로 box-sizing 이라는 것인데,어떻게 해야하는지 머리를 쥐어뜯다가 알아낸 내용이라 공유한다. 👇Box-sizing 속성에 대한 설명 정리 글은 여기, 내 블로그에 포스팅되어있다.👇https://s2ej1n.tistory.com/35 [CSS] Box Siz.. 2024. 11. 23. [CSS] Box Sizing 속성 box-sizing 속성: 말 그대로 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성.box-sizing: content-box | border-box | initial | inheritcontent-box : 콘텐츠 영역을 기준으로 크기를 정한다콘텐츠 박스 자체에 300테두리 10픽셀⇒ 총 320border-box : 테두리를 기준으로 크기를 정한다테두리까지 합해서 300콘텐츠는 280픽셀이 됨initial : 기본값inherit : 부모 요소 속성값 상속받음사용해본 결과 box-sizing을 사용하지 않았을 때의 기본 값은 content-box인것 같다. 2024. 11. 23. [CSS] 이미지에 그라디언트 효과를 주고싶어! mask-image: linear-gradient 넷플릭스 클론코딩을 하는데 메인 광고 이미지가 그라디언트 효과로 사라지는것을 구현하고 싶었다. 위의 화면은 내가 html/css만으로 구현한 화면인데, 메인 이미지의 아래 부분을 보면 이미지가 서서히 사라지는것이 보일것이다. 구글링을 통해 mask-image 속성중 linear-gradient를 사용하면 된다는것을 알게되었고, 이번에 공부한 내용을 공유하고자 포스팅을 작성한다.mask-image포토샵을 다뤄봤다, 또는 영상 처리를 공부해보았다. 하는 사람은 '마스크'를 들어보았을것이다.이미지 합성을 할때 사용한다 생각하면 쉬울건데, 정확한 정의는" 요소의 마스크를 정의하여 보이는 영역과 숨겨지는 영역을 결정한다. "라고 보면 된다. : linear-gradient그중 linear-gradient 속성은.. 2024. 11. 20. 이전 1 2 3 4 5 6 다음
