일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- row-gap
- 웹폰트
- 선택자
- 코딩퀴즈
- sass
- column-gap
- frontend
- js
- 코딩일기
- tailwindcss
- Pseudo
- Flex
- 코드일기
- 친해지기
- Coda
- 코딩테스트
- 코딩문제
- display
- HTML
- Grid
- CLASS
- HASH
- regexp
- 정규식표현
- CSS
- 가상클래스
- JavaScript
- 코드다이어리
- property
- DOM
- Today
- Total
목록DOM (3)
< Code diaries />
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bJ1X09/btsHRlfXk8G/o8BtN0qEH1VCdTc2h1nDu0/img.jpg)
DOM(Document Object Model) HTML을 코딩하는 것을 마크업 한다고합니다. 모든 태그는 컨텐츠 요소로 다른 태그를 포함할 수 있는 중첩구조를 가지게 됩니다.그러다보면 처음에 열린 태그, 두번째 열린태그 등.. 계층구조를 가지며 DOM 트리구조를 형성하게 됩니다.DOM 트리구조를 이해해야 CSS에서 HTML을 선택할 때에도 잘 이해할 수 있게 됩니다.단, 빈요소(Empty Element) 태그는 다른 태그를 컨텐츠요소로 포함 할 수 없습니다. 중첩코딩 Hello, HTML Menu 1 Menu 2 Menu 3 Let's coding. Important content ..
오늘은 javascript에서 어떻게 HTML 요소의 값을 다루는지 살펴보아요~렛츠가.. 기릿입니다... (흐흐흐 아시는분은 다 아시는 구호죠? 돌비채널 팬이라.. )아래의 간단한 HTML 마크업으로 한번 해 봅시다~See My fruite 토마토 INIT - 먼저 html 요소를 변수에 담아옵니다.const title = document.querySelector('.title');const img = document.querySelector('.thumb img');const caption = document.querySelector('.thumb figcaption'); Property ListPropertytypedescriptiontextContentNodescript, style 적..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cBbSMw/btsHL6KadmR/xW0tt5iXRR4W6KF8JyBvDk/img.png)
따라란~~오늘부터는 Javascript에서 Dom을 다루는 다양한 방법들을 정리해 보려고 합니다. Javascript 에서 HTML 요소를 조작하기 위하여는 일단 접근을 해야합니다.자주사용하는 방법을 공부해 봅시다~! ^^모든 접근하는 명령어는 문서 하단의 MDN 사이트에서 참조하시면 됩니다. Hello DOMNice to meet you~Hello JavaScriptGood morning Everyone 1. ID 명으로 접근하기const h1 = document.getElementById('h1'); 2. querySelector 로 접근하기const title = document.querySelector('.title'); 이경우 예제에서 클래스 'title'은 2개 이지만, 첫번째로 찾은 태..