전체 글
![[Javascript] 요소접근방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FnCTWl%2FbtrjCTvXuyE%2FAAAAAAAAAAAAAAAAAAAAAHxPYqkKdd7eSlXspy6r2b7jvImXxkibCumDyPjJLGDa%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3Dmg16C%252FYTDShGGRfSyhTKvcNdwB0%253D)
[Javascript] 요소접근방법
요소접근방법 1. id로 요소 접근하기 document.getElementById("id 속성값"); 2. class로 요소 접근하기 document.getElementsByClassName("클래스 속성값"); 3. Tag Name으로 요소 접근하기 document.getElementsByTagName("태그명"); 4. name으로 요소 접근하기 document.getElementsByName("name 속성값"); 5. CSS 선택자를 이용하여 요소 접근하기 1) document.querySelector("css 선택자"); 2) document.querySelectorAll("css 선택자") 1. id로 요소 접근하기 document.getElementById("id 속성값"); : id가 일치..
![[Javascript] 데이터 입출력](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F0BQar%2FbtrjAemEKsV%2FAAAAAAAAAAAAAAAAAAAAABb3pBTsOu8hdZRdpf6AhFsvbRMQkjODy0LL3R8z4TWf%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DC0xD6w0Fp9kqqnJKHVHzbKwQmsQ%253D)
[Javascript] 데이터 입출력
innerText/ innerHTML을 이용한 요소 내용(content) 입/출력 innerText : 요소에 작성된 내용을 읽거나 변경할 때 innerText 속성을 사용한다. innerText 확인하기 innerHTML 확인하기 document : 현재 웹 문서( 현재 HTML ) .getElementById("id명") : 현재 문서 내에서 id 속성값이 "area1"인 요소를 얻어왔다(== 선택했다) const area1 : 상수형 변수 area1 선언 ➡ 현재 문서 내에서 id속성 값이 "area1"인 요소를 얻어와 상수형 변수 area1에 대입 console.log(area1); 로 설정해두면 자동으로 console창에 뜬다. console.log( area1.innerText); consol..
![[Javascript] 1_개요, inline, internal, external](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkD4lZ%2FbtrjBxzngiT%2FAAAAAAAAAAAAAAAAAAAAAGsqwym53Be1hwuw6U1Kz1F8WVgrlQBdQdC8W7T4sDSh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3D261ISDI0ZZwb1A%252F7jvyQw%252F2T7Dg%253D)
[Javascript] 1_개요, inline, internal, external
✍script 언어 : 응용 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 제어하는 용도의 언어 ex) 브라우저(응용프로그램)을 제어하는 Javascript 특징 별도의 소스코드의 컴파일을 진행하지 않고 인터프리터(Interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행한다. 인터프리터(Interpreter) 소스코드 컴파일을 하지 않고 바로 수행한다 컴파일에 소요되는 시간이 없지만, 프로그램 수행에 시간이 소요된다. ✍ JS (Javascript) : 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어 - ECMA Script 표준을 따르는 대표적인 웹 기술이다. (ECMA : European Computer Manufacturers Association) 특징 ..
![[CSS] 레이아웃2 :: 요소 정렬 스타일 (float / clear)+ 분할](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FKfzEk%2FbtrjbMW0RGa%2FAAAAAAAAAAAAAAAAAAAAAEHiOtc018soEr1GDNhV3YqhBZZCHA_VOj1cs198nm3B%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DEcmPDu1MFaH7D%252BcAj619vm8Sh9g%253D)
[CSS] 레이아웃2 :: 요소 정렬 스타일 (float / clear)+ 분할
요소 정렬 스타일 속성 의미 float (뜨다, 띄우다) 요소를 띄워서 좌/우로 정렬하는 속성 clear float로 인해 띄워져 있는 상태를 해제하는 속성 (float로 인해 겹쳐지는 현상을 제거) left -> 겹침 현상을 제거 (조건 : 방향성이 같아야한다) both -> left/ right를 모두 제거한다 -> float : left; 로 인한 겹침 현상을 제거하기 위해선 clear : left; 를 작성해야 한다. (방향성이 같아야 한다.) 1) float 적용 X 더보기 /* 모든 div태그에 1px 검정 실선 테두리 지정 */ div{ border : 1px solid black; } /* float-test 클래스 선택 */ .float-test{ width: 300px; height: ..
![[CSS] 레이아웃1 :: display(block | inline | inline-block | none)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fq3gvQ%2Fbtri84Kuoja%2FAAAAAAAAAAAAAAAAAAAAAJAPdMBRGsuEtcc9__4Q30AbPFZAFqSScozrWzP7XyBR%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DNOg1WvvrNGbjko0SDn0sEDc9fyk%253D)
[CSS] 레이아웃1 :: display(block | inline | inline-block | none)
레이아웃 (Layout) 사전적 의미 : 배치 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배열(배치)하는 것을 의미. 화면 배치 방법 ( display : block | inline | inline-block | none ) display 속성 : 요소가 화면에 어떻게 보여질지 지정하는 속성 속성 의미 block 화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O inline 화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X inline-block inline의 수평 분할 특성 + block의 크기 지정 가능 none 화면에 표시되지 않으나 요소는 존재하고 있는 상태 1) block ..