풀스택챌린지

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.   - 1548다음과 같이, 점수를 입력 받아 학점을 출력하시오.90 점 이상 ~ 100점 이하 : A80 점 이상 ~ 90점 미만 : B70 점 이상 ~ 80점 미만 : C60 점 이상 ~ 70점 미만 : D60 점 미만 : F def grade(score): if score>=90 and score=80 and score=70 and score=60 and score- 1549정수를 입력 받아 절댓값을 출력하시오.def abs(number): if number>0: print(number) else: print(-number)number=int(input())abs(nu..

요즘 어떤 웹 서비스에 로그인을 할 때 "네이버 계정으로 로그인하기", "카카오 계정으로 로그인하기" 등을 쉽게 볼 수 있다. 또한 지도를 사용해야 하는 앱을 보면 구글맵, 카카오 맵 등을 사용하는 것을 확인할 수 있다. 이러한 기능들은 모두 API를 사용한 것인데 API가 무엇이고 어떻게 동작하는지 알아보자 API(Application Programming Interface)란? API는 세 개의 단어 Application, Promgramming, Interface의 약자이며 모두 들어본 단어일 것이다. 그 중 인터페이스는 연결방식이라고 할 수 있다. 우리가 모니터를 연결하려고 할 때에도 HDMI, DP, DVI 등을 사용할 수 있는데 모니터에서 제공하는 인터페이스 방식에 따라 케이블을 선정해야 한다..

HTML과 CSS를 공부하면서 유튜버 "드림코딩 엘리"의 유튜브 클론코딩 영상을 보면서 HTML, CSS에 익숙해지려고 했다. 최대한 많이 반복하는 것이 빨리 익숙해지기 위한 지름길이라고 생각했다. 이를 위해 반응형 헤더를 만들어보고 Youtube 클론코딩을 시작했다. 하지만 반응형 헤더와 달리 웹 페이지의 구조가 복잡했다. 마크업을 하면서 따라하기보다 구조를 파악하고 생각하면서 하는 것이 빨리 익숙해지기 위해 더 좋은 방법일 것 같아 클론 코딩한 Youtube 페이지의 레이아웃을 분석하려고 한다. 먼저 작성한 페이지는 다음과 같다. 먼저 크게 세 개의 부분으로 나눌 수 있다. header, video player가 들어있는 section1, 채널 정보와 동영상 정보가 들어있는 section2와 같이 나..

먼저 1476을 참고로 풀이방법을 간략하게 보자 1 3 6 9 2 5 8 11 4 7 10 12 위와 같이 출력이 되어야 하는데 각 자리에 값이 아닌 위치를 표기해보았다. 0, 0 0, 1 0, 2 0, 3 1, 0 1, 1 1, 2 1, 3 2, 0 2, 1 2, 2 2, 3 위의 표에서 규칙을 보면 y와 x의 좌표를 더하면 어느정도 규칙이 보이는 것을 알 수 있다. 이를 활용하여 풀어보자. - 1476 다음과 같은 n*m 배열 구조를 출력하기 입력이 3 4인 경우 다음과 같이 출력한다. 1 3 6 9 2 5 8 11 4 7 10 12 ''' 1 3 6 9 2 5 8 11 4 7 10 12 ''' n,m=map(int,input().split()) numbers=[[0 for _ in range(100..

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.  - 1468다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.1 2 36 5 47 8 9n=int(input())number=[[0 for _ in range(100)]for _ in range(100)]flag=Truecnt=1for y in range(n): if flag: for x in range(n): number[y][x]=cnt cnt+=1 flag=False else: for x in reversed(range(n)): number[y][x]=cnt ..

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.   - 1460다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.1 2 34 5 67 8 9n=int(input())num=1for y in range(n): for x in range(n): print(num,end=" ") num+=1 print()- 1461다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.3 2 16 5 49 8 7n=int(input())arr=[[0 for _ in range(n)] for _ in range(n)]num=1for y in range(n): for x in reversed(r..

저번 글에서 flex box에 대해 알아봤으며 이제 flex box로 지정했을 때 포함된 item들에게 적용시킬 수 있는 속성은 무엇이 있는지 알아보겠습니다. 아래 링크는 flex에 대한 기본을 다루고 있고 이 글을 이해하는데 도움이 되실 수 있습니다. kimmeh1.tistory.com/23 [CSS] flex 이해하기 CSS로 요소들의 위치를 잡을 때 flex를 많이 사용한다는 것을 느꼈습니다. 사실 CSS3 이전에는 flex가 없어서 원하는 대로 위치를 지정하는 것이 어려웠다고 한다. flex를 사용하면서 화면의 크기가 kimmeh1.tistory.com ▶ flex-direction flex로 지정된 container의 item들을 어떤 방향을 정렬시킬지 정하는 속성입니다. 기본적으로 flex로 ..

CSS로 요소들의 위치를 잡을 때 flex를 많이 사용한다는 것을 느꼈습니다. 사실 CSS3 이전에는 flex가 없어서 원하는 대로 위치를 지정하는 것이 어려웠다고 한다. flex를 사용하면서 화면의 크기가 달라져도 자동적으로 재 정렬되어 보입니다. 그렇다면 flex를 어떻게 사용하는지 살펴보겠습니다. flex는 아래와 같이 사용할 수 있습니다. div{ display:flex; } section 태그 안에 div로 box 3개를 출력해보겠습니다. 다음 그림과 같이 기본적으로 block 타입이기 때문에 한 줄에 하나의 box가 출력됩니다. 이제 section 태그의 display를 flex로 변경해보겠습니다. 한 줄에 box 3개가 모두 출력되었습니다. 이러한 결과가 나타난 이유를 자세히 살펴보겠습니다...

시맨틱(Semantic) 태그는 의미가 있는 태그란 뜻입니다. HTML 태그를 통해 웹 문서를 작성할 때 좀 더 의미 있는 태그를 사용함으로써 정확하게 정보를 전달하고 웹 문서의 구조를 쉽게 파악할 수 있도록 합니다. 또한, 검색 엔진은 웹 사이트의 HTML 태그들을 분석하여 사용자가 원하는 정보를 노출시키기 때문에 시맨틱 마크업은 중요합니다. 그렇다면 시맨틱 태그는 어떤 것이 있는지 알아보겠습니다. 아래 그림은 시맨틱 태그를 활용하여 웹 문서의 레이아웃을 잡은 것입니다. 각 태그가 어떤 의미를 갖고있는지 살펴보겠습니다. ▶ : 보통 웹 문서의 소개 및 탐색을 위해 사용됩니다. 제목, 로고, 검색, 내비게이션 등을 포함시킬 수 있습니다. ▶ : 현재 페이지에서 다른 페이지의 탐색을 돕는 내비게이션 역할을..

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다. - 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. - 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. - 테두리(border) : 내용과 패딩 주변을 감싸는 테두리입니다. - 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 위 그림과 설명은 TCP School에서 가져온 것이다. 왜냐하면 개인적으로 가장 이해가 잘되는 그림이었습니다..