Frontend

[Javascript] 변수 선언 , 자료형

보호되어 있는 글입니다.

[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] 레이아웃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 ..

[CSS] 선택자 :: 문자열, 일반·형태 구조, 부정 , 우선순위

문자열 속성 선택자 속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자. 작성법 의미 선택자[속성 ~= "특정값"] { css 코드; } 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 태그 선택 선택자[속성 |= "특정값"] { css 코드; } 속성 값이 특정 값을 단어로 포함하는 태그 선택 + "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다. 여러 속성 중 맨 앞이면서, "-" 기호가 포함된 속성 값에 "-" 기준 앞쪽 문자열이 특정 값과 같은 태그 선택 선택자[속성 ^= "특정값"] { css 코드; } 속성 값이 특정 값으로 시작하는 태그 선택 선택자[속성 $= "특정값"] { css 코드; } 속성 값이 특정 값으로 끝나는 태그 선택..

[CSS] css파일 link, 선택자(기본, 자손, 반응, 상태, 동위)

* css파일을 html파일에 link 선택자 종류 작성법 의미 기본 속성 선택자 선택자[속성="속성명"] { css 코드} 태그에 작성된 특정 속성을 선택 자손 선택자 ( > ) 선택자 > 선택자 { css코드; } 지정된 요소의 바로 하위에 존재하는 요소를 선택 후손 선택자 ( (띄어쓰기)) 선택자 선택자 { css 코드; } 지정된 요소의 모든 하위 요소를 선택 반응 선택자 사용자의 움직임에 따라 달라지는 선택자 :active 사용자가 요소를 클릭하고 있는 경우 :hover 사용자가 요소에 마우스를 올려두는 경우 상태선택자 입력 양식의 상태에 따라 선택되는 선택자 :focus 초점이 맞춰진 상태에 따른 선택자 :checked 체크 상태에 따른 선택자 :enabled / :disabled 선택 또는 ..

[CSS] 개요 , 선택자(span, id, class,*)

✍CSS ( Cascading Style Sheets) : 마크업 언어가 실제로 화면에 표시되는 방법(모양, 색, 스타일)을 기술하는 언어. (html 코드가 화면에 어떤 모양,색으로 보여질지 지정하는 언어) W3C 표준으로 지정되어 있음 HTML에 CSS 사용하는 법 1. Inline - HTML 태그 안에 style 속성으로 추가 2. Internal - 안에 요소 추가 3. External - 태그로 외부의 css 파일을 연결한다 CSS 기본 선택자 선택자(selector)란? 현재 HTML 문서 내에 특정 요소를 선택하는 문자. 선택된 요소에 원하는 스타일을 적용할 수 있다. style 태그 : css코드를 작성할 수 있는 태그, 태그 내부에 작성 css 주석은 범위 주석만 가능하다 선택자 의미 ..

[HTML] w3school

튜토리얼로 html관련된 공부들 할 수 있고 혼자 공부하거나 참고할 때 좋다 https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com

[HTML] 영역, 이미지, 하이퍼링크, 폼 태그

영역 관련 태그 block 형식 inline 형식 - 공간을 수직 분할하는 영역 (수직으로 되어있는 공간을 수평으로 자르는 것 -> 수직선 상에 영역들이 존재) - 공간을 수평 분할하는 영역 (수평으로 되어있는 공간을 수직으로 자르는 것 -> 수평선 상에 영역들이 존재) - width, height 사용 가능 - h1 ~ h6, p, pre, hr, div 등 - width, height 사용 불가 - b, strong, i, em, mark, span 등 block, inline 차이점 1 : 줄 바꿈 div 태그 (division, 나누기) span 태그(간격) 화면 영역을 나누는(분할하는) 용도, (block 형식) 줄바꿈이 일어나지 않고 옆으로 다음 영역이 설정된다.(inline) 더보기 첫 번째..