매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.
섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2)
Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다. Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.
제한 사항
scoville의 길이는 2 이상 1,000,000 이하입니다.
K는 0 이상 1,000,000,000 이하입니다.
scoville의 원소는 각각 0 이상 1,000,000 이하입니다.
모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.
입출력 예
scovilleKreturn
[1, 2, 3, 9, 10, 12]
7
2
입출력 예 설명
스코빌 지수가 1인 음식과 2인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다. 새로운 음식의 스코빌 지수 = 1 + (2 * 2) = 5 가진 음식의 스코빌 지수 = [5, 3, 9, 10, 12]
스코빌 지수가 3인 음식과 5인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다. 새로운 음식의 스코빌 지수 = 3 + (5 * 2) = 13 가진 음식의 스코빌 지수 = [13, 9, 10, 12]
모든 음식의 스코빌 지수가 7 이상이 되었고 이때 섞은 횟수는 2회입니다.
해결 방법 : Heap 사용
이유 : stack이나 list를 사용하는 것보다 일단 넣을때 부터 정렬을 해서 넣기때문에 속도가 엄청나게 빠름
def solution(number, k):
answer = ''
stack = [number[0]]
for i in number[1:]:
while len(stack) > 0 and k > 0 and stack[-1] < i:
k -= 1
stack.pop()
stack.append(i)
if k != 0:
stack = stack[:-k]
return ''.join(stack)
visibility: visible;/* 보임 기본값 */visibility: hidden;/* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */visibility: collapse;/* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */
display: none과 차이점
display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)
3.Float
float 속성
요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.
기본 값: none
float: none | left | right | initial | inherit;
<속성 값 >
none
float 시키지 않음(기본값)
left
좌측으로 float 시킴
right
우측으로 float 시킴
4.Clear
clear 속성
요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.
기본 값: none
clear: none | left | right | both | initial | inherit;
부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. *부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다.
Normal-flow의 흐름에서 벗어난다.
fixed
뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다.
부모의 위치에 영향을 받지 않는다.
relative
자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다.
Normal -flow의 흐름에 따른다.
주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다
Normal-flow 란?일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.
offset의 %단위 사용이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.
•em 폰트의 전체 높이를 의미합니다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )
family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.
generic-family:family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙입니다. 예를 들면 아래와 같이 선언하여 사용할 수 있습니다.
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 됩니다. 만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현이 됩니다. "가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문입니다.
line-height 속성
행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있습니다.
줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,
line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미합니다.
<속성 값 >
normal
기본값으로 브라우저의 기본 속성을 따릅니다.
폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다.
number
font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다.
length
px, em 등 고정 수치로 할당할 수 있습니다.
%
font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다.
주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이입니다.
두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있습니다.
하지만 두 값은 큰 차이가 있습니다. 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식입니다.
number부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
%부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.
@font-face{font-family: webNanumGothic;/* 사용자 지정 웹 폰트명 */src:url(NanumGothic.eot);/* 적용 될 웹 폰트의 경로 */font-weight: bold;/* 필요에 따라 지정 */font-style: italic;/* 필요에 따라 지정 */}body{font-family: webNanumGothic;}
@font-face {
font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
font-weight: bold; /* 필요에 따라 지정 */
font-style: italic; /* 필요에 따라 지정 */ }
body { font-family: webNanumGothic; }
절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.
pt( 1pt - 1/72 of 1 inch )
컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다. 그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다. 예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.
상대 길이
상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.
배경의 색상을 지정하는 속성입니다. 앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다.
background-image
기본 값 : none
배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다.
background- repeat
기본 값 : repeat
이미지의 반복 여부와 방향을 지정하는 속성입니다. 기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시됩니다. background-repeat의 값으로 사용할 수 있는 것들은 다음과 같습니다.
<속성 값 >
repeat
x, y축 으로 모두 반복합니다.
repeat-x
x 축 방향으로만 반복합니다.
repeat-y
y 축 방향으로만 반복합니다.
no-repeat
이미지를 반복하지 않습니다.
background-position기본 값 : 0% 0%요소에서 배경 이미지의 위치를 지정하는 속성입니다. x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다.
<속성 값 >
%
기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다.
px
기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치시킵니다.
키워드
top, left, right, bottom, center 키워드를 사용할 수 있습니다.
키워드는 선언 순서와 관계없이 top, bottom은 y축 기준으로 하며 left, right는 x축을 기준으로 합니다.
background-attachment기본 값 : scroll화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다.
<속성 값 >
scroll
배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않습니다.
local
배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됩니다.
fixed
배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않습니다.
4.박스모델1
Content영역
요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다.
Border영역
content 영역을 감싸는 테두리 선을 border라고 합니다.
Padding영역
content 영역과 테두리 사이의 여백을 padding이라고 합니다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다. 이에 따라 padding을 content의 연장으로 볼 수도 있습니다.
Margin영역
border 바깥쪽의 영역을 margin이라고 합니다. border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다. 즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다.
5.border 속성
border-width
기본 값 : medium선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.
border-style기본 값 : none선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있습니다.
**
none
border를 표시 하지 않습니다.
solid
border를 실선 모양으로 나타냅니다.
double
border를 이중 실선 모양으로 나타냅니다.
dotted
border를 점선 모양으로 나타냅니다.
6. Padding
padding: [-top] [-right] [-bottom] [-left];
0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
0 10px 20px /* 좌, 우 같음 */
0 10px /* 상, 하 같음 & 좌, 우 같음 */
0 /* 상, 우, 하, 좌 모두 같음 *
7.Margin
margin auto기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. 아래 코드를 살펴봅시다.
*margin과 padding의 비교
+
-
auto
단위
margin
o
o
o
px, % ...
padding
o
x
x
px, % ...
음수값 사용 가능 여부!왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다.
%값의 사용과 기준점css 속성을 사용하면서 어떤 값을 적용할 때 이 단위를 적용 할 수 있을까? 라는 생각을 가지고 코딩하는 자세는 매우 중요합니다. margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 사용 할 수 있습니다. %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됩니다. 얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 거 같지만 그렇지 않습니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */
//
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
//
5.자손, 부모 선택자
//자손 선택자
div span { color: red; }
//자식 선택자
div > h1 { color: red; }
//인접 형제 선택자
div + p { color: red; }
6. 가상클래스(특정한 조건을 만족해야 선택함)
/*
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
*/
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
li:first-child { color: red; }
li:last-child { color: blue; }
/*
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
*/
a:link { color: blue; }
a:visited { color: gray; }
/*
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
*/
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }
7. 구체성
important
important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.
important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.
p#page { color: red !important; }
8.상속
상속된 CSS는 구체성을 가지지 못하기 때문에 구체성을 가진 전체 선택자의 스타일이 적용이된다
