Salangdung_i의 기록

13 단계 #pond { display: flex; flex-direction:row-reverse; justify-content:center; align-items:end } 14 단계 #pond { display: flex; } .yellow { order: 1; } 15 단계 #pond { display: flex; } .red { order: -1; } 16 단계 #pond { display: flex; align-items: flex-start; } .yellow { align-self:flex-end; } 17 단계 #pond { display: flex; align-items: flex-start; } .yellow { order: 1; align-self:end } 18 단계 #pond {..

1 단계 #pond { display: flex; justify-content:end; } 2 단계 #pond { display: flex; justify-content:center; } 3 단계 #pond { display: flex; justify-content:space-around; } 4 단계 #pond { display: flex; justify-content:space-between; } 5 단계 #pond { display: flex; align-items:end; } 6 단계 #pond { display: flex; justify-content:center; align-items:center; } 7 단계 #pond { display: flex; justify-content:space-a..

block , inline 요소 display position 1. block , inline 요소 HTML은 block 요소와 inline 요소로 나눌수있다. 간단하게 생각하면 block요소는 콘텐츠의 크기에 상관없이 한줄을 다 차지하는거고, inline 요소는 콘텐츠의 크기만큼의 너비를 차지하는 것이다. 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다. 인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다. 콘텐츠 모델 : 일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다. ..

css에서 이렇게 하는 것을 하드코딩으로 본다. 이렇게 코딩하기보단 변수를 지정해서 하는것이 좋다. 변수를 선언할 때는 아래와 같이 ' --변수명 : 속성' 으로 지정한다. --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); 사용할 때는 var(변수); 로 아래와 같이 사용한다. 변수를 선언할때 부모노드에서 선언했다면, 변수의 사용은 부모노드와 자식레벨에서 사용이 가능하다. html CSS variables study CSS variables study css : first 에서 변수를 선언하면 자식레벨인 .first li 에서는 사용가능하지만 .second에서는 적용되지 않는다. .first { -..

문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..

문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다. 4..

문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7 s..

[ 문제 설명 ] 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력..

font-family - 글꼴을 지정하는 속성 font-size - 글자 크기를 지정하는 속성 font-weight - 글자 굵기를 지정하는 속성 color - 글자 색을 지정하는 속성 text-align - 텍스트 정렬 방법을 지정하는 속성 line-height - 줄 간격을 조절하는 속성 font-family font-family:[,,] body { font-family:"맑은 고딕", 돋움, 굴림} // 문서전체에 "맑은 고딕" 만약 없다면 돋움, 돋움도 없다면 굴림 적용 @font-face - 웹 폰트 사용 @font-face { font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); } 구글 폰트 : https://fonts.google.com/earlya..