[CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법

2021-03-26 margin 한국에서는 주로 이익잉여금 정도로 해석되곤 하지만 사전적 의미로는 이보다 여유/ 가장자리라는 의미가 강하다. 해당 margin은 css에서 각 요소들에 외부 여백을 부여하거나 요소의정렬 수단으로 사용된다. 이 margin의 사용방법을 알아보도록 하자. - 예제 코드 아래는 예제로 사용될 코드이다. 기본적인 div태그에 영역 속성을 부여해주었으며, body 여백공간들을 제거한 상태이다. Area 실행시 아래와 같은 브라우저 화면이 나타난다. - margin(top/right/bottom/left) 마진에는 각각 top / right / bottom / left 옵션을 부여할 수 있다. 각각 단어에서도 느껴지듯이 태그의 위아래 좌우에 부모 태그를 기준으로 margin을 부여할..

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

[HTML] HTML <link> 태그를 통한 리소스 불러오기

2021-03-25 자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자. - 리소스 css 파일 준비 우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다. 이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다. @charset "UTF-8"; /* div 태그에 공통된 속성 부여 */ div{ width: 300px; /*..

• format_list_bulleted WEB/HTML
• · 2021. 3. 25.
• textsms

[jQuery] 제이쿼리 button click trigger / enter key event

2021-03-24 위와 같은 형식의 텍스트를 입력할 수 있고 우측에 내용을 검색할 수 있는 버튼이 있는 형식이 있다. 이는 구글 / 네이버 / 다음과 같은 웹사이트에서 흔히 볼 수 있다. 여기서의 검색이 진행되는 방식은 흔히 버튼을 누르거나 Enter 키를 통해서 페이지가 넘어가는 형태이다. 이는 한 가지의 동작에 두 가지 방식이 적용되는 형태인데, 이를 구현하는 방법을 알아보자. - 구현코드 바로 구현 코드를 첨부하였다. 코드의 내용은 버튼을 클릭하면 이벤트가 발생하여, 콘솔 창에서의 해당 input 창에 입력한 내용을 출력하고 알림 창도 뜰 수 있도록 구현하였다. 이후 Enter 키 입력 시에도 구현한 click 이벤트가 발생할 수 있도록 keydown시 클릭 트리거가 발생할 수 있도록 하였다. 여..

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

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류)

2021-03-23 Combinators 선택자들은 각 선택자들의 관계를 설명하며, 특정한 부호로 이들과의 관계를 규정하며 표현할 수 있다. - descendant selector( " " ) descendant 한국어로 번역하면 자손이라는 의미를 가지고 있다. 때문에 [ 부모선택자 자손 선택자 ]라고 지정 시 해당 부모의 모든 자손이 선택된다. (space 키 즉 하나의 빈공 백문자가 기호로 사용된다.) AAA BBB BBB-1 BBB-2 BBB-3 CCC DDD 위의 예제는 가장 상위 부모태그 outset을 기준으로 하위에 있는 li 태그를 선택하였다. 그 결과 outset이 감싸고 있는 모든 li 태그들이 영향을 받는 것을 확인할 수 있다. - child selector( " > " ) child ..

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

[JavaScript] JS 변수 키워드 let 과 var 알아보기

2021-03-21 자바스크립트 내부에서 변수를 선언하는 키워드 let과 var 이 존재한다. 해당 두 키워드는 변수를 선언하는 측면에서는 비슷하다. 때문에 둘을 비교하는 경우가 많은데, 오늘은 이둘의 기능적인 측면에서의 차이점을 비교하면서 알아보자. - 선언 변수 선언은 두 키워드 차이가 없다. 또한 var 와 let으로 선언된 변수는 호이스팅이 적용되기 때문에 아래와 같이 변수명만 선언하는 것도 가능하다. var num1 let num2 console.log(num1) console.log(num2) num1 = 10 num2 = 20 - 블록스코프(Block Scope) 블록 스코프에서는 조금에 차이가 있다. 아래의 코드를 보자. 위와 같이 블록 내부에서 각 키워드 변수들을 100 / 200으로 값..

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

[JavaScript] JS 변수 키워드 const 알아보기

2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..

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