듀의 자료저장소

CSS 패딩(padding)과 마진(margin)의 차이는 다음과 같다. padding은 object 공간 내부의 여백 margin은 object 공간 외부의 여백을 의미한다. *테두리 (border)를 기준으로 하기 때문에 이걸로 내부와 외부를 판단하면 된다. 마진은 블락요소(div)에만 먹히고, 인라인 요소인 에는 먹히지 않는다. margin은 오브젝트 바깥의 주변 공간을 추가하고, padding은 요소 내부에 빈 공간을 만든다. 마진(margin)과 패딩을 쓰는 방법에는 총 2가지가 있다. 1. 세부 지정해서 쓰는 법 margin-right: 10%; margin-top: 10px; padding-left: 5px; 이런 식으로 방향을 일일이 다 써서 쓰는 방법이 있다. **양수 값으로 쓰면 : 요..

IT 공부/프론트엔드(Front-end) 2021. 9. 30. 13:59

518. 정올 연산자 - 자가진단 1 Scanner와 nexInt, 그리고 합계(sum) 과 평균 (avg) 변수를 사용하면 쉽게 풀 수 있는 문제다. 1. int a, b, c 세 개의 정수를 선언하고, scanner로 입력받는다. 2. 합계는 셋 다 더하면 되니까 sum= a+b+c; 평균은 sum(합계)을 n만큼 나누면 되니까 avg = sum/3; → 출력 예시와 완전히 동일한 형식으로 출력해야 하기 때문에, System.out.println("sum" + " : " + sum); 이런 식으로 써주면 된다. 519. 정올 연산자 - 자가진단 2 역시나 scanner 개념으로 입력을 불러오고, number1 / number2 변수에 조건식을 저장해주면 해결 가능하다. a, b 두 개의 정수를 입력받..

IT 공부/알고리즘(Algorithm) 2021. 9. 27. 19:09

오늘은 크롬 확장프로그램을 설치해서 컬러피커(Color picker)를 쓰는 방법을 포스팅해보려 한다. 웹사이트 내에서 내가 원하는 색상추출을 하고 싶을 때 유용한 방법이다. 클론코딩할때 완전히 똑같은 색깔을 찾을 수도 있다. 포토샵의 스포이드 기능이랑 동일한데, 웹사이트 내에서 간단한 클릭 한 번으로 내가 원하는 색상번호를 찾아준다. 먼저 크롬 웹 스토어에 들어가서 컬러피커 (color picker)를 검색을 해준다. 들어가서 보니까 굉장히 유용한 기능이 많다. 크롬 확장프로그램을 사용하면 브라우저 내에서 간단한 연동으로, 편리한 기능들을 쓸 수 있다. 영어 문법을 체크해주는 검사기라던가, 정보를 스크랩해 저장해줄 수 있는 프로그램 사용이 가능하다. https://chrome.google.com/web..

IT 공부/프론트엔드(Front-end) 2021. 9. 26. 20:45

오늘은 CSS overflow 속성의 모든 것을 정리해보려 한다. CSS overflow의 예제 html코드다. 기타 css를 설정해주고, 각 p 마다, overflow 속성을 각각 부여해본다. ▼ 아래와 같은 화면이 나오면 성공! CSS overflow 너무 커서 영역을 벗어나는 콘텐츠를 제어하는 수단 visible , hidden, scroll , auto 총 4가지 종류가 있다. ▶ 보통 hidden과 auto를 많이 쓴다. 1. overflow: visible; 오버플로우란 쉽게 말해서 상자를 만들어주는 거라고 보면 됩니다. 이 영역밖으로 나가면, 그에 따른 조치를 취해주는 겁니다. visible은 그냥 그대로 두는 것으로, 넘치면 콘텐츠가 잘리지 않고 상자 밖으로 보입니다. 2. hidden; ..

IT 공부/프론트엔드(Front-end) 2021. 9. 16. 13:06

정올 연산자 자가진단7 (524번) 문제를 풀다가 모르는 개념이 나왔다. 논리곱이랑 논리합을 이용해서 결과값을 내라고 한다. 그래서 정리하는 자바 논리연산자 개념! 프로그래머스에서 짧게 인강이 있어서 노트정리를 여기 해보려 한다. ↓ 앞으로 하나씩 들어보는 것도 괜찮을 듯!! https://programmers.co.kr/learn/courses/5/lessons/144# 자바 입문 - 논리연산자 자바 입문 가장 널리 쓰이는 프로그래밍 언어 Java로 프로그래밍의 기초를 다져보세요. 이 강의의 내용을 책으로 만나고 싶으시면 여기를 눌러 책 정보를 확인하세요. 강의를 다 들었는데, 지금 programmers.co.kr [논리곱( A&&B ) 엔퍼센트] shift+7 a,b가 모두 True일때만 True를 ..

IT 공부/자바(Java) 2021. 9. 12. 19:23

CDN 서비스는 콘텐츠 전송 네트워크(Contents Delivery Networks)의 약자이다. 쉽게 말하자면, 콘텐츠를 여러 서버에 분산해놓는 것이다. 아직 생소한 CDN 시장은 점차 성장하고 있으며, 2025년에 2배 정도 증가할 것으로 전망하고 있다. 1. 다운로드 (Download) 파일을 캐시서버에 올려두고, 사용자가 캐시서버에서 파일을 전송받거나 끌어다 쓸 수 있다. (ex 구글폰트) 2. 캐싱서비스( Caching ) 방문자가 급격히 늘어나서 이들이 모두 다운로드나 업데이트 작업을 할 때 서버 부하를 막기 위함. 대용량 이미지들은 오리진서비스가 아니라 캐시서버에서 끌어오게 한다. 3. 스트리밍 (Streaming) CDN 서비스를 가장 잘 이용하고 있는 사례. 캐시서버에 두고 있는 영상을..

IT 공부/프론트엔드(Front-end) 2021. 9. 12. 18:21

reset.css란, 기본으로 세팅되어 있는 css들을 전부 초기화해서 제거해주는 작업이다. 여기 나타난 속성들은 따로 정리를 해보기로 했다. inherit 속성: '상속받아서 쓰겠다' 는 뜻. (= 전에 있던 설정을 그대로 가져오겠다. ) a{ color: inherit; } a 라는 태그 속성을 변경할 때, 그대로 사용하겠다는 의미. ▶ 우리가 원래 쓰던 컬러를 그대로 상속받겠다. (기본적으로 모든 색상을 이렇게 한다는 의미) * 아주 간단하게 얘기하자면, 처음 초기화할 때 쓰면!! html doctype에 있는 것들, 원래 기본세팅되어 있는 걸 그대로 가져오겠다는 의미다. text-decoration-color 속성: 텍스트 밑줄의 색상을 정한다. 아래쪽 예시를 보면, I'd far rather b..

IT 공부/프론트엔드(Front-end) 2021. 9. 1. 09:26

오늘은 HTML과 CSS를 공부할 때 가장 많이 참고하는 사이트를 소개해보려 한다. MDNWebDos라는 사이트인데 입문자라면 튜토리얼부터 단계별로 html, css, javascript를 공부할 수 있다. 원하는 개념을 검색해서 바로 찾아볼 수 있다. https://developer.mozilla.org/en-US/docs/Web/HTML HTML: HyperText Markup Language | MDN HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are g..

IT 공부/프론트엔드(Front-end) 2021. 9. 1. 08:07