2021-03-29 문제 상근이는 보통 사람들이 사는 것과는 조금 다른 삶을 사는 사람이다. 상근이는 이런 사람들의 시선이 부담스럽기 때문에, 자신만의 숫자를 개발하기로 했다. 바로 그 이름은 팩토리얼 진법이다. 팩토리얼 진법은 각 자리에 올 수 있는 숫자는 0부터 9까지로 10진법과 거의 비슷하다. 하지만, 읽는 법은 조금 다르다. 팩토리얼 진법에서는 i번 자리의 값을 ai×i!로 계산한다. 즉, 팩토리얼 진법에서 719는 10진법에서 53과 같다. 그 이유는 7×3! + 1×2! + 9×1! = 53이기 때문이다. 팩토리얼 진법으로 작성한 숫자가 주어졌을 때, 10진법으로 읽은 값을 구하는 프로그램을 작성하시오. 입력 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루..
2021-03-28 속성 선택자는 말 그대로 특정 속성 또는 속성 값이 있는 HTML 요소의 스타일 선택하여 지정할 수 있다. 이와 같은 속성 선택자를 사용하는 방법을 알아보자. - a[Target] 속성 선택자는 보통 앞에 태그와 그 뒤에 [ ]가 오게 되며, [ ] 안에 선택하고자 하는 속성을 적어 주면 된다. 예제에서는 div [id="testDiv1"]와 같이 선택하였다. Hello1 Hello2 Hello3 Hello4 위의 코드의 결과로는 아래와 같은 결과로 나타난다. - CSS [attribute~="value"] Selector 속성 선택자는 =기호를 다른 특수 문자와 조합하면 다양한 기능을 가지게 된다. 우선적으로 ~와 결합한 ~=는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는..
2021-03-27 CSS에서의 padding 속성은 정의된 테두리 내에서 요소의 콘텐츠 주위에 공간을 생성하는 데 사용된다. CSS를 사용하면 요소의 내부의 여백을 조절 할 수 있으며, 요소의 각 측면 위 / 오른쪽 / 아래 / 왼쪽에 패딩을 설정하는 속성이 있다. - padding(top / right / bottom / left) 앞서 말했듯이 위아래 / 좌우 영역에 각각 padding 내부 여백을 부여할 수 있으며, 아래는 [padding-left: 30px; padding-top: 30px;] 와 같이 내부 여백 옵션 30px을 부여하는 코드이다. Area1 Area2 아래의 이미지를 보자. 기존의 div(Area2) 텍스트를 확인해보면 위와 왼쪽에 30px씩 여백이 생겨 그만한 공간만큼 텍스트..
2021-03-26 margin 한국에서는 주로 이익잉여금 정도로 해석되곤 하지만 사전적 의미로는 이보다 여유/ 가장자리라는 의미가 강하다. 해당 margin은 css에서 각 요소들에 외부 여백을 부여하거나 요소의정렬 수단으로 사용된다. 이 margin의 사용방법을 알아보도록 하자. - 예제 코드 아래는 예제로 사용될 코드이다. 기본적인 div태그에 영역 속성을 부여해주었으며, body 여백공간들을 제거한 상태이다. Area 실행시 아래와 같은 브라우저 화면이 나타난다. - margin(top/right/bottom/left) 마진에는 각각 top / right / bottom / left 옵션을 부여할 수 있다. 각각 단어에서도 느껴지듯이 태그의 위아래 좌우에 부모 태그를 기준으로 margin을 부여할..
2021-03-25 자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자. - 리소스 css 파일 준비 우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다. 이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다. @charset "UTF-8"; /* div 태그에 공통된 속성 부여 */ div{ width: 300px; /*..
2021-03-24 위와 같은 형식의 텍스트를 입력할 수 있고 우측에 내용을 검색할 수 있는 버튼이 있는 형식이 있다. 이는 구글 / 네이버 / 다음과 같은 웹사이트에서 흔히 볼 수 있다. 여기서의 검색이 진행되는 방식은 흔히 버튼을 누르거나 Enter 키를 통해서 페이지가 넘어가는 형태이다. 이는 한 가지의 동작에 두 가지 방식이 적용되는 형태인데, 이를 구현하는 방법을 알아보자. - 구현코드 바로 구현 코드를 첨부하였다. 코드의 내용은 버튼을 클릭하면 이벤트가 발생하여, 콘솔 창에서의 해당 input 창에 입력한 내용을 출력하고 알림 창도 뜰 수 있도록 구현하였다. 이후 Enter 키 입력 시에도 구현한 click 이벤트가 발생할 수 있도록 keydown시 클릭 트리거가 발생할 수 있도록 하였다. 여..