[JavaScript] JS String(문자열) 메소드 알아보기.

2021-04-04 자바스크립트에서 문자열을 다루는 몇 가지 메서드가 존재하는데, 오늘은 문자열(String)을 다루는 메서드에 대하여 알아보자. - length length 변수는 문자열의 총 길이를 확인할 수 있는 메소드로써 공백 문자도 하나의 문자로 인식에 동작한다. 아래의 예제 코드를 보자. Hello World ​ 예제 코드의 text는 문자열길이를 확인하기 위해 length 메서드로 콘솔 창에 출력해 보면 27이 출력되는 것을 확인할 수 있다. - indexOf("문자열") indexOf는 매개값으로 넣어준 문자열이 포함되어 있는지 확인한 후 해당 문자열의 시작 위치를 리턴한다. 아래의 예제를 보자. Hello World ​ text에는 두개의 Hello가 포함되어 있는데, indexOf 메서..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 4.
• textsms

[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기

2021-04-03 자바스크립트 내부에서 정렬을 할 수 있도록 도와주는 메서드가 있다. 해당 메서드는 sort() / reverse()로 두 메서드의 기능을 알아보도록 하자. - sort () sort() 메소드는 오름차순 기준으로 정렬을 수행하며, 수행 시 알파벳의 경우 a에 가까울수록 배열의 앞에 숫자의 경우 0에 가까울수록 배열의 앞에 위치하게 된다. 아래는 예제 코드이다. Hello World ​ 정렬 전과 정렬 후를 비교하면 아래와 같은 결과가 나타난다. - reverse() 내림 차순으로 정렬하고자하면 reverse()라는 메서드를 사용하면 된다. 다만 해당 메서드는 문자열의 순서가 아닌 배열의 순서 인덱스 순서를 기준으로 위치를 뒤바꾸기 때문에 먼저 sort() 메서드로 오름차순 정렬을 해준..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 3.
• textsms

[JavaScript] JS Arrays 배열에 대하여 알아보기

2021-04-02 배열은 js 변수에 여러 가지 값을 저장할 수 있도록 하는 데이터 형태이다. 이러한 배열을 대하여 알아보도록 하자. 예제로는 사람의 이름을 저장하는 name라는 배열을 만들어 사용할 것이다. - 선언 방법1. 변수에 바로 배열 대입하기 배열을 선언 시 [ ]로 각 항목을 감싸주어 선언을 하면 된다. 배열에서 시작 값은 항상 0부터 시작하는 점도 알아두자. Hello World ​ 방법 2. new Array( ) 연산자를 이용한 선언 사실 방법 2는 잘쓰지 않는다. 그 이유는 아무래도 코드에서 작성하는 양이 늘어나고, 실제 동작은 차이가 없기 때문이다. Hello World ​ - 배열에 요소에 접근하는 방법 선언된 배열에 ["인덱스 번호"]를 주는 방식으로 각 인덱스에 접근할 수 있..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 2.
• textsms

[jQuery] 제이쿼리 append 와 after 차이 알아보기

2021-03-31 기존의 HTML 문서의 추가적인 태그 및 데이터를 삽입하고자 할 때 append와 after를 고민하고는 하는데 오늘은 이 둘의 차이를 알아보자 - append 와 after의 정의 * append : 선택한 요소의 끝에 콘텐츠를 삽입합니다. * after : 선택한 요소 뒤에 콘텐츠를 삽입합니다. 해당 메소드들의 정의를 읽어 보았을 때는 큰 차이가 없어 보이지만, 실제로 동작하는 방식은 크게 차이가 난다. 해당 두 메서드의 차이를 아래의 예제를 통해 알아보도록 하자. - 예제 아래의 예제는 두개의 div를 출력하는 태그이다. div1 div2 ​ 해당 예제를 통해 div1 에는 append 메서드를 div2에는 after를 이용해서 html 태그를 추가해 보도록 하자. - 결과 di..

• format_list_bulleted WEB/jQuery
• · 2021. 3. 31.
• textsms

[CSS] CSS Attribute Selectors(속성 선택자) 알아보기

2021-03-28 속성 선택자는 말 그대로 특정 속성 또는 속성 값이 있는 HTML 요소의 스타일 선택하여 지정할 수 있다. 이와 같은 속성 선택자를 사용하는 방법을 알아보자. - a[Target] 속성 선택자는 보통 앞에 태그와 그 뒤에 [ ]가 오게 되며, [ ] 안에 선택하고자 하는 속성을 적어 주면 된다. 예제에서는 div [id="testDiv1"]와 같이 선택하였다. Hello1 Hello2 Hello3 Hello4 위의 코드의 결과로는 아래와 같은 결과로 나타난다. - CSS [attribute~="value"] Selector 속성 선택자는 =기호를 다른 특수 문자와 조합하면 다양한 기능을 가지게 된다. 우선적으로 ~와 결합한 ~=는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는..

• format_list_bulleted WEB/CSS
• · 2021. 3. 28.
• textsms

[CSS] CSS padding을 통한 내부 여백 부여하기

2021-03-27 CSS에서의 padding 속성은 정의된 테두리 내에서 요소의 콘텐츠 주위에 공간을 생성하는 데 사용된다. CSS를 사용하면 요소의 내부의 여백을 조절 할 수 있으며, 요소의 각 측면 위 / 오른쪽 / 아래 / 왼쪽에 패딩을 설정하는 속성이 있다. - padding(top / right / bottom / left) 앞서 말했듯이 위아래 / 좌우 영역에 각각 padding 내부 여백을 부여할 수 있으며, 아래는 [padding-left: 30px; padding-top: 30px;] 와 같이 내부 여백 옵션 30px을 부여하는 코드이다. Area1 Area2 아래의 이미지를 보자. 기존의 div(Area2) 텍스트를 확인해보면 위와 왼쪽에 30px씩 여백이 생겨 그만한 공간만큼 텍스트..

• format_list_bulleted WEB/CSS
• · 2021. 3. 27.
• textsms