whatisthis?

for문 - (4) 💡문제 본격적으로 for문 문제를 풀기 전에 주의해야 할 점이 있다. 입출력 방식이 느리면 여러 줄을 입력받거나 출력할 때 시간초과가 날 수 있다는 점이다. C++을 사용하고 있고 cin/cout을 사용하고자 한다면, cin.tie(NULL)과 sync_with_stdio(false)를 둘 다 적용해 주고, endl 대신 개행문자(\n)를 쓰자. 단, 이렇게 하면 더 이상 scanf/printf/puts/getchar/putchar 등 C의 입출력 방식을 사용하면 안 된다. Java를 사용하고 있다면, Scanner와 System.out.println 대신 BufferedReader와 BufferedWriter를 사용할 수 있다. BufferedWriter.flush는 맨 마지막에 한..

for문 - (3) 💡문제 n이 주어졌을 때, 1부터 n까지 합을 구하는 프로그램을 작성하시오. 📁입력 첫째 줄에 n (1 ≤ n ≤ 10,000)이 주어진다. 📈출력 1부터 n까지 합을 출력한다. 예제 입력 3 예제 출력 6 1+2+3=6 let input = require('fs').readFileSync('/dev/stdin'); let n = Number(input); let sum = 0; for(let i=1;i

for문 - (2) 💡문제 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 📁입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 let input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); T = Number(input[0]); for(let i=1;i

for문 - (1) 💡문제 N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다. 📁입력 첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다. 📈출력 출력형식과 같게 N*1부터 N*9까지 출력한다. 예제 입력 2 예제 출력 2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 2 * 4 = 8 2 * 5 = 10 2 * 6 = 12 2 * 7 = 14 2 * 8 = 16 2 * 9 = 18 let input = require('fs').readFileSync('/dev/stdin'); let N = Number(input); for(i=1;i

Float The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow. https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Block Inline 과 Block의 좋은 점을 합친 느낌. 지난 inline box 예제에서 의 display를 inline-block으로 설정해주자. span { display: inline-block; } display: inline (span의 default값) 일때는 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (top/bottom) border (top/bottom) margin (top/bottom) 위와 같은 특성때문에 padding-bottom을 해주면 위..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Box = 글자 처럼 취급. Box를 상하로 정렬했다면 Inline은 옆으로 늘이는 느낌. box 타입은 한 줄을 전부 차지해서 위-아래로 쌓이지만, inline 타입은 한 줄을 전부 차지하지 않기 때문에 한 줄에 여러 inline을 옆으로 늘일 수 있다. 대신, 만약 너무 길어진다면 자동으로 줄바꿈 된다. ** block = 면 (영역을 잡기 위해) ** inline = 선 (content를 옆으로 흐르게 하기 위해) 💡 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (to..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Block - 한 줄을 전부 차지. (block : 막다 / 차단하다) - 다음 element가 자기 옆에 오지 못하고, 아래에 오도록 막아버림 1. block의 width를 따로 설정하지 않는다면, 자신의 부모의 content-box (100%) 만큼 width를 차지함. Child 2. block의 width를 따로 설정해주면? 남은 공간은 margin으로 자동으로 채움. width: 300px로 설정한다면? 남은 공간 ( 위 사진상 주황색 부분 ) 은 margin으로. computed에서 값으로 나와있진..

index.html Hello CSS style.css .box{ width: 480px; height: 480px; padding-left: 50px; padding-top: 40px; background-color: #0066FF; color: #FFF; } 우리가 원하는 결과는 정사각형 (480* 480) 인데, 개발자도구로 확인해본 결과 530*520으로 되어있다. 탭에서 확인해보니 우리가 width/height를 설정해준 부분은 content이고 padding까지 포함하니 더 커지는 것. 그래서, 전체 크기가 480*480이 되게 하려면 계산을 해서 padding left와 top값을 빼줘야함. .box{ width: 430px; height: 440px; padding-left: 50px; p..

content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksforgeeks.org/ 가로 = width 세로 = height 1/ content content, 즉 내용을 담는 공간. 2/ padding content와 border사이에 안쪽 여백. 3/ border 테두리. (굵기 / 스타일 / 색상값 필요 - 순서는 무관) border: 1px solid #000000 border: none - 테두리 없앰 위쪽에만 border을 만들고 싶다면? border-top: 1px so..