웹 공부일지

1 단계 : 약수의 개수와 덧셈 코딩테스트 연습 > 월간 코드 챌린지 시즌2 > 약수의 개수와 덧셈 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ left ≤ right ≤ 1,000 입출력 예 left right result 13 17 43 24 27 52 입출력 예 설명 입출력 예 #1 다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다. 수 약수 약수의 개수 13 1, 13 2 14 1, 2, 7, 14 4 15 1, 3, 5, 15 4 16 1, 2, 4, 8, 16 5 1..

CSS 색상 표현 방법 CSS 색상 표현법에는 3가지 방법이 있습니다. 1. 색상 이름으로 표현하기 2. RGB 속성 값으로 표현하기 3. 16진수 색상 값으로 표현하기 CSS3 에서 새롭게 추가된 방법이 있습니다. 4. RGBA 색상값으로 표현하기 5. HSL 색상값으로 표현하기 6. HSLA 색상값으로 표현하기 7. opacity 속성으로 표현하기 1. 색상 이름으로 표현하기 /* 일상생활에서 사용하는 색상 이름으로 색을 표현합니다. */ p {color : red;} .container {background : silver;} 2. RGB 속성 값으로 표현하기 /* RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 갖고, 이 수치들을 조절해서 색을 표현합니다. ..

font-size, 단위의 고찰 CSS에서 폰트의 크기나 요소의 넓이, 높이값 등을 표현할 때 단위를 쓰죠? 예를들어 100%, 100px, 10vw, 1.5 rem 이런 단위들 많이 보셨을 겁니다. 오늘 저는 이런 단위에 대한 심층적인 고찰을 해볼까 합니다. ▶px : 해상도에 따라 달라지는 기본단위 font-size : 12px; ▶% : 부모요소의 글자 크기를 100% 기준으로 계산한 % 단위 font-size : 150%; ▶em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위로서, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px이 된다. font-size : 1.5em; ▶rem : em과 비슷하지만 부모요소가 아닌 최상위 ..

1 단계 : 체육복 코딩테스트 연습 > 완전탐색 > 최소직사각형 문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50..

1 단계 : 성격 유형 검사하기 코딩테스트 연습 > 2022 KAKAO TECH INTERNSHIP > 성격 유형 검사하기 문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은..

인라인 구조와 블럭구조에 대한 고찰 안녕하세요, 우리는 태그를 배우기전에 인라인 구조와 블럭구조를 먼저 알아야 합니다. 그래야 태그의 정확한 특성을 이해하고 적재적소에 사용할 수 있겠죠? 먼저 정리 부터 보시죠 요소 유형 특징 블록 레벨 요소 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함될 수 없는 요소가 있습니다. 인라인 요소 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니..

이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 오늘은 이미지 IR 효과에 대해서 알아보겠습니다. 추가적으로 이미지 스프라이트 기법도 소개해드리겠습니다. 제가 이미지 스프라이트 기법으로 백그라운드 이미지를 어떻게 넣고 표현하는지 봐주세요! 이미지 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있습니드. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없잖아요? 그래서 이미지에 텍스트를 붙여줘야겠죠? 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그..

1 단계 : 같은 숫자는 싫어 코딩테스트 연습 > 스택 / 큐 > 같은 숫자는 싫어 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한사항 배열 arr의 크..

SCSS가 도대체 뭘까? CSS는 접근성도 좋고 배우기 좋습니다. 하지만 CSS는 작업이 고도화 될수록 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커지죠. 그러한 배경에서 나온 친구들이 Sass, Less, Stylus 입니다. 사스는요, 기초 언어에 힘과 우아함을 더해주는 CSS의 확장입니다. 웹에서는 CSS만 동작하는데 이것들은 어떻게 동작시킬까요? SCSS로 코드 작성 방법 CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 ..

번외편 : 별찍기 자바스크립트 별찍기 01. 사각형 //01. 사각형 for(let i = 1; i