코딩공부

section 태그 html5에서 새롭게 시맨틱한 마크업을 위해 추가 된 태그 중 주제별 영역들을 그룹화하는용도로 사용합니다. 섹션 관련 태그(Section Related Tag) 태그 설명 문서의 주요 콘텐츠 영역 설정 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성 주제별 그룹의 콘텐츠 섹션을 설정 주로 제목 요소(h1~h6)를 자식 요소로 포함하고 있음 문서의 완전히 독립적인 컨텐츠 섹션을 설정 포럼(forum) 포스트, 블로그 포스트, 보도 기사, 논평(comment) 등 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정 (사이드 메뉴나 광고) 텍스트, 인라인 요소, 블록 레벨 요소 포함 가능 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정 (제목이나 내비게이션, ..

텍스트와 관련된 모든 것

시멘틱 마크업 시멘틱(Semantic)의 사전적인 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 실제로 마크업 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다. 시멘틱 마크업의 장점 태그의 의미가 명확해 재사용과 가독성이 좋다. 검색 엔진이 시멘틱 태그를 더 중요한 키워드로 간주하여 검색엔진 최적화에 유리하다. 웹 접근성 측면에서, 시각장애가 있는 사용자가 의미파악을 더 잘 할 수 있게 해준다. 시멘틱 마크업에서 주로 사용하는 태그들 이 요소는 웹페이지 일부분의 머리글을 정의(타이틀, 로고) 전체 페이지에서는 요소나 요소를 사용한다. 사이트 내 링크를 모아둔 내비게..

블록 레벨 요소(Block-level Elements) 마크업을 할 때 줄이 바뀌고 세로로 정렬됨 항상 새로운 라인으로 시작되며 라인의 모든 너비를 차지함 하나의 독립적인 박스형태라고 생각하는 것이 이해하기 쉬움 블록레벨요소 중 블록레벨 요소를 자식요소로 포함 할 수 있는 태그와 없는 태그가 있음 텍스트와 인라인 요소를 자식 요소로 포함할 수 있음 태그 설명 ~ HTML문서에서 제목을 정의할 때 사용하는 태그 블록 레벨 요소를 자식요소로 포함할 수 없음 단락을 정의하는 태그 블록 레벨 요소를 자식요소로 포함할 수 없음 문서의 소유자나 연락처 정보를 정의할 때 사용하는 태그 일부 블록 레벨 요소들을 자식요소로 포함 할 수 없음 *에 포함 될 수 없는 요소 : ~, , , , ,, 인라인 요소(Inline ..

문자 관련 스타일은 font-family, font-size, font-weight, font-style, font-variant, line-height, font, 웹폰트, color, letter-spacing, word-spacing, text-decoration,text-transform, text-shadow의 속성이 있습니다. 먼저, font family부터 알아보겠습니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감쌉니다. 여러 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size..

gird를 왜 사용하는가? 전 글에서 flex와 마찬가지로 앞으로 활용도가 높아질 것을 대비해 간단히 사용법을 알려드리려고 합니다. grid layout 비교적 지관적이여서 다른 레이아웃보다 사전지식이 덜 필요합니다. 행과 열의 크기, 셀 간격, 정렬 등을 원하는 대로 설정할 수 있습니다. 미디어 쿼리를 사용하여 화면 크기에 따라 그리드의 구성을 다르게 설정 하여 반응형 레이아웃을 쉽게 구현할 수 있습니다. 그리드를 사용하면 HTML 요소의 구조를 더욱 간결하게 표현할 수 있습니다. 다음은 그리드 사용 예시를 들어보겠습니다. 예시 만약 다음과 같은 레이아웃형태를 만든다고 하면 저는 바디 부분을 이렇게 만들었습니다. grid를 사용하기 때문에 div요소를 줄여쓸 수 있습니다. #header { grid-a..

왜 flex를 사용하는가? 전에 레이아웃 구성할 때 float을 알려드렸는데, 앞으로는 브라우저 이슈들이 개선되어 가까운 미래에 flexbox 방식을 즐겨 쓰는 날이 올 것 입니다. 아직은 최신 브라우저들에서만 실행되지만 곧 일어날 변화들을 위해 flex 방식을 알아보겠습니다. flex layout 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것을 말합니다. flex를 선언은 아래와 같습니다. dispaly: flex; flex-direction 자식요소를 나열하는 뱡향을 지정하는 속성입니다. 부모요소에게 지정합니다. 속성 값 속성 설명 column 위에서 아래로 나열 column-reverse 아래에서 위로 나열 row(기본..

type선택자 CSS Type Selector는 HTML 요소의 태그 이름을 사용하여 스타일을 적용하는 선택자입니다. 예를 들어, 모든 p 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다. p { color: blue; } 위의 예제에서 "p"는 선택자이며, 이 선택자는 모든 "p" 요소를 선택합니다. Type Selector는 다른 선택자와 함께 사용하여 더 정확한 선택을 할 수 있습니다. 예를 들어, 클래스 선택자와 Type Selector를 결합하여 클래스가 "my-class"이고 태그 이름이 "p"인 요소를 선택하려면 다음과 같이 작성할 수 있습니다. p.my-class { color: red; } id 선택자 (ID Selector) id 선택자는 HTML 요소의 id 속성을 사용하여..

float을 왜 활용하는가? 블록요소는 원래 세로로만 나열되지만 float을 사용하면 가로로 배치 할 수 있습니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다. float 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게하는 속성입니다. float 한 박스에 가로 사이즈를 지정해주어야 크로스브라우징됩니다. 인라인 요소들은 가로사이즈 없이 float 해도 레이아웃이 흐트러지지 않습니다. float을 취소할 때에는 float: none;을 합니다. float: left; 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 합니다. 예시 이미지를 보시면 아래로 나열되어야 할 콘텐츠를 우측 옆에서 흐르도록 배치해 줍니다. float: right; 요소를 오른쪽에..

선택자(selector) 먼저,선택자란? CSS의 UI로 표현할 대상이 되는 부분을 말합니다. CSS 속성부여 형식은 다음과 같습니다. h1 { color : red; background : yellow;} 선택자 {속성:속성값; 속성:속성값;} 선택자의 종류는 type 선택자, id 선택자, class 선택자 등이 있습니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 땐 중복하지 말고 유일한 이름을 부여해야 합니다. CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 다음 예제에서 id가 txt인 p요소는 스타일이 지정되지 않았으므로 지정된 ctxt만 파란색으로 표시됩니다. See the Pen..

CSS 표현방법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 내부 스타일시트 간단한 스타일은 내부 스타일 시트만으로도 사용할 수 도 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용됩니다. css HTML 문서 안에 태그를 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태 입니다. 우리를 기쁘게 하는 것들. 외부 스타일시트 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 우리를 기..

스크롤을 하면 가로로 넘어가는 효과입니다. HTML Javascript Parallax Effect09 패럴랙스 이펙트 : 가로 세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px CSS 중간에 가로로 넘어가는 영역에 색을 변경해주고 가로 영역을 제외하고 각각 z index 값을 주었습니다. z-index값을 넣지 않으면 가로 영역이 먼저 보여집니다. SCRIPT 외부 라이브러리인 GSAP(GreenSock Animation Platform)를 가져오기 위한 `` 태그를 사용하여 CDN 링크를 추가합니다. `section4` 변수를 사용하여 효과를 적용할 요소의 오프셋 탑(top) 위치를 가져옵니다. 이는 `id`가..

HTML JavaScript Parallax Effect05 페럴렉스 이펙트 : 이질감 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오른다. 06 section6 성공의 비밀은 한 가지 비밀이 ..

HTML JavaScript Parallax Effect04 페럴렉스 이펙트 : 나타나기 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오른다. 06 section6 성공의 비밀은 한 가지 비밀이 아니..

오늘은 숨김메뉴와 탑 버튼을 나타내는 패럴럭스 이펙트를 하였습니다. 스크롤을 내리면 메뉴가 사라지고 올리면 메뉴가 나옵니다. 그리고 맨 밑으로 내리면 탑 버튼이 나옵니다. 추가된 css .parallax__nav { top: -100px; transition: all 0.6s; } .parallax__nav.show { top: 10px; } HTML JavaScript Parallax Effect03 페럴렉스 이펙트 : 숨김메뉴/ 탑 버튼 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까..

이번엔 닷 메뉴로 이동할 수 있는 패럴럭스 이펙트 입니다. HTML JavaScript Parallax Effect02 페럴렉스 이펙트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오..

리스트 버튼을 클릭하면 뮤직 리스트가 나오고 노래를 선택하면 해당 곡이 나옵니다. 뮤직 리스트 / 리스트 닫기버튼 //뮤직 리스트 버튼 musicListBtn.addEventListener("click", () => { musicList.classList.add("show"); }); //뮤직 리스트 닫기 버튼 musicListClose.addEventListener("click", () => { musicList.classList.remove("show"); }); 뮤직 리스트 버튼을 클릭하면 addEventListener를 통해 show 클래스를 추가하여 화면에 나타나게 하고 닫기를 누르면 show 클래스를 삭제하여 뮤직 리스트가 화면에서 사라지게 합니다. 뮤직 리스트 구현/ 리스트 음악 시간 불러오..

음악 플레이 재생 버튼을 누르면 음악이 재생되고 한번 더 누르면 음악이 멈춥니다. 이전 버튼을 누르면 이전 곡이 재생되고 다음 버튼을 누르면 다음 곡이 재생됩니다. 그리고 듣고 싶은 부분을 바에서 클릭하면 해당 부분부터 음악이 재생됩니다. music.js const allMusic = [ { name : "1.음악제목", artist : "아티스트", img: "music_view01", audio : "music_audio01" }, { name : "2.음악제목", artist : "아티스트", img: "music_view02", audio : "music_audio02" }, { name : "3.음악제목", artist : "아티스트", img: "music_view03", audio : "mu..

HTML 👾CYBER GAME WORLD👾 2023년 4월 24일 09시 30분 29초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 윈도우를 사용하고 있으며, 화면 크기는 1920 X 760입니다. 각 요소들이 들어갈 영역을 만들고 들어갈 텍스트와 이미지를 넣어주었습니다. css reset.css @import url('https://webfontworld.github.io/uto123RF/Uto123RF.css'); /* reset */ * { margin: 0; padding: 0; color: #fff; font-family: "Uto123RF"; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; col..

오늘은 문자열객체에 대해 알아보겠습니다 string.prototype.at( ) "문자열".at(위치값) 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 음의 정수는 문자열의 마지막부터 셉니다. 위치값에 위치 해있는 문자열이 없으면 'undefined'가 출력됩니다. { "javascript reference".at(0); // j "javascript reference".at(1); // a "javascript reference".at(2); // v "javascript reference".at(11); // r "javascript reference".at(20); // undefined "javascript reference".at(-1); // e "java..

오늘은 페럴랙스를 이용한 웹페이지를 만들어보았습니다. 스크롤 하시면 각 효과들이 나옵니다! html I solemnly swear that I'm up to no good Revelio! Mischief managed scrollTop값을 구할 영역을 만들어주고 값은 아래 스크립트를 통해 구했습니다. 그리고 section 2개를 만들어 각각의 이미지의 영역을 만들어 주었습니다. 그리고 각 스크롤 값이 변할때 마다 이미지들의 효과나 투명도, 크기를 설정해주었습니다. script https://cdnjs.com/libraries/skrollr에서 cnd링크를 가져온 후 안에 이벤트 리스너를 사용해 스크롤 할 때 scrollTop 값을 구하고 parseInt로 정수로 만들어 innerText로 화면에 나타내줍..

parallax effect란? 시차(관측 위치에 따른 물체의 위치나 방향의 차이)를 이용한 효과라는 뜻으로, parallax는 시차라는 뜻이며 천문학에서 사용하는 용어입니다. 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미합니다. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다. 시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것이므로 위와 같이 스크롤의 top값과 각 섹션의 값을 나타내는 효과를 만들어 보았습니다. HTML JavaScript Parallax Effect01 페럴렉스 이펙트 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다..

오늘은 전에 명언이 10초에 한번씩 바뀌는 것에서 추가로 뒷 배경 이미지도 10초에 한번씩 바뀌는 것으로 만들어 보았습니다. HTML HTML은 전과 동일합니다. css @import url('https://webfontworld.github.io/gonggames/EsaManru.css'); @import url('https://webfontworld.github.io/sebang/SebangGothic.css'); body { background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; box-sizing: cover;..

Q2. 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋(set)을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요. HTML 로또 번호 생성기 번호 뽑기 제목과 버튼 그리고 결과를 나타낼 영역을 만들어 주었습니다. CSS 폰트를 import 방식으로 불러왔고 배경색, 버튼색 버튼 모양등을 원하는 대로 설정해주었습니다. script const luckyNumber 객체는 생성될 숫자의 개수(numberDigit)와 최대 숫자(maxNumber)를 저장하고 있습니다. button.addEventListen..

Q1 JSON 형식으로 저장된 데이터를 불러와 구조를 살펴보고 #result 영역에 명언 내용과 말한사람 표시하세요. 이때 명언 내용은 #result 영역에 있는 .quote영역에, 말한 사람은 .author영역에 표시하세요. 10초에 한 번씩 명언이 바뀌게 하세요. HTML 문제에 따라서 result 영역 안에 명언이 들어갈 quote 영역, 작가가 들어갈 author 영역을 만들어주었습니다. CSS @import url('https://webfontworld.github.io/gonggames/EsaManru.css'); @import url('https://webfontworld.github.io/sebang/SebangGothic.css'); body { display: flex; justify-..

HTML JavaScript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next 1346zany@gmail.com style script 이미지 설정 let images = [ "img/sliderEffect01-min.jpg", "img/sliderEffect02-min.jpg", "img/sliderEffect03-min.jpg", "img/sliderEffect04-min.jpg", "img/sliderEffect05-min.jpg" ]; 이번엔 main이 아니라 스크립트에 배열을 만들어 이미지를 넣어주었습니다. 선택자 function imageSlider(parent, images){ let currentIndex = 0; /..

둘만의 암호 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위..

카드 뭉치 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한..

대충 만든 자판 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다. 같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 있으며, 특정 키를 눌렀을 때 입력되는 문자들도 무작위로 배열되어 있습니다. 또, 같은 문자가 자판 전체에 여러 번 할당된 경우도 있고, 키 하나에 같은 문자가 여러 번 할당된 경우도 있..

덧칠하기 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다. 넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 다시 칠해야 할 구역들을 정했습니다. 벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같습니다. 롤러가 벽에서..

바탕화면 정리 코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다. 컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 ..

공원 산책 지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다. ["방향 거리", "방향 거리" … ] 예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다. 주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다. 주어진 방향으로 이동 중 장애물을 만나는지 확인합니다. 위 두 가지중 어느 하나라도 해당된다면, 로봇 강아지는 해당 명령을 무시하고 다음 명령을 수행합니다. 공원의 가로 길이가 W, 세로 길이가 H라고 할 때, 공원의 좌측 상단의 좌..

추억 점수 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

코딩테스트 Lv.1 달리기 경주 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주..

문제1 문자열 밀기 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 A.length) { return -1; } } return count; } 문자열 A와 B의 길이가 다르면 문자열 A를 밀어서 문자열 B를 만들 수 없으므로 -1을 반환합니다. 문자열 A의 길이와 B의 길이가 같으면 문자열 A를 오른쪽으로 한 칸씩 밀면서 B와 일치하는지 확인합니다. A를 오른쪽으로 한 칸씩 밀 때마..

문제1 치킨쿠폰 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 제한사항 chicken은 정수입니다. 0 ≤ chicken ≤ 1,000,000 입출력 예 chicken result 100 11 1,081 120 function solution(chicken) { let coupon = 0; let serviceChicken = 0; coupon += chicken; while (coupon >= 10) { const order =..

문제1 특이한 정렬 정수 n을 기준으로 n과 가까운 수부터 정렬하려고 합니다. 이때 n으로부터의 거리가 같다면 더 큰 수를 앞에 오도록 배치합니다. 정수가 담긴 배열 numlist와 정수 n이 주어질 때 numlist의 원소를 n으로부터 가까운 순서대로 정렬한 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10,000 1 ≤ numlist의 원소 ≤ 10,000 1 ≤ numlist의 길이 ≤ 100 numlist는 중복된 원소를 갖지 않습니다. 입출력 예 numlist n result [1, 2, 3, 4, 5, 6] 4 [4, 5, 3, 6, 2, 1] [10000,20,36,47,40,6,10,7000] 30 [36, 40, 20, 47, 10, 6, 7000..

문제1 저주의 숫자3 3x 마을 사람들은 3을 저주의 숫자라고 생각하기 때문에 3의 배수와 숫자 3을 사용하지 않습니다. 3x 마을 사람들의 숫자는 다음과 같습니다. 10진법 3x 마을에서 쓰는 숫자 10진법 3x 마을에서 쓰는 숫자 1 1 6 8 2 2 7 10 3 4 8 11 4 5 9 14 5 7 10 16 정수 n이 매개변수로 주어질 때, n을 3x 마을에서 사용하는 숫자로 바꿔 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 입출력 예 n result 15 25 40 76 function solution(n) { let result = 0; let count = 0; while (true) { result++; if (result % 3 === 0 || re..

문제1 숨어있는 숫자의 덧셈(2) 문자열 my_string이 매개변수로 주어집니다. my_string은 소문자, 대문자, 자연수로만 구성되어있습니다. my_string안의 자연수들의 합을 return하도록 solution 함수를 완성해주세요 제한사항 1 ≤ my_string의 길이 ≤ 1,000 1 ≤ my_string 안의 자연수 ≤ 1000 연속된 수는 하나의 숫자로 간주합니다. 000123과 같이 0이 선행하는 경우는 없습니다. 문자열에 자연수가 없는 경우 0을 return 해주세요. 입출력 예 my_string result "aAb1B2cC34oOp" 37 "1a2b3c4d123Z" 133 function solution(my_string) { let answer = 0; let currentNu..

문제1 직사각형 넓이 구하기 2차원 좌표 평면에 변이 축과 평행한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 solution 함수를 완성해보세요. 제한사항 dots의 길이 = 4 dots의 원소의 길이 = 2 -256 -boardYSize) { y--; } } return [x,y]; } x와 y 변수를 0으로 초기화하고, board의 가로 크기와 세로 크기를 반으로 나눈 값을 boardXSize와 boardYSize 변수에 저장합니다 keyinput 배열을 순회하면서 각 방향키에 따라 캐릭터의 좌표를 업데이트합니다. 만약 item이 "le..

문제1 7의 개수 머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요. 제한사항 1 ≤ array의 길이 ≤ 100 0 ≤ array의 원소 ≤ 100,000 입출력 예 array result [7, 77, 17] 4 [10, 29] 0 function solution(array) { let answer = 0; for (let i = 0; i < array.length; i++) { let num = array[i].toString(); // 정수를 문자열로 변환하여 확인 for (var j = 0; j < num.length; j++) { if (num[j] === '7') { // ..

See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.

See the Pen Untitled by dkdlelw (@dkdlelw) on CodePen.

See the Pen Tail Animation by dkdlelw (@dkdlelw) on CodePen.

오늘은 위와 같이 피그마로 만들 사이트 시안을 다른 사이트를 참고하여 만들어 보았습니다. 다음과 같은 사이트들을 참고하였습니다 에잇템 : https://www.atemshop.com/index.html 바르닭 : https://barudak.co.kr/ 랭킹닭컴 :https://www.rankingdak.com/ 허닭 : http://www.heodak.com/index.html 아임닭 : https://www.imdak.com/ 국민상점 : https://www.imdak.com/ 미트리 : https://metree.co.kr/index/ 맛있닭 :https://masitdak.com/ 하림몰 : https://www.harimmall.com/ 닭가슴살 쇼핑몰 : https://daksal.uriwe..

오늘은 이미지유형, 이미지/텍스트 유형, 카드 유형, 배너 유형, 텍스트 유형, 푸터 유형을 모두 하나로 합쳐 위와 같은 웹페이지를 만들어보겠습니다. HTML 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 메인 슬라이드 영역 event 냥집사들의 커뮤니티 Catt 고양이 케어, 고양이 목욕,고양이 산책. 고양이 패션, 집사 커뮤니티 고양이와 관련된 모든 정보를 공유합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 반려묘를 키우는 방법 반려묘를 키우려면 돈도 많고 열정과 노력과 부모가 시간도 많아야 합니다...

오늘은 웹 페이지의 제일 하단 부분인 푸터(footer)유형을 만드는 법을 소개해보겠습니다. 위의 예제와 같이 생긴 페이지를 만들겠습니다. 전체구조 푸터 반려묘 사이트 소개하기 반려묘 이야기 유기묘 도움주기 분양받기 반려묘 훈련하기 기본훈련 배변훈련하기 인내심 훈련하기 스크래칭 훈련하기 반려묘 노하우 산책하는 법 목욕 시키는 법 츄르 종류 캣타워 종류 반려묘 주의점 병원가기 접종 시기 주의점 홍역주의 동사무소 신고 반려묘 자랑하기 소개하기 반려묘 이야기 유기묘 도움주기 사진 만들기 이용정보 개인정보 반려묘 정보 유기묘 신고하기 반려묘 접종하기 2023 이승연 반려묘 사이트 Porfolio is Power All Right Reserved 만드는 방법 풀이 body 푸터 반려묘 사이트 소개하기 반려묘 이야..

텍스트 유형 레이아웃 웹 페이지 만들기 수업 시간에 위와 같은 텍스트 유형 레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. notice 반려묘 키울때 주의할점 건강 검진 고양이는 매우 활발한 동물로서 외부세균과 바이러스에 노출될 가능성이 높습니다.새로운 고양이를 입양하면 즉시 수의사에게 건강 검진을 받게 해야 합니다. 더보기 충분한 사랑과 관심 고양이는 충분한 사랑과 관심이 필요합니다. 주인의 사랑과 관심이 고양이의 건강과 행복에 큰 영향을 미칩니다. 따라서 일정한 시간을 투여하여 관심과 사랑을 나눠주어야 합니다.. 더보기 적절한 먹이 제공 고양이는 적절한 먹이를 제공해야 합니다. 고양이의 나이, 체중, 건강 상태 등을 고려해 알맞은 양의 먹이를 제공하고, 식습관도 지속적으로 관찰하며 필요에 따라 조정..

수업 시간에 위와 같은 카드유형레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 슬라이드 유형은 보시다시피 사진과 문자를 슬라이드 형식으로 넘길 수 있는 구조로 되어있는 유형입니다. 메인 슬라이드 영역 event 냥집사들의 커뮤니티 Catt 고양이 케어, 고양이 목욕,고양이 산책. 고양이 패션, 집사 커뮤니티 고양이와 관련된 모든 정보를 공유합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 만드는 방법 풀이 body 메인 슬라이드 영역 event 냥집사들의 커뮤니티 Catt 고양이 케어, 고양이 목욕,고양이 산책. 고양이 패션, 집사 커뮤니티 고양이와 관련된 모든 정보를 공유합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미..

위의 예시처럼 텍스트의 영역과 이미지의 영역 있는 유형이 이미지 텍스트 유형입니다. 오늘은 예시처럼 이미지 텍스트 유형을 만들어 보려고 합니다. notice 300종 이상의 반려묘 세상에는 다양한 종류의 고양이가 있습니다. 일부 인기 있는 반려묘 종류는 다음과 같습니다. 스코티쉬 폴드 (Scottish Fold) 샴 고양이 (Siamese) 브리티쉬 숏헤어 (British Shorthair) 먼치킨 (Munchkin) 사바나 (Savannah) 페르시안 (Persian) 스노우슈 (Snowshoe) 스픽스 (Sphynx) 러시안 블루 (Russian Blue) 아메리칸 숏헤어 (American Shorthair) 만드는 방법 풀이 body notice 300종 이상의 반려묘 세상에는 다양한 종류의 고양이..

수업 시간에 위와 같은 이미지유형 레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 반려묘를 키우는 방법 반려묘를 키우려면 돈도 많고 열정과 노력과 부모가 시간도 많아야 합니다. 고양이키우기 고양이에게는 균형 잡힌 식사와 깨끗한 물이 필요합니다 물을 항상 제공하고, 그릇을 깨끗하게 유지해야 합니다. 자세히 보기 사료가 중요 고양이에게는 균형 잡힌 식사와 깨끗한 물이 필요합니다 물을 항상 제공하고, 그릇을 깨끗하게 유지해야 합니다. 자세히 보기 만드는 방법 풀이 먼저 설정해주고 싶은 font를 설정해줍니다. 저는 넥슨고딕Lv1을 사용했습니다. body 부분에 section 태그를 만들어주고 class를 이미지 유형 전체를 감싸주니 image__wrap으로 설정해줍니다. nexon은 나중에 글씨를 설정해줄 ..

카드 유형 레이아웃 웹 페이지 만들기 수업 시간에 위와 같은 카드유형레이아웃을 똑같이 웹 페이지로 구현해 보았습니다. 반려묘를 키울때 팁 고양이를 키우기 전에 충분한 연구를 하십시오. 고양이의 종류, 건강 문제, 올바른 사료와 함께 건강한 식습관 등을 이해하는 것이 중요합니다. 입양하기 고양이를 입양하기 전에 보호소나 유기동물 구조 기관을 방문하여 입양할 고양이를 선택하세요. 건강한 고양이를 선택하고 그들의 성격과 운동 수준과 맞는지를 확인하십시오. 자세히 보기 장비 갖추기 고양이의 행복과 건강을 위해 장비가 필요합니다. 고양이가 필요로 하는 모든 장비를 준비하세요. 고양이용 화장실, 사료 그릇, 물 그릇, 침대, 장난감 등이 필요합니다.. 자세히 보기 예방접종 고양이도 예방접종을 받아야 합니다. 고양이..

오늘 css부분을 하면서 기억이 잘 안나기도 하고 헷갈리고 이해하지 못한 부분도 있는거 같아 정리를 해보려고 합니다. 제가 이해가 부족한 display의 속성과 position의 속성에 대한 정리를 해보았습니다. display란? 요소를 어떻게 표시할 지 결정해주는 속성입니다. 주로 block, inline, inline-block을 사용합니다. block 지정이 되면 전 후 줄바꿈이 들어가 다른 요소들을 밀어내고 한 줄을 차지합니다. 대표적인 block 요소는 ,,~ 등이 있습니다. 기본적으로 대부분 요소에 들어가있는 속성이라고 이해하면 쉽습니다. inline 지정이 되면 한 줄에 다른 요소들과 나란히 배치됩니다. 대표적인 inline요소는 ,, 등이 있습니다. width값과 height값을 지정하지 ..

01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 정답 ICMP, IP 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답을 기다린다. 정답 PING 03. 다음이 설명하는 용어를 작성하시오. Window 10의 pro 버전에서 지원하는 기능으로 128bit 키의 CBC 모드에서 AES 암호화 알고리즘을 이용하여 이동식 디스크와 시스템 드라이브 암호화를 지원한다. 정답 비트로커 04. 다음 보기에서 화이트 박스 테스트가 ..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 정답 190 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 정답 50,10 03. 다음의 결괏값을 작성하시오. { function func..

정보처리 기능사 기출 문제를 자바스크립트로 변환한 문제들 입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 정답 129 오답노트 i = 1일 때, i % 3 == 1이므로 sum = 0 + 1 = 1 i = 2일 때, i % 3 == 2이므로 sum = 1 * 2 = 2 i = 3일 때, i % 3 == 0이므로 sum = 2 - 3 = -1 i = 4일 때, i % 3 == 1이므로 sum = -1 + 4 = 3 i = 5일 때, i % 3 == ..

MY SQL 01. SQL문의 빈칸을 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 정답 IS NOT NULL 02. SQL문의 빈칸을 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 정답 GRANT TO 03. SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터..

2016년 1회 웹디자인 기능사 오답노트 1. 디자인 원리 중 리듬(rhythm)의 요소와 거리가 먼 것은? ❶ 대칭 ② 점증 ③ 반복 ④ 강조 오답노트 디자인의 원리에는 통일, 강조, 균형, 비례, 반복, 변화, 조화, 대비, 리듬(율동)이 있으며 리듬은 유사한 형들이 일정한 규칙과 질서를 유지할 때 나타나는 현상을 말한다. 리듬의 요소에는 반복 : 강약의 요소가 규칙적으로 반복되며 생기는 반복감 점증 : 형체가 점점 커지거나 작아지는것 운동감 : 색과 함께 형태의 배치나 변화에 의해 연관지어져 동적인 방향감을 느끼게되는 것 세가지가 있다. 2. 시각적 균형과 가장 거리가 먼 것은? ① 명암에 의한 균형 ❷ 경험에 의한 균형 ③ 질감에 의한 균형 ④ 위치에 의한 균형 3. 미적 대상을 구상하는 부분과 ..

2015년 10월 웹디자인 기능사 기출문제 1. 유채색에서 볼 수 있는 대비로 연속대비라고도 하며, 잔상 효과와 가장 밀접한 관련이 있는 것은? ① 색상대비 ❷ 계시대비 ③ 채도대비 ④ 명도대비 오답노트 -색상대비 : 명도와 채도가 비슷한 두 가지 이상의 색이 인접해 있을 때 서로 영향을 받아 색상의 차이가 커 보이는 현상이다. -계시대비 : 색상을 보고 일정한 시간 후에 느껴지는 대비 효과로 계속대비라고도 한다. 일종의 소극적 잔상 효과이다. -채도대비 : 명도는 비슷하지만 채도가 다른 두 색이 서로 영향을 받아 채도 차이가 나는 현상, 채도가 높은 색이 채도가 더 높아보인다. -명도대비 : 명도가 다른 두색이 서로 영향을 받아 명도가 다르게 느껴지는 현상. 2. 다음 그림에 대한 설명으로 옳은 것은?..

2015년 4회 웹디자인 기능사 기출문제 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? 색상대비 명도대비 보색대비 채도대비 정답: 명도대비 오답노트 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점 동시대비 중 가장 예민하게 작용함. 2. 색의 주목성에 대한 설명으로 옳지 않은 것은? 명도와 채도가 낮은 색이 주목성이 높다. 명시도가 높으면 색의 주목성이 높다. 채도 차이가 클수록 주목성이 높다. 빨강은 초록보다 주목성이 높다. 정답: 명도와 채도가 낮은 색이 주목성이 높다. 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 부분과 부분, 부분..

01 { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 정답 0 02 { let a=6,b=9,c=3,result; result=++a + b++ + ++c; console.log(result); console.log(a+b+c) } 정답 20 21 03 { function func(){ let a = []; for(i=1; i

오늘은 금요일에 본 자바스크립트 시험에서 운 좋게 맞춘 문제도 있어 공부를 하기로 마음먹고 부족한 부분을 정리하였다. 아규먼트 함수 { function func(str1, str2){ document.write(arguments[0]); document.write(arguments[1]); } func("함수실행1", "함수실행2"); } argument는 함수를 호출할 때 전달되는 값 자체를 말한다. 함수 내에서 "arguments" 객체를 사용하면 함수가 호출될 때 전달된 모든 인자에 접근할 수 있다. "arguments[0]"와 "arguments[1]"은 각각 "func" 함수에 전달된 첫 번째와 두 번째 인자 값을 의미한다. 함수를 호출할 때 "func("함수실행1", "함수실행2")"와 같이 ..

01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 정답 1 3 true 오답노트 lastindexOf가 헷갈려서 틀렸습니다.😥 indexOf는 문자열에서 원하는 값의 첫번째 위치값입니다. javascript는 위치값이 0123456789이므로, 첫번째 a가 있는 위치는 1이므로 1이 출력됩니다. lastIndexOf는 문자열에서 원하는 값이 마지막으로 있는 위치값을 구합니다. 마지막 a가 있는..

01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 정답 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 정답 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 정답 73 오답노트 func(10, 23)은num1이 10, num2가 23인 상태에서 호출됩니다. if 조건문에서 num1이 num2보다 작기 때문에..

오늘은 자바스크립트를 공부하면서 부족했던 부분들을 다시 공부해보려 합니다. switch문 조건문이며, 다양한 경우 (case)에 대한 처리를 하기 위해 사용됩니다. if-else문보다 가독성이 높고 보다 간결하게 코드 작성을 할 수 있습니다. 다음은 switch문의 기본구조입니다. switch (변수) { case 값1: 실행문1; break; case 값2: 실행문2; break; ... default: 실행문n; } switch 뒤 괄호 안에는 조건식이 들어가며 비교할 변수를 지정합니다. case뒤에는 해당 값이 들어가고 조건식의 변수와 같으면 해당 case아래 실행문이 실행됩니다. 각 case문의 실행문이 끝나면 반드시 break문을 써야합니다. 만약 쓰지 않으면 무한에 빠지게 됩니다. 어떤 cas..

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 false 오답노트 if문의 true 값과 false값 false : 0, null, undefined, false, ""(빈문자열) true : 1,2,3,"0", "1", "ABC", [배열], {객체}, true 안에 null값이 들어갔으므로 답은 false 02. 결괏값을 작성하시오. { let num = 0; while( num 5){ console.log(i); i++; } console.log(i); } 정답 1 2 3 4 19. 다음의 결괏값을 작성하시오! { let num = [32, 93, 15, 86, 50]; let sum =..

01 1-50까지 for문으로 출력 { for(let i=1; i { const str = "실행" return str; } document.write(func()); }

오늘은 카드를 두고 나와서 10분 거리 버스 정류장까지 가서 버스를 탈 뻔 했는데 버스가 생각보다 늦게오고 잽싸게 카드를 들고 나와서 다행히 편히 학원에 도착할 수 있었다. 오늘 오전 수업은 전에 했던 사이트 만들기에서 마무리 못지은 슬라이드 부분을 했다.|| 버튼을 누르면 정지 되고 ▷버튼을 누르면 슬라이드가 움직이는걸 자바스크립트가 아닌 swiper 라이브러리를 통해 구현하였다.script css도 가져왔는데 script에 연결된 https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js 에서 가져왔다. 너무 길어서 스킵.. 점심엔 나폴리탄이 먹고싶어서 짱구 나폴리탄을 사 먹었다. 사진 찍으려고 했는데 왔다갔다 정신 없어서 사진을 까먹었다😥 딱 기대한 나..

오늘은 오랜만에 7시간을 푹 잤다. 버스도 안놓치고 제 시간에 타서 학원에 일찍 도착했다. 내가 반에서 첫번째로 온 사람이였다. 분명 처음엔 나보다 일찍 오거나 비슷하게 오는 사람이 많았는데 다들 피곤한가보다..😂 오늘은 객체 리터럴 함수, 즉시 실행 함수, 파라미터 함수, 아규먼트 함수, 아규먼트 함수, 재귀 함수, 콜백 함수를 배웠다. 리터럴 함수는 객체를 생성하고 반환하는 것이라고 한다. function func(num, name, com){ this.num = num; this.name = name; this.com = com; } func.prototype = { result1: function(){ document.write(`${this.num}.${this.name}가${this.com}실..

오늘은 7시에 일어났는데 엄마가 씻고 계셔서 15분 정도 늦게 씻게 되었다. 버스를 놓치면 1시간 걸리니까 오늘도 버스를 놓치지 않게 노력해서 학원까지 무사히 도착했다. 오전에는 자바스크립트 forEach, for of, for in, for map()에 대해 배웠다. for Each는 배열의 각 요소에 콜백함수를 실행한다. element를 줄여 el로 쓸 수 있다. { const num = [100,200,300,400,500]; num.forEach(function(el){ document.write(el," "); }); document.write(" ") //forEach : 화살표 함수 num.forEach((el)=>{ document.write(el," "); }); document.writ..

PHP 게시판에서 검색했을 경우의 페이지를 만들었습니다. 전체적인 구조는 board.php와 동일합니다. 게시글 검색 php 건의 게시물이 검색되었습니다. intro_text 밑에 검색된 글의 건 수를 구해주었습니다. 위에 isset을 올려줬기 때문에 totalCount의 값을 구할 수 있습니다. 는 php의 약식입니다. php로 테이블 만들기 게시판 웹 디자이너, 웹 퍼블리셔, 프론트 엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

어제 만든 PHP 게시판에 버그를 수정하고 기능을 추가하였습니다. sessionCheck.php connect 파일 안에 sessionCheck.php를 만들어 회원인지 아닌지 체크합니다. boardModify.php

오늘은 PHP로 게시판을 만들고 게시글 작성하고 수정하고 삭제하는 기능을 추가하였습니다. createBoard.php create 파일 안에 createBoard.php를 만들고 sql문으로 게시판 테이블을 작성해주었습니다. createBoardData.php

PHP란? PHP(PHP: Hypertext Preprocessor)는 C언어를 기반으로 만들어진 서버 측에서 실행되는 서버 사이드 스크립트 언어입니다. 동적 웹 페이지를 쉽고 빠르게 만들 수 있도록 해줍니다.PHP로 작성된 코드를 HTML 코드 안에 추가하면, 웹 서버는 해당 PHP 코드를 해석하여 동적 웹 페이지를 생성합니다. PHP의 장점 주요 운영체제와 대부분의 웹 서버에서 지원합니다. 다른 프로그래밍 언어보다 직관적으로 코드를 작성할 수 있어서, 작성해야 하는 코드의 양이 적습니다. 텍스트 처리에 특화되어 있어 HTML 문서 처리에 적합합니다. 웹 페이지 만들기 웹 페이지를 만들기 전에 모든 페이지와 이어줄 php파일을 만듭니다. 저는 connect 파일을 만들고 안에 MySQL 데이터베이스에 ..

My SQL이란? MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. MySQL은 다중 사용자, 다중 스레드 RDBMS로서, 데이터의 안정성과 보안성을 제공합니다. MySQL은 대부분의 운영 체제에서 작동하며, 웹 애플리케이션 개발, 데이터 분석, 빅 데이터, 클라우드 기반 애플리케이션 등에 많이 사용됩니다. MySQL은 SQL(Structured Query Language)을 사용하여 데이터를 관리합니다. SQL은 데이터베이스에 저장된 데이터를 조작하기 위한 표준적인 언어로서, 데이터를 검색, 삽입, 업데이트, 삭제하는데 사용됩니다. MySQL은 이러한 SQL 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을 유지하며, 데이터베이스를 관리합니다. MySQL은 사용이 간편하며, ..

오늘은 일러스트레이터로 펜툴로 선을 따는 연습을 해보았습니다. 펜툴로 선을 따고 채색과 라이브 페인트로 명암을 연습을 하였습니다. 펜툴로 딴 이미지 입니다!