본문 바로가기
반응형

전체 글19

[Java] BufferedReader / BufferedWriter 사용 방법과 사용하는 이유 (Scanner가 느린 이유) [Java] BufferedReader / BufferedWriter 사용 방법과 사용하는 이유 BufferedReader public class Main { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); String s = br.readLine(); String[] arr = s.split(" "); StringTokenizer st = new StringTokenizer(br.readLine()); int n = Integer.parseInt(st.nextToken()); } } 일반적으로 readLine()을.. 2024. 3. 1.
[JS] 이중 등호(==)와 삼중 등호(===)의 차이 ※ 이 글의 모든 예시는 Mozilla를 참고하였다. [JS] 이중 등호와 삼중 등호 JS는 값 비교 연산을 위해 두 가지 등호를 제공한다. 모두 두 값의 비교를 수행하지만 그 형태가 다르게 나타난다. == (동등 연산자, Equality operator) '느슨한 동등'을 표현한다. 두 값의 형식이 다를 경우에 형 변환을 하여 비교한다. 이는 'true'로 이끌어내는 범위를 넓혀준다. 0 == false// true "" == false// true "" == 0 // true '1' == 1// true [1, 2] == '1,2'// true '느슨한 동등'을 통한 비교는 예상하지 못한 값을 도출할 수 있기 드물게 사용된다. 개발자의 의도에 따라 사용될 수 있는데 일반적으로 0, "", false를.. 2023. 11. 21.
[CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) [CSS] 다양한 폰트 사용하기 (feat. Google Fonts) CSS에서 'font-family' 속성으로 폰트(글꼴)를 설정할 수 있지만 그 수는 한정적이다. 다양한 폰트들을 무료로 제공해주는 사이트들이 존재하는데 그 중 대표적인 것이 'Google Fonts'이다. https://fonts.google.com/?subset=korean&noto.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 무료로 사용할 수 있는 폰트들을 확인할 수 있다. 필터를 통해서 크기, 언어, 디자인 등을 설정할 수 있다. 특정 언어에만 적.. 2023. 11. 17.
[HTML] <button>이 <form> 안에 있는 경우 [HTML] 이 안에 있는 경우 이 안에 있는 경우 클릭했을 때 'submit'이 실행된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 위와 같이 안에 있는 은 type이 'submit'인 과 동일하다. 은 안에 있을 때 type의 기본값이 'submit'이 된다. 따라서 버튼을 클릭했을 때 'submit'이 발생하지 않게 하기 위해서는 type을 'button'으로 지정해주면 된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 2023. 11. 15.
[CSS] transition 애니메이션 부여하기 [CSS] transition CSS에는 한 요소가 다른 값으로 변화할 때 애니메이션을 부여할 수 있는 속성인 'transition'이 존재한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 일반적으로 'transition'이 적용되지 않은 모습이다. 마우스를 올렸을 때 즉각적으로 속성이 변한다. 'transition'은 애니메이션 효과를 주어서 시간에 걸쳐 부드럽게 변하도록 한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'transition'은 property name, duration, timing function, delay의 4가지 값을 가지고 각 값은 생략이 가능하다.. 2023. 11. 13.
[CSS] 상대 단위 em과 rem [CSS] em과 rem em과 rem은 CSS의 상대 단위이다. 'font-size' 속성을 기준으로 상대적인 크기를 나타낸다. 앞에 숫자를 붙여 1em, 1rem의 형태로 사용하고 숫자는 기준이 되는 'font-size'의 배수가 된다. (예를 들어 2em은 'font-size'의 2배 크기를 의미한다.) em과 rem은 어느 요소의 'font-size'를 기준으로 하는지에 따라 차이가 나타난다. em See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'em'은 각 요소의 'font-size'에 상대적이다. 'padding'을 동일하게 설정했는데 각 요소의 'font-size'에 맞춰 다르게 나타났다. 'font-size'를 설정하지 않으면 부.. 2023. 11. 9.
[CSS] 투명도 설정 (feat. opacity, rgba) [CSS] 투명도 설정 CSS는 요소의 투명도를 조절할 수 있는 여러 방법들이 존재한다. 1. opacity See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 0과 1 사이의 값을 허용한다. 'opacity'는 '불투명'을 의미하기에 값이 낮을수록 투명하고 높을수록 불투명하다. 요소 전체 투명도에 영향을 준다. 2. rgba See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 기존 'rgb'의 형태에 투명도를 추가한 것으로 4개의 값 중 마지막 값이 투명도를 나타낸다. 'opacity'와 동일하게 0과 1 사이의 값을 허용하고 값이 높을수록 불투명하다. 요소 전체에 영향을 주는 'opacity.. 2023. 11. 7.
[HTML] 요소 사이의 공백과 해결법 [HTML] 요소 사이의 공백과 해결법 HTML의 요소 중 'inline-block' 태그에는 문제가 있다. 요소 사이에 공백이 발생한다는 것이다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 코드의 문법에 따라 다른 결과가 나타난다. 'span1'과 'span2'는 붙어 있는 반면에 'span3'와 'span4' 사이에는 공백이 있다. 공백이 나타나는 현상은 태그뿐만 아니라 , 등에서도 나타난다. 요소 사이에 공백이 발생하는 현상은 CSS로 요소들의 속성을 선언할 때에 어려움을 줄 수 있다. 위 코드의 첫 번째 줄처럼 한 줄에 태그를 이어 붙이면 공백을 없앨 수 있지만 가독성이 떨어진다. 이 문제를 해결할 수 있는 방법은 다음과 같다. 한 .. 2023. 11. 6.
[CSS] %, 백분율 단위 (CSS percentage) [CSS] %, 백분율 단위 CSS에는 길이나 크기를 나타내는 단위들이 있는데 그 중 하나가 '%(percentage)'이다. '%'는 그 값이 다른 값과 항상 상대적으로 나타난다. 어떤 값의 백분율이 되는지는 경우에 따라 다르게 나타난다. 부모 요소의 값에 대한 백분율 .parent { background-color: gold; width: 120px; height: 80px; } .child { background-color: orange; width: 50%; height: 50%; } 퍼센티지 값은 부모 요소에 대해 상대적이다. 자식 요소의 너비는 부모 요소 너비의 50%, 높이는 부모 요소 높이의 50%이다. 여기서 자식 요소의 너비와 높이는 각각 60px, 40px와 같다. 만약 부모 요소의 .. 2023. 11. 3.
반응형