본문 바로가기

전체 글56

[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.
[스터디] (11/20) 깃허브 이슈, light house 매일매일 스터디를 하고있는데, 이번에 처음 들어보고 배워보는게 있어서 한번 사용을 해보았다ㅎㅎ깃허브 이슈를 쓰는 방법: 깃허브 자체에서 커뮤니케이트를 할 수 있음.개발자 도구를 열면 오른쪽 상단에 width가 보임.기획에 이슈를 적고(가장 작은 화면 구성. width 몇일때 헤더 사라지는거, width 몇일때 사이드바 사라지는거 하겠다.)차근차근 한 단계씩 발전해나가는 상태로 이슈를 등록하면 된다.그래서 이번 졸업 프로젝트 깃허브에 적용해서 사용중이다.내가 해야할 일들을 쫘악 적고 하나씩 해결해나가니까 뭔가 미션 클리어 하는 느낌.기능 하나도 놓치지 않고 구현할 수 있을것 같고, 내가 이런걸 했구나 하는것도 한 눈에 볼 수 있어 좋은것같다! 개발자도구에 구글에서 제공하는 light house최대한 접근성.. 2024. 11. 22.

티스토리툴바