본문 바로가기

javascript

 (29)
trim( ) , replace 에 대하여 복잡한것 딱 ! 질색 간단명료 닥치고 설명 메서드 의미 trim( ) 좌우의 공백과 여백을 지워주는 메서드 단, 가운데 공백은 제거가 어렵고 양쪽 옆 공백만 제거가능. replace 문자를 제거하는것이기 때문에 꼭 공백이 아니여도 사용가능.
비교연산자 == , ===, !== , != , 간략히 정리 연산자 종류 의미 주의 == ===에 비해 조금 덜 엄격한 비교연산자 자료형을 일치시킴 === 엄격한 비교연산자 (맞다는) 자료형 일치 시키지 않음. != 두 피연산자의 자료형을 일치시킨 후, 엄격하게 비교를 수행 자료형을 일치시킴 !== 다르다는것을 이야기함 자료형 일치 시키지 않음.
innerText 와 innerHTML 가 뭐죠? textContent 는 뭐에요? 태그이름 속성 innerText 태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 텍스트만 바뀜) 사람이 읽을 수 있는 요소만 보여주기 때문에, 화면에 보이는 그대로의 텍스트를 읽어올 때는 유용하다. 하지만 내부에 특별한 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다. innerHTML 태그 자체를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 전체 다 바뀜) 보안에 취약하다는 단점이 있다. textContent 해당 요소 내부의 원시 텍스트를 보여주기 때문에 다른 프로퍼티들에 비해 파싱이 빠르다. 가급적 textContent를 사용하는 것이 좋은데 성능과 보안에 강점이 있고, 원시 텍스트를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문이다.
javscript 변수와 상수에 관하여 변수 변수는 데이터를 저장하는 곳이다. 값 변경이 가능하다. 선언할때에는 "ver" , "let"을 사용한다. 상수 한번 할당하면 값을 변경할수 없는 저장소이다. 주로 변하지 않는 값에 적용한다. 예상치 못한 변경을 막을때 사용되어진다. cosnt로 선언을 하며, 선언할때 초기값을 바로 적용해줘야한다. 일반적으로 대문자를 사용해서 이름을 지정해준다.
javascript 배열과 객체에 관하여 " 배열(Array)과 객체(Object)는 데이터를 저장하고 조작하는 데 사용되는 중요한 구조이다. " 1. 배열 (Array) 배열은 순서가 있다. 배열은 [ ] 로 나타낸다. 문자형, 숫자, 객체로 나타낸다. 2. 객체 (Object) 객체는 이름값은 가지는 키와 값의 한쌍으로 표현한다. 키는 문자열이나 심볼이며, 값은 어떠한데이터 유형이든 될수있다. 중복되지 않는 키로 데이터를 저장하고, 키를 통하여 값을 추출할수 있다. 차이점 배열 - 순서대로 데이터 배열을 하기 유용하다. 키 - 데이터를 구조화 하며 다양한 속성을 표현하는것에 사용된다.
2023.09.13 CSS 코드 속성 값 설명 align-items: 이 속성을 사용하면 요소의 수직 (세로) 정렬을 한다. center 주로 수직 가운데 정렬을 위해 사용된다. flex-end 수직 축의 끝 부분에 정렬한다. flex-start 요소를 수직 축의 시작 부분에 정렬한다. stretch 수직으로 늘려서 컨테이너의 높이에 맞게 정렬한다. baseline 기준선에 정렬한다. 요소의 텍스트 기반 정렬을 사용할 때 유용하다. justify-content flex-start 플렉스 아이템을 가로 축의 시작 부분에 정렬. flex-end 플렉스 아이템을 가로 축의 끝 부분에 정렬. center 플렉스 아이템을 가로 축의 중앙에 정렬. space-between 플렉스 아이템 사이에 동일한 간격을 유지하며 정렬. space-around..
2023.09.12 자바스크립트 코드 코드 의미 === 엄격한 비교연산자 ( 하나라도 다를시 값이 나오지 않음 ) == 유한 비교연산자 ( 하나정도 달라도 값이 나옴 ) classList classList.add classList.remove classList는 뒤에 add / remove 같이 사용해줘야함. 어떠한 요소를 동적으로 관리해주는 역할. element 객체는 웹 페이지의 구조와 콘텐츠에 대한 접근 및 조작을 가능하게 하는 핵심 도구 중 하나이다. join 메서드는 배열의 모든 요소를 하나의 문자열로 결합하고, 요소 사이에 seperate로 지정한 문자열을 삽입하여 반환합니다. 반환된 문자열은 콤마로 구분된 문자열입니다. 예제) const fruits = ["apple", "banana", "cherry"]; const resul..
23.09.06 <css tag일지> 태그 설명 문법 box-sizing: border-box; box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. box-sizing : content-box(콘텐트 영역을 기준으로 크기를 정한다.) box-sizing : border-box (테두리를 기준으로 크기를 정한다.) box-sizing : initial (기본값으로 설정한다.) box-sizing : inherit ( 부모요소의 속성값을 상속받는다.) list-style 목록화 시키는 작업이다. ul / li / ol 를 대신하는 작업 : disc, circle, square => list-style-type: disc : decimal, decimal-le ading-zero =>list-style-type: ..
23.09.06 <java script tag일지> 의미없는 태그 span (line구조) div (박스구조) javascript 태그 query selector 웹 개발에서 사용되는 JavaScript의 함수 중 하나입니다. 이 함수는 HTML 문서에서 원하는 요소를 선택하고 조작하는 데 사용됩니다. inner text 이 속성은 주로 JavaScript를 사용하여 HTML 문서의 텍스트를 읽거나 변경하는 데 사용됩니다."innerText"를 사용하면 웹 페이지에서 동적으로 텍스트를 변경하거나 읽어들이는 데 유용하게 활용할 수 있습니다. classList 이 속성을 사용하면 요소의 클래스를 추가, 제거, 토글하고 클래스 목록을 검사할 수 있습니다. 추가할땐 .add("active") / 제거할땐 .remove("active") 특정 클래스를 지정하고 추..

티스토리툴바