홍장군의 기록

프로그래머스 1레벨 > 코딩테스트 연습 > 월간 코드 챌린지 시즌 2 > 음양 더하기 내 풀이) for문 내부에 if 문을 적어서 풀어도 되지만, 삼항 연산자를 쓰는 것이 더욱 코드가 간결해져 써보았다. 입력값으로 들어오는 absolutes에 들어있는 각 원소의 크기는 최대 1000이므로 number 형 범위에 충분히 포함된다. 또한 absolutes의 크기는 1000이하이므로 for문을 통해 계산하여도 시간이 충분하다. 내 코드) function solution(absolutes, signs) { let answer = 0; for (let i in signs) { answer += signs[i] ? absolutes[i] : absolutes[i] * -1; } return answer; }

백준 문제는 보통 입력 값이 여러 개 주어진다. 한 줄에 한 입력값만 있기도 하고, 여러 입력값들이 띄어쓰기를 기준으로 나뉘어 한 줄에 주어지기도 하고, 배열로 주어지기도 하고... 매우 다양하다. 때문에 내가 쓰는 프로그래밍 언어로 어떻게 입력받을지 알아두는 것이 중요하다. (다양한 입력 예시들... 한 줄에 숫자 여러 개가 주어지기도 하고, 숫자와 문자가 섞이기도 하고, 하나만 주어지기도 한다.) input을 활용하자. 1. 값 한개만 받을 경우 # 문자열 한 개 입력받기. my_str = input() # 정수 한 개 입력받기 my_num = int(input()) 2. 한 줄에 값 여러 개 입력 받기 # input: abc def ghi # output: ["abc", "def", "ghi"] n..

프로그래머스 1레벨 > 코딩테스트 연습 > 연습문제 > 두 정수 사이의 합. 내 풀이) 간단한 문제이다. 우선 js에서 Number 타입은 -9,007,199,254,740,991부터 9,007,199,254,740,991 범위 내라고 한다... 정말 어마무시한 값이다. java나 c에선 고작 int 형으로 4바이트밖에 쓰지 못하는데, js에선 거의 1경에 달하는 숫자까지 쓸 수 있으니 말이다. 이보다 더 큰 수는 Number 타입의 값인 Infinity, -Infinity로 표현되기도 하고, ES2020년부터 지원되는 bigInt 타입을 써서 더 큰 수를 나타낼 수 있다. 이 문제에선 최악의 경우 고작(?) -10,000,000 ~ 10,000,000 사이 합을 구하면 되므로 그냥 for 문을 사용하자..

0. 오늘의 배울 것 grid 는 2차원적 배치 방식이다!! 앞서 flex box는 1차원적 배치 방식이라고 말했다. container 박스 안에, 가로든 세로든 한 방향으로 일렬 정렬하기 때문이다. 이 대신 바둑판처럼, 즉 2차원배열처럼 요소를 배치하려면 부모 박스에 grid 속성을 주어야 한다. 이번 포스팅에서는 그리드를 어떻게 활용할지 알아보자. 1. 그리드, Grid? flex는 1차원적으로 한 방향으로 요소를 배치한다면, grid는 2차원적으로 바둑판처럼 요소를 배치한다. 이 때 각 칸을 나누는 줄을 그리드 라인이라 한다. 그리고 각 칸을 그리드 셀이라고 한다. 2. 그리드 나누기 먼저 요소를 담을 컨테이너를 grid 형식으로 만들어보자. 아래 코드를 예시로 들면, 2행 3열로 나누고 세로를 5..

0. 오늘의 배울 것 flex box는 display 속성의 값 중 하나이다!! 앞에서 배운 display 속성 값에는 block, inline, inline-block이 있다. 이 속성들은 각 요소가 부모 요소 내에서 어떻게 배치될지 나타내주었다. 그런데 flex box는, 태그 내 요소들이 어떤 방향으로 배치될지 흐름을 정해준다. 즉, 내가 a, b, c 요소를 위에서 아래로 배치하고 싶다면 a, b, c를 감싸는 부모 요소 parent를 만들고, parent의 display 속성에 flex 값을 주는 것이다. flex box는 gap, align-center 등 여러 속성이 있어 다양하게 활용할 수 있다. 이번에는 이 flex box를 활용하는 법에 대해 알아보자. 1. flex box flex-b..

