본문 바로가기

전체 글72

[Web]간단한 랜덤 타이핑 페이지 HTML, CSS, Javascript를 이용한 간단한 랜덤 타이핑 페이지 제작 코드 설명 HTML language SUCODING | 100 Subscribe CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: darkslateblue; } .wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; } .material-icons { font-size: 10rem; } .lg-text { font-size: 2rem; font-weight: bold; margi.. 2023. 7. 19.
HTML_멀티미디어 태그 멀티미디어 태그 정리를 정리해보려 합니다. video Tag 비디오를 지원하지 않는 경우 표시할 내용 video Tag는 위의 코드와 같이 간단하게 비디오를 넣을 수 있습니다. poster : 비디오가 로딩되는 동안 표시할 사진 이미지이입니다. HTML5에서 지원하지 않는 코덱일 경우 비디오 태그 안에 넣은 내용이 표시됩니다. autoplay : 로딩된 후 자동 재생할 지 아닐지를 선택할 수 있습니다. controls : 소리조절, 일시 정지 등의 메뉴를 표시할 지 선택하는 속성입니다. loop : 무한 반복 재생할지를 설정합니다. muted : 음소거 기능을 합니다. audio Tag 오디오를 지원하지 않을 경우 표시할 내용 audio Tag는 위의 video Tag와 거의 비슷합니다. autoplay.. 2023. 7. 14.
HTML_공간, 시맨틱 태그 HTML중 공간에 대한 태그는 3종류는 Block, lnline, lnline-block 입니다. Block 태그는 한 줄을 통쨰로 차치하고, lnline tag와 lnline-block 태그는 내용물의 길이만큼 공간을 차지합니다. lnline tag는 높이와 너비를 정할 수 없고, 상하 padding과 margin을 줄 수 없습니다. Block 형식의 태그 중 대표적인 것으로 div가 있습니다, lnline은 span이 있습니다. span1span2span3divspan4 위의 코드를 실행시 아래와 같이 결과가 나옵니다. span1span2span3 div span4 시맨틱 태그 header, nav, main, section, article, aside, footer header : 페이지 소개나 제.. 2023. 7. 12.
HTML_링크, 이미지, 테이블, 리스트 태그 사용법 링크, 이미지, 테이블, 리스트 태그에 대하여 정리해 보려고 합니다. 링크 Tag a 태그는 클릭 시 다른 페이지로 이동시켜주는 태그입니다. 속성은 href와 target이 있는데 herf는 주소를 나타내고, target은 새창을 어디에 띄울건지를 나타냅니다. 링크 이미지 Tag 이미지는 이미지를 불러오는 태그입니다. 이미지는 안의 내용이 없기 떄문에 닫는 태그가 없습니다. 속성은 이미지의 경로를 불러오는 scr와 이미지의 경로가 잘못됬거나 파일이 꺠질 시 나오는 메세지를 입력하는 alt가 있습니다. 테이블 Tag 테이블은 표를 표시하는 태그입니다. 테이블은 셀 하나 하나가 다 태그이기 떄문에 간단한 테이블도 양이 좀 많습니다. caption: 테이블의 제목입력 thead: 첫 줄 tfoot: 마지막 줄.. 2023. 7. 10.
HTML_기본 구조와 태그 HTML의 기본 구조와 태그를 정리해 보려고 합니다. Hello Welcome to HTML world! 우선 위의 코드로 간단하게 한번 표현해 보았습니다. HTML은 태그(tag)로 이루어져있습니다. 태그에는 몇 가지 규칙이 존재합니다. 태그는 여는태그와 닫는태그로 이루어져 있습니다. 닫는 태그는 없는 경우도 존재합니다. 위의 코드의 태그들을 정리해 보았습니다. : HTML5을 사용함을 브라우저에 알려주는 코드입니다. : 전체 html 문서를 감싸는 태그입니다. 하나만 존재해야 하고 html 바깥에 DOCTYPE을 제외한 다른 태그가 존재하면 안됩니다. : html 문서에 대한 정보를 나타내는 부분입니다. 이또한 하나만 존재해야 하고 html바로 아래 존재 해야합니다. : html 문서에서 실제적으로 .. 2023. 7. 9.
프로그래머스 [Python] - 중앙값 구하기 문제 출저 https://school.programmers.co.kr/learn/courses/30/lessons/120811 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Code 1 2 3 4 def solution(array): array.sort(reverse = False) center_idx = len(array)//2 return array[center_idx] cs Code 풀이 1. solution함수에 매개변수 array를 입력받는다. 2. 입력받은 array에 .sort(reverse = False) 함수를 사용하여 오름차순으로 정리한.. 2023. 4. 13.
프로그래머스 [Python] - 머쓱이보다 키 큰 사람 문제 출저 https://school.programmers.co.kr/learn/courses/30/lessons/120585 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Code 1 2 3 4 def solution(array, height): array.append(height) array.sort(reverse = True) return array.index(height) cs Code 풀이 1. def solution 함수에 매개변수로 array, height를 입력받는다. 2. 입력받은 array에 .append 함수를 사용하여 입력받은 hei.. 2023. 4. 13.
백준 10872번 [Python] 팩토리얼 문제 0보다 크거나 같은 정수 N이 주어진다. 이때, N!을 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 정수 N(0 ≤ N ≤ 12)이 주어진다. 출력 첫째 줄에 N!을 출력한다. 10872번: 팩토리얼 (acmicpc.net) 10872번: 팩토리얼 0보다 크거나 같은 정수 N이 주어진다. 이때, N!을 출력하는 프로그램을 작성하시오. www.acmicpc.net Python3 코드 1 2 3 4 5 6 7 def fact(num): # fact라는 함수 선언후 num을 인자로 받음 if num == 0: # 인수로 받은 num이 0이면 1로 리턴 return 1 return num * fact(num-1) # num의 -1값을 0이될때까지 반복 n = int(input()) # n을 입력받고 p.. 2022. 4. 15.
백준 1712번 [Python] 손익분기점 문제 월드전자는 노트북을 제조하고 판매하는 회사이다. 노트북 판매 대수에 상관없이 매년 임대료, 재산세, 보험료, 급여 등 A만원의 고정 비용이 들며, 한 대의 노트북을 생산하는 데에는 재료비와 인건비 등 총 B만원의 가변 비용이 든다고 한다. 예를 들어 A=1,000, B=70이라고 하자. 이 경우 노트북을 한 대 생산하는 데는 총 1,070만원이 들며, 열 대 생산하는 데는 총 1,700만원이 든다. 노트북 가격이 C만원으로 책정되었다고 한다. 일반적으로 생산 대수를 늘려 가다 보면 어느 순간 총 수입(판매비용)이 총 비용(=고정비용+가변비용)보다 많아지게 된다. 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 지점을 손익분기점(BREAK-EVEN POINT)이라고 한다. A, B, C가 주어졌.. 2022. 4. 15.

티스토리툴바