[HTML] HTML Text Formatting 태그들 알아보기

2021-04-18 html 에는 태그 외에도 텍스트에 효과를 주는 태그들이 몇가지 존재하는데 오늘이 이 태그들을 알아보자. - 예제 html 예제에는 기본적으로 div 태그에 폰트사이즈 속성만 부여하였다. Hello World ​ - Hello World strong 기본적으로 텍스트 작업시 자주 쓰는 단축키 ctrl + b 정도로 생각하면 되며, 글자의 기본 굵기가 증가하게된다. Hello World 태그를 써도 보여지는 결과물은 태그와 같다. - Hello World i 태그는 italic 이라는 의미를 가지며, 텍스트에 기울임 효과를 준다. Hello World 태그 역시 기울임 효과를 주며, 보여주는 결과물을 i 태그와 같다. - Hello World small 태그는 말그대로 텍스트의 크기가 ..

• format_list_bulleted WEB/HTML
• · 2021. 4. 18.
• textsms

[jQuery] 제이쿼리를 이용한 href(링크) 부여 attr/location

2021-04-17 태그를 이용하여 링크를 부여하는 방식이 일반적이나, 제이쿼리 내부에서도 이벤트를 걸어서 링크를 부여할 수 있다. 오늘은 그 방법을 알아보도록 하자. - 예제 코드 예제 코드는 3개의 버튼을 만들고 각 버튼에 검색 포털 사이트로 가는 링크를 걸어 두었다. 네이버 다음 구글 ​ 여기서 주의 깊게 봐야하는 코드는 아래의 코드이다. $(location).attr("href", "이동하고 싶은 링크") 여기서 선택된 location은 인터페이스로써 객체가 연결된 장소(URL)를 표현한다. (다른 말로 현재의 url 정보를 가지고 있다.) Location 인터페이스에 변경을 가하면 연결된 객체에도 반영되게 된다. 여기서의 연결된 객체는 button 태그라고 볼 수 있으며, button 태그에 속..

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

[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