HTML html 태그의 기본 문법을 알아보자!! html 파일 자체의 정보를 나타내자. html 파일에 정보값을 주기 위해 메타 태그나 시맨틱 태그를 활용할 수 있다. 1. html이란 css는 웹의 디자인을 꾸미는 부가적인 요소로, 웹을 이루는 기본 뼈대는 결국 html이다!! html: Hypertext Markup Language 의 줄임말 하이퍼텍스트: 서로 링크로 연결된 문서를 뜻함. 무슨 단어를 클릭하면 다른 링크로 넘어가는 등, 웹들은 서로 다른 여러 링크들로 연결되어있다. 마크업: 마크업은 실질적인 내용이 아니라 내용에 제목, 이미지, 링크 등의 표시를 해주는 것이다!! 즉, 이것은 그냥 제목 내용이고 이렇게 태그로 제목이라는 마크업을해준다. 마크업 랭귀지: 마크업할 때 쓰는 언어. 즉,..

0. 오늘의 배울 것. positon은 display에서 벗어난 새로운 위치!! 기본적으로 모든 태그는 display 속성을 가지고 있다. 이 display 속성을 통해, 요소들이 한 파일 내에서 어떻게 배치될지 정해지는 것이다. 그런데 내가 기본적인 display 흐름 말고, 다른 식으로 배치하고 싶다면 어떻게 할까? 예쁜 사이트에서 보이는 navigation bar 처럼 브라우저 위에 딱 붙어있거나, 어떤 요소 위에 둥둥 떠있게 하거나 등, 다양한 배치를 하고 싶다면 어떻게 해야 할까. 이렇게 기본적인 display 흐름에서 벗어난 곳에 배치하기 위해, position이라는 속성을 사용한다. 이번 시간에는 position 속성의 속성 값에는 무엇이 있는지, 그리고 어떤 효과가 있는지를 알아보자. 1...

(css는 사실 cascading style sheets의 줄임말이다. cascading은 '위에서 아래로 흐르는' 이라는 뜻인데, 왜 이런 뜻이 있을지 알아보자.) 0. 오늘의 배울 것 css의 선택자를 잘 써먹어야 코드가 예쁘다!! css를 작성할 때엔, 스타일을 지정할 선택자를 고르고 그 선택자에 스타일을 선언하면 된다. 그런데 사실, 선택자는 단순히 태그나 class, id 이름만 적는 곳이 아니다! class 이름을 여러 개 섞을 수도 있고, class 내부 하위 태그를 선택할 수도 있다. 선택자를 쓰는 법을 알아보자. css에도 상속이 있다. css도 프로그래밍 언어처럼 스타일을 상속한다! 부모 태그에 스타일을 주면, 그의 자식 태그에게도 그 스타일이 상속된다. 그런데 만약 하나의 속성이 여러..

0. 오늘의 배울 것. html 태그들은 박스모델을 따른다! 요소가 박스 안에 차곡차곡 쌓여있는 듯한 구조이기에, 박스모델 box model이라 불린다. 하나의 요소에 margin, border, padding, content 영역이 박스처럼 각자 자신의 영역을 차지하기 때문에 css를 잘 다루기 위해선 이 모델을 잘 알고, 각 속성을 어떻게 다루는지 파악해야 한다. 각 박스모델 태그들이 html이라는 하나의 파일 내부에서 어디에 놓일지 기본적으로 주어지는 위치 흐름이 바로 디스플레이다! html은 여러 요소들로 이루어졌다. 우리가 div 태그를 연달아서 쓰면 div 태그들은 박스가 차곡차곡 쌓이듯 위에서 아래로 배치된다. 반면에 span 태그를 여러 개 쓰면, span 태그들은 줄줄이 소세지처럼 연달아..

(css를 배울 때 가장 신기했던건 class나 id 이름으로 하이픈을 넣을 수 있단 것이었다...) 0. css의 기본 개념. html이 너무 길어지면 각 태그 하나하나에 style을 넣는 건 너무 번거로워진다. 때문에 각 태그들에게 어떤 style을 적용해줄지 규칙을 세워야 한다. 바로 이렇게 h1에 대한 규칙을 세우듯 태그들의 규칙을 세워 style을 적용하는 게 좋다. 즉, css를 개발한다는 것은 css 규칙을 만든다는 것이다. 1. css 규칙 html 의 내용과 그에 대한 css를 분리하는 것을 관심사의 분리, seperation of concern 이라고 한다. 관심사 분리의 장점: 내용과 스타일을 고치기 편하다. css 규칙은 선택자와 선언의 짝으로 이루어졌다. 선택자란 어떤 요소에 규칙..