Definition of Seon

오늘 도전한 과제는 FAQ 아코디언 페이지다.질문 옆에 있는 + 버튼을 누르면 자세한 내용이 나온다. 시맨틱한 Html를 작성하기 위해 아이콘 부분은 img가 아닌 div로 태그를 정했다.백그라운드 이미지로만 해당 아이콘들을 넣었다. 자바스크립트 코드를 추가하여 플러스 버튼을 누르면 hidden을 사라지게 하여아코디언을 구현할 수 있었다. 이번에 새롭게 다루어본 css는 배경이미지와 배경색을 한 번에 넣는 것.먼저 배경이미지를 넣고 그 뒤에 no-repeat, 색상 이름을 쓰면 끝!그럼 배경이미지의 크기를 넘어가는 부분은 해당 색상이 보인다. 이번에도 모바일과 데스크톱이냐에 따라 다른 ui를 적용하여반응형디자인으로 개발을 완료했다.다 만들고보니 글씨가 조금 작은 것 같기도...? 지금 연달아 3개는 오직..

약 1시간 걸린 작업.소셜 링크 프로필을 만들었다!  이번에는 반응형은 아니다.지난번에는 가이드라인을 뒤늦게 발견해서 바로 적용을 못했는데이번에는 스타일 가이드라인을 따라서 스타일링을 했더니보다 빠르게 작업을 완료할 수 있었다. https://seon318.github.io/frontend-mentor-challenges/social-links-profile-main/ Social links profileJessica Randall London, United Kingdom "Front-end developer and avid reader." Github Frontend Mentor LinkedIn Twitter Instagramseon318.github.io 지난번 프로젝트와 달리 오늘 추가해본 것은,:..

::marker로 Marker 스타일링하기 리스트는 과 로 나뉜다.기본적으로 은 1. 2. 3. ...으로 글머리가 생기고은 작은 점으로 글머리가 생긴다.하지만 이 스타일이 마음에 들지 않는다면...?그럴 때 사용하는 css의 ::marker 기능!::marker { /* ... */} 원하는 리스트의 마커 요소에 스타일링을 추가할 수 있다.아래와 같이 사용하면 된다.li::marker { color: red; font-size: 1.5em;} 여기에 사용할 수 있는 프로퍼티는 다음과 같다.1. font properties모든 폰트 프로퍼티를 사용할 수 있다.font, font-size, font-family 등등...font-size를 다르게 한다면?약간 어색하지만 이런 결과도 가능하다.마커만 커..

1. 문제 독서실에서 원하는 자리를 이용 가능한 시간을 구하는 문제다.1, 2번 규칙에 따라 새로 온 사람이 이용하는 좌석을 파악해 문제를 해결해야 한다. 2. 풀이1. 0900 ~ 2100 이라는 숫자로 나오지만 이걸 분 형태로 바꿔주어야 계산이 편함 (아니면 9시 ~ 10시가 100분이 됨..!)2. 사람들이 선호하는 좌석을 구하는 함수 만들기3. heapq를 사용하여 새로운 사람이 오면 추가하고 visited를 True로 바꾸어주기4. 정답은 720에서 시작해서 자리를 사용할 수 없는 시간 만큼 빼기1. max_dist, best_seat 변수 초기화2. 1부터 n+1까지 돌려서 각각 좌석 번호에 대하여, 이미 방문하지 않은 경우에만 실행3. left_dist, right_dist를 무한대로 초기화..

레시피 페이지 메인 오늘 반응형 디자인까지 추가한 레시피 페이지 메인 완성!깃허브 페이지로 볼 수 있게 해두었다. https://seon318.github.io/frontend-mentor-challenges/recipe-page-main/ Recipe pageSimple Omelette Recipe An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.seon318.github.io @media (max-width: 560px) {} 560픽..

