배꼽파지 않도록 잘 개발해요

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 이미지 src : 파일 주소 alt : 이미지 이름 (이미지 안 보일 때 설명이 나옴) 비디오 autoplay : 자동재생 (일부 브라우저에서는 꼭 써줘야 함) muted : 음소거 controls : 컨트롤바 (하단 재생, 소리, 화면 버튼) 이미지 태그 사이에 공백이 생기는 이유 이미지와 비디오 태그 사이에 공백이 생기는 이유는 HTML에서 인라인 요소(inline element)가 공백을 처리하는 방식 때문이다. 연달아 나오는 인라인 요소 사이에는 브라우저가 공백을 처리하고 그에 따라 렌더링한다. 이미지 태그를 연달아 쓰면된다. 닫는 괄호만 밑으로 이어 붙이면 해결됨. 오디오 iframe iframe = 인라인 프레임 ·..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 기본 구조 화면에 보이는 내용이 들어가는 부분 들여쓰기는 내용과 무관함. · 주석 : · 기능 : 메모 남기기 · 단축키 : ctrl + / HTML 삽입 미리보기할 수 없는 소스 라이브 프리뷰 설치하는 이유 : · 서버를 통해서 접속했을 때랑 링크 동작에 차이가 있기 때문임. · 실제 서버 환경과 비슷하게 만들어놓고 링크 동작 살펴보기 http://127.0.0.1:3000/index.html · 라이브 프리뷰가 서버를 실행해서 내 컴퓨터에서 쓰는 주소로 접속할 수 있게 함. 현재 브라우저가 있는 폴더는 최상위 (/) → movie라는 폴더 안에 있는 index.html 파일을 보여줌. index.html 파일은 폴..

HTML 문서를 작성하다 보면 코드나 텍스트 서식을 그대로 유지하고 싶을 때가 있다. 이때 태그와 태그가 유용하게 활용된다. 이 두 가지를 통해 태그와 태그의 쓰임새 인라인 태그와 블록 태그의 차이점 HTML에서의 이스케이프 문자 를 파악할 수 있다. 태그와 태그의 쓰임새 태그 태그는 'preformatted text'의 약자로, 텍스트의 공백과 줄바꿈을 그대로 유지한다. 이는 주로 코드 블록이나 서식이 중요한 텍스트를 표현할 때 사용된다. 이 공백과 줄 바꿈이 그대로 유지됩니다. 태그 텍스트 내에서 코드 조각이나 프로그래밍 언어의 키워드를 표시할 때 사용된다. 이는 주로 문서에서 코드 부분을 강조하거나 특정 용어를 강조하는 데에 활용된다. 이 함수의 파라미터는 a와 b이다. 인라인 태그와 블록 태그의 ..

점의 위치 구하기 문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를 매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. 제한사항 dot의 길이 = 2 dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다. -500 ≤ dot의 원소..

개미 군단 문제 설명 개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소한의 병력을 구성하려면 몇 마리의 개미가 필요한지를 return하도록 solution 함수를 완성해주세요. 제한사항 hp는 자연수입니다. 0 ≤ hp ≤ 1000 입출력 예 hp result 23 5 24 6 999 201 풀이 1 직접..

배열 자르기 문제 설명 정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번 째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항 2 ≤ numbers의 길이 ≤ 30 0 ≤ numbers의 원소 ≤ 1,000 0 ≤num1 < num2 < numbers의 길이 입출력 예 numbers num1 num2 result [1, 2, 3, 4, 5] 1 3 [2, 3, 4] [1, 3, 5] 1 2 [3, 5] 풀이 1 주어진 범위에 해당하는 원소들을 for 반복문으로 추출해서 새로운 배열에 추가 function solution(numbers, num1, num2) { var answer = ..

특정 문자 제거하기 문제 설명 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. 입출력 예 my_string letter result "abcdef" "f" "abcde" "BCBdbe" "B" "Cdbe" 풀이 1 반복문으로 제외할 글자를 제외하고 출력하도록 함 function solution(my_string, letter) { var answer = ''; // my_string에서..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 블록과 인라인 display: block display: inline display: inline-block display: none /*css로 html태그를 감출 때*/ 블록 (block) 인라인 (inline) 위에서부터 아래로 차례대로 배치됨 평소에 글쓰는 방향 화면에 꽉 차면 다음 줄로 넘어감 너비와 높이를 지정할 수 있다 너비나 높이를 지정할 수 없음 (예외적으로 같은 건 가능) 크기를 지정할 수 있음 크기를 지정할 수 없음 margin 과 padding 어떤 방향이든 모두 가능 여백은 가로로(글 쓰는 방향)만 가능 인라인 블록 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성 · C..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 관심사의 분리 (Separation of concerns) HTML코드와 CSS를 분리하여 작성함. HTML 우도 한라산 국립공원 성산 일출봉 CSS h3 { color: #f56513; // color는 속성, #f56513는 속성값 } CSS 규칙 · 선택자(h3), 선언(color: #f56513;) · 위 예시에서는 h3과 중괄호로 감싼 코드 아이디 · 아이디 이름은 중복해서 쓸 수 없음. · id 선택자로는 요소 하나만 선택 가능함. HTML 한라산 국립공원 CSS #hallasan { color: #f56513; } 클래스 · 여러 개를 한번에 스타일링을 하고 싶을 때 사용 · 아이디와 클래스 선택자 중 어떤 걸 써..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 문장과 표현식 문장(statement) · 작업을 수행하도록 명령하는 것 · 일련의 동작이나 명령들 let x = 10; // 변수 선언문 if (x > 5) { // 조건문 console.log('x는 5보다 큽니다.'); // 함수 호출문 } 표현식(Expression) · 값으로 평가될 수 있는 코드 조각들 · 변수, 상수, 연산자, 함수 호출 등 포함 let y = 20; // 변수 선언문 let z = x + y; // 연산 표현식 문장이면서 표현식 · 할당식, 함수 호출 // 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식 title = 'JavaScript'; // 함수 호출은 함수를..