분류 전체보기
[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] 데이터 입출력
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
✍script 언어 : 응용 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 제어하는 용도의 언어 ex) 브라우저(응용프로그램)을 제어하는 Javascript 특징 별도의 소스코드의 컴파일을 진행하지 않고 인터프리터(Interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행한다. 인터프리터(Interpreter) 소스코드 컴파일을 하지 않고 바로 수행한다 컴파일에 소요되는 시간이 없지만, 프로그램 수행에 시간이 소요된다. ✍ JS (Javascript) : 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어 - ECMA Script 표준을 따르는 대표적인 웹 기술이다. (ECMA : European Computer Manufacturers Association) 특징 ..
[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)
레이아웃 (Layout) 사전적 의미 : 배치 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배열(배치)하는 것을 의미. 화면 배치 방법 ( display : block | inline | inline-block | none ) display 속성 : 요소가 화면에 어떻게 보여질지 지정하는 속성 속성 의미 block 화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O inline 화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X inline-block inline의 수평 분할 특성 + block의 크기 지정 가능 none 화면에 표시되지 않으나 요소는 존재하고 있는 상태 1) block ..