[CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after

2021-04-16 가상 선택자는 말 그대로 가상의 요소를 추가 선택한다고 이해할 수도 있는데, 해당 표현만으로는 가상 선택자를 표현하기가 어렵다. 떄문에 오늘은 구체적인 예를 들어 가며 가상 선택자 중 ::before / ::after 이 두 가지를 알아보도록 하자. - ::before ::before는 단독으로 사용되는 것이 아닌 다른 선택자 뒤에 붙어 사용하게 된다. 해당 가상 선택자 ::before의 역할은 요소의 내용 앞에 일부 내용을 삽입하는 데 사용할 수 있다. 아래의 예제를 보자. Hello World1 ​ ::before에 들어갈 가상의 내용은 content라는 속성에 값을 넣어주면된다. 예제에서는 특수문자 별을 넣어두었으며, 추가적인 css 속성들을 부여해주었다. 결과를 확인하면 아래와..

• format_list_bulleted WEB/CSS
• · 2021. 4. 16.
• textsms

[JavaScript] JS getElementById() 이용한 아이디 요소 객체 선택

2021-04-15 자바스크립트 코드에서 getElementById("id")를 사용하면 html 태그 내에 해당 id를 가지고 있는 태그를 불러와 요소 객체로 반환할 수 있게 된다. 즉 이를 통해 css 속성을 부여하거나 이벤트를 부여하는 등 다양한 기능을 추가할 수 있다. - getElementById("id") 우선 getElementById() 로 가지고 온 id 객체를 콘솔 창에 출력해 보도록 하자. Hello World1 Hello World2 ​ div1의 아이디를 getElementById() 메소드를 이용해 하나의 변수에 담은뒤에 출력해보면 아래와 같이 태그 정보가 저장된 것을 확인할 수 있다. - getElementById() 스타일 부여 이제 추출되어 div 태그가 담긴 변수에 스타일..

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

[jQuery] 제이쿼리 hide / show 메소드 알아보기

2021-04-14 jquery에서 제공하는 효과 중 hide와 show 메서드가 존재한다. 메서드 이름에도 느껴지듯이 지정된 객체를 숨기고 드러내는 역할을 한다. - 예제 1. -----Hello World----- hide show ​ 위의 예제 코드는 hide 의 클릭이벤트 발생 시에는 div 태그 내용을 숨기고, show의 클릭이벤트 발생 시 div 태그를 다시 나타내는 태그이다. show를 눌렀을 경우 hide를 눌렀을 경우 - 추가사항 show 와 hide 에는 매개 값없이 사용하는 방법도 있지만 아래와 같이 두 가지 매개 값을 받을 수 있다. 첫 번째는 해당 메서드가 실행되는 속도이며, 두 번째는 콜백 함수이다. $(selector). hide(속도, 콜백함수); $(selector). sh..

• format_list_bulleted WEB/jQuery
• · 2021. 4. 14.
• textsms

[JavaScript] JS this(자기자신) 키워드 알아보기

2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World ​ 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World ​ 이벤트에서도 this를 활용할 수 있다. 해당 코드..

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

[JavaScript] JS for 구문의 다양한 형식(in/of) 알아보기

2021-04-11 자바스크립트 내부에서는 for을 이용한 몇 가지 형식의 반복문 구문이 존재한다. 이를 통해 코드의 양을 줄이고 반복적인 업무를 수행할 수 있게 된다. 이 for의 사용법을 알아보도록 하자. - for 아래는 기본 for문 코드이다 정수가 들어가 변수에 루프를 돌면서 더해주는 구조이다. Hello World ​ for() 안에는 3가지 매개값이 들어간다. 1. for구문안에서 사용할 변수(반복 변수) 2. 조건식(해당 조건식의 범위를 벗어나면 루프는 종료된다.) 3. 루프를 한번 끝낼때마다 실행될 코드 위의 for구문에서 num변수는 루프마다 [ 1, 2, 3, 4]의 값이 더해지게 된다. - for(in) for in 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..

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

[JavaScript] JS Switch 구문을 통한 상황 처리 알아보기

2021-04-09 자바스크립트 내부에는 각 상황에 맞는 처리결과 값을 리턴할 수 있는 Switch라는 구문이 존재한다. 이 Switch 구문의 사용법을 알아보도록 하자. - 예제 예제는 학생의 점수에 따른 학점을 부여해주는 간단한 학점 부여 Switch 구문을 작성해 보도록 하겠다. 학점은 A, B, C, D, 로 나누어지면 해당 학점을 받지 못한 학생은 F로 낙제점을 받게 된다. 또한 학생의 점수는 0 ~ 100 점으로 한정한다. - 코드 Hello World ​ 코드의 구조를 파악해보면 switch("조건식") 으로 시작된다. 해당 조건식으로 나온 결과물이 각 case(케이스)에할당되는지 파악한다. case는 중복된 값이 없어야 하며, case는 위에서 아래 순으로 진행된다. case에 조건식의 값..

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