미새문지

24.07.02 day16 코드트리 문제 풀기, 프로그래머스 문제 풀기, position 속성 본문

개발 TIL

24.07.02 day16 코드트리 문제 풀기, 프로그래머스 문제 풀기, position 속성

문미새 2024. 7. 2. 23:14
728x90

같은 숫자는 싫어

문제 설명
배열 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의 크기 : 1,000,000 이하의 자연수
배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수

 

입출력 예

arr answer
[1, 1, 3, 3, 0, 1, 1] [1, 3, 0, 1]
[4, 4, 4, 3, 3] [4, 3]

 

def solution(arr):
    answer = [arr[0]]
    
    for i in range(1, len(arr)):
        if arr[i] != arr[i-1]:
            answer.append(arr[i])
    return answer

처음엔 맨 처음부터 시작해서 뒤의 값이 기존과 같으면 넘기고 다르면 다른 배열에 추가함으로써 중복을 없애려고 했는데 인덱스 초과 에러가 나타났다.

그래서 다른 배열에 인덱스 0값을 먼저 넣어주고 반복문을 인덱스1부터 시작하여 앞의 것과 비교해서 다르면 추가하는 방식으로 구현

Position 속성

요소의 위치를 설정하는 방법을 지정하며, 이 속성은 요소가 일반적인 문서 흐름 내에서 어떻게 배치될지 결정하는 데 중요한 역할을 한다.

 

position속성의 종류

1. static(기본값)

  • position 속성을 설정하지 않은 기본값
  • 일반적인 문서 흐름에 따라 배치된다.
  • 기본값은 top, right, bottom, left 같은 오프셋 속성은 무시된다.

2. relative

  • 기본값과 마찬가지로 일반적인 문서 흐름에 따라 배치되지만 top, right, bottom, left 속성을 사용할 수 있어 요소를 원래 위치에서 상대적으로 이동시킬 수 있다.
  • 요소의 원래 공간은 문서 흐름 내에서 유지된다.

3. absolute

  • 일반적인 문서 흐름에서 제거되고, 가장 가까운 위치 지정 조상을 기준으로 배치된다. 즉, relative나 fixed 등의 위치 지정이 가능한 조상 위치에 맞게 배치된다.
  • 조상이 없으면 초기 컨테이너인 <html>을 기준으로 한다.
  • 요소는 문서 흐름에서 제거되기 때문에 다른 요소에 영향을 미치지 않는다.

4. fixed

  • 요소는 브라우저 창을 기준으로 고정되어 배치된다. 즉, 스크롤이 발생해도 화면에 고정되기 때문에 위치가 변하지 않는다.
  • 일반적인 문서 흐름에서 제거되며, 페이지의 다른 요소에 영향을 미치지 않는다.

5. sticky

  • 요소는 relative와 fixed의 특성을 모두 가진다.
  • 일반적인 문서 흐름에 따라 배치되지만, 특정 임계점에서 브라우저 창에 고정될 수 있다.
  • 요소는 스크롤이 발생할 때 지정된 임계점에서 고정되었다가 임계점을 벗어나면 다시 문서 흐름 내에 배치된다.

즉, sticky는 스크롤을 내리거나 하는 등 화면 이동이 발생할 때, 작성 조건에 도달하면 고정되는 기능을 할 수 있다.

지금껏 html을 작성하면서 sticky를 써본 적이 없었는데, 특정 조건의 위치 이동을 간단히 작성할 수 있어 좋을 것 같다.

 

 

728x90
저작자표시 비영리 변경금지

'개발 TIL' 카테고리의 다른 글

24.07.04 day18 코드트리 문제 풀기, vue.js parsing error 해결,  (3) 2024.07.04
24.07.03 day17 코드트리 문제 풀기, vue.js 학습 시작  (0) 2024.07.03
24.07.01 day15 코드트리 문제 풀기, 프로그래머스 문제 풀기, 시맨틱 마크업  (0) 2024.07.01
24.06.30 day14 코드트리 문제 풀기  (0) 2024.06.30
24.06.29 day13 코드트리 문제 풀기, 프로그래머스 문제 풀기  (0) 2024.06.29
'개발 TIL' Related Articles more