CSS 폰트 (글꼴) 적용하기아름다운 웹사이트를 위해서 기본 폰트가 아닌 사용자 지정 폰트가 필요할 때가 있다.보통 프로젝트에서 폰트 설정은 가장 처음에 진행하는데,장기간 프로젝트를 하다보면 다음 프로젝트를 진행할 때 폰트 추가 방법을 까먹기 쉽다. CSS의 @font-face를 사용하면 웹페이지에 온라인 폰트나 폰트 파일을 적용할 수 있다.폰트 문법은 다음과 같다.@font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ];} 1. font-family : 필수, 폰트명으로 사용할 이름을 지정해준다.2. src : 필수, 폰트 파일의 위치를 나타내는 Url을 url() 괄호 안에입력한다.대체 폰트가 있다면 쉼표 뒤에 추가로 입력..

Recipe Page Main HTML과 CSS를 잘 활용하고 싶어서 어떤 프로젝트를 해볼까 찾다가Frontend Mentor라는 사이트에서 도전과제를 제공한다는 사실을 알았다.바로 가입하고 리포지토리 만들어서 첫 프로젝트를 해보았다.앞으로 이 사이트에서 여러 도전과제들을 수행하며 순수한 HTML, CSS에 더 익숙해져야지. 코드는 깃허브에 정리중.이번 프로젝트에서는 깃모지를 써보려고 한다. https://github.com/seon318/frontend-mentor-challenges GitHub - seon318/frontend-mentor-challenges: Challenges from Frontend MentorChallenges from Frontend Mentor. Contribute to ..

1. 문제 이 문제는 풍선 m개를 만드는데 걸리는 최소 시간을 구하는 문제이다.스태프마다 만드는 속도가 다른 상황에서 짧은 시간 안에 최소 시간을 구해야 한다. 2. 풀이1. l, r을 양 끝 숫자 0과 max(time) * m으로 초기화한다.2. l보다 r이 크거나 같은 동안 반복문을 실행한다.3. 두 수의 중간값 mid에 대하여 스태프마다 해당 시간에 몇 개를 만들었는지 그 합을 구한다.4. 그 값이 m보다 크거나 같을 경우 답을 mid로 초기화하고 최솟값을 찾기 위해 r을 mid - 1로 바꾼다.5. 아닌 경우 l을 mid + 1로 바꾸어 계속 탐색한다.3. 코드import sysinput = sys.stdin.readlinen, m = map(int, input().split())time = li..

1. 문제 이 문제는 각 단어별 가격이 있고 단어를 조합해서 목표 단어를 만들되, 가격을 최소로 하는 문제이다.2. 풀이알파벳의 개수와 같은 길이의 배열을 만들어 그 원소를 하나씩 비교한다.1. word 배열 -> t에 주어진 단어에 들어가는 알파벳 개수 표시2. arr 배열 -> 전공책 각각 주어진 단어에 들어가는 알파벳 개수 표시3. 금액은 inf로 초기화하고 x 배열을 넣어서 word_making 함수 실행4-1. x 배열의 어떤 원소가 word 배열의 원소보다 작은 경우    -> 단어를 만들 수 없으므로 result를 False로 바꾸고 반복문 탈출4-2. x 배열의 모든 원소가 word 배열의 원소보다 큰 경우    -> 단어를 만들 수 있다는 뜻 -> price 갱신 후 return5. 4-..

1. 문제 이 문제는 데스 나이트라는 새로운 말이 이동할 수 있는 위치를 정의하여시작 칸에서 도착 칸으로 이동하는 최소 이동 횟수를 구하는 문제다.2. 풀이지난주에 풀었던 7562번 나이트의 이동 문제와 비슷하다.그 때는 bfs를 사용해서 문제를 해결했는데 다른 문제를 풀면서heapq의 빠른 속도를 체감하고 새로운 방법으로 문제를 풀었다. 먼저 나이트가 움직일 수 있는 위치를 dx, dy 배열 안에 넣어준다.move 함수를 만들어 방문 여부를 체크할 수 있는 배열과우선순위 큐 적용을 위한 (cnt, r, c) 튜플을 넣은 배열을 만들어준다.시작하는 위치의 방문여부를 True로 설정하고 다익스트라 알고리즘에 따라 코드를 짰다.만약 도착 지점에 갔다면 cnt를 리턴해준다.나이트가 갈 수 있는 모든 방향에 대..