아라의 WWW

마크업으로 레이아웃을 짤 때 시멘틱 태그를 사용합니다. 각자의 태그들이 의미하는 바와 사용하는 방식이 다른데 이 부분에 대해서 한번 알아봅시다. 🤔 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 포함할 때 사용합니다. 텍스트, 인라인 요소, 블록 요소를 포함할 수 있지만 , 태그는 포함 할 수 없습니다. 웹 페이지의 는 하나만 사용해야한다. 🤔 내비게이션 표현을 위한 태그로 같은 사이트에 있는 페이지나 다른 사이트를 연결한는 링크들의 모음 즉, 메뉴형식을 표현할때 사용하는 태그입니다. 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다. 는 위치에 신경쓰지 않는 편이며 여러 개 사용이 가능합니다. 메뉴는 에도 들어가지만 에는 현재 열려있는 페이지에서 이동가능한 링크..

시멘틱 마크업(Semantic markup) 시멘틱의 사전적 뜻은 의미론적인 종도로 해석할 수 있다. 이것은 마크업을 할때 의미에 부합하는 태그를 사용하라는 뜻입니다. HTML은 보통 시각적인 방법으로 사용자에게 전달되지만 예를 들어 시각 장애인의 경우에는 음성으로 전달해 주어야 하는데 이럴 경우 태그의 의미가 적절해야합니다. 이렇듯 시멘틱은 태그에 의미를 부여하여 좀더 명확에게 읽어 낼수 있도록 할수있는 마크업입니다. 시멘틱 마크업(Semantic markup)을 사용하는 이유 검색엔진 최적화 웹브라우저에 검색하게 되면 정보를 제공하는 검색엔진에 노출되는것이 유리합니다. 웹접근성 웹사이트에 접근과 비장애우들과 동등하게 정보를 이해할 수 있습니다. 코드 가독성 div를 주로 사용한다면 구조적으로 파악하기..

코딩 공부를 할때 인라인 구조와 블록 구조를 몰라 위치나 크기값을 지정할때 자신이 원하는 대로 적용이 되지 않아 당황하는 경우가 종종 있습니다. 인라인과 블록구조를 공부하고 이러한 문제를 해결해 봅시다 블록 레벨요소(Block-level Elements) 인라인요소(inline Elements) 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 차이점 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 변환 🤨블록 레벨 요소(Block-level Elements) 블록레벨 요소는 자신이 필요로하는 영역보다 더 많은 요소를 차지합니다. 사용가능한 최대의 가로너비를 사용하며 이러한 특성때문에 수직으로 적용될 수 밖..

최댓값 만들기 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. function solution(numbers) { numbers.sort((a,b)=>b-a); return numbers[0]*numbers[1]; } numbers.sort((a,b)=>b-a)를 통해 numbers 배열을 내림차순으로 정렬합니다. 이를 통해 배열의 첫 번째 원소가 가장 큰 값이 되도록 합니다. 그리고 return numbers[0]*numbers[1]을 통해 정렬된 배열의 첫 번째 원소와 두 번째 원소를 곱한 값을 반환합니다. 이는 정렬된 배열에서 가장 큰 두 수를 선택하여 곱한 값이기 때문에, 주어진..

주사위의 개수 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. function solution(box, n) { return box.reduce((acc, cur) => acc * Math.floor(cur / n), 1); } box.reduce 메서드를 사용하여 box 배열의 모든 요소를 하나씩 순회하면서 처리합니다. reduce 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 이전 값과 현재 값의 결합을 ..

공던지기 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. function solution(numbers, k) { return numbers[(k - 1) * 2 % numbers.length]; } k에서 1을 빼줍니다. 이는 인덱스가 0부터 시작하는 반면에 k는 1부터 시작하기 때문입니다. 이렇게 함으로써 k번째 공을 던지는 사람의 인덱스를 구할 수 있습니다. 다음으로, (k - 1) * 2를 계산합니다. 이를 통해 순환적..

공 던지기 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. function solution(numbers, k) { return numbers[(k - 1) * 2 % numbers.length]; } 배열 인덱스는 0부터 시작하므로 k - 1을 해줍니다. 이를 통해 k번째 공을 던지는 사람의 인덱스를 구합니다. 그 다음, 2를 곱하고 numbers.length로 나눈 나머지 값을 계산합니다. 이를 통해 순환적인 인덱스 접근을..

점의 위치 구하기 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. 스크린샷 2022-07-07 오후 3.27.04 복사본.png x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. function solution(dot) {..

가위 바위 보 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. function solution(rsp) { return Array.from(rsp).map(v => { switch(+v) { case 2: return 0 case 0: return 5 default: return 2 } }).join(''); } 가위(2), 바위(0), 보(5)를 순서대로 나타낸 문자열 rsp를 받아서, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 반환하는 함수를 작성하는 것입니다. 해..

See the Pen 20230324 by jo0132 (@jo0132) on CodePen.

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

옛날과 다르게 요즘 우리는 다양한 크기의 디바이스에서 동일한 웹사이트를 사용가능합니다. 2007년에 인터넷 사용이 가능한 모바일 기기가 세상에 나온 이후로 사람들은 모바일 웹에 열광하기 시작합니다. 모바일 기기에 최적화된 웹사이트를 제공하기위해 사람들은 노력했지만 비용과 시간 인력에 두배로 투자해야 하는 현실적인 문제를 해결했어야 했습니다. 그렇게 개발된 기술이 반응형 웹이라는 기술이 등장하였습니다. 반응형 웹은 pc, tv, 내비게이션 스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다. 왜 반응형 웹으로 만들어야 하는가? 1. 유지보수가 간편합니다. 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱버전 같은 두개의 웹사이트를 개별적으로 수정해야 하지만 하나의 페이지를 ..

웹사이트를 보다보면 아무리 사진고 동영상들이 있어도 문자가 빠진 웹사이트는 없는 것 같습니다. 문자로 정보를 전달할때 여러가지 속성으로 강조와 꾸밈을 줄 수있습니다. 이번엔 텍스트와 관련된 스타일에 대해 정리하려고 합니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글골이 경우는 따옴표로 감싸고 여러개 의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family:'맑은 고딕', "돋움", 궁서, Arial, Helvetica ; font size 문자의 글자 크기를 지정하는 속성입니다. 글자크기는 단위가 px가 기본입니다 하지만 상황에 따라 다른 단위를 사용하기도 합니다. px 해상도에 따라 상대적으로 달라지는 기본단..

grid는 flex와 float와 다르게 테이블을 만들듯이 사용하는 속성입니다. 세로 열과 가로 행을 기준을 요소를 정렬 할 수잇스빈다. 하지만 테이블과 달리 css그리드는 다양 한 레이아웃을 훨씬 더 쉽게 구현할 수있습니다. 자식요소를 일일이 위치를 지정해 준 것 처럼, 실제로 겹치게 층을 지면서 자리를 잡도로 ㄱ각 요소를 위치를 지정해 줄수도 잇습니다. float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️ 레이아웃 : float에 대해 알아봅시다! 레이아웃 : float에 대해 알아봅시다! 블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는 ..

사이트의 레이아웃을 구성할 때 기본적으로 수직 구조로 이루어져있습니다. 레이아웃을 구성 할때 기본적으로 블록 구조를 사용하게 되는데 이러한 구조들은 수직으로 쌓이는 특성이기 때문입니다. 하지만 실제로 사용하기는 수평으로 사용하는 경우가 필요한 경우도 많습니다. 수평으로 만드는 속성은 많지만 가장 많이 사용되는 속성도 알맛게 사용되는 경우도 다르기 때문에 적절하고 자신이 생각하기에 편한 속성을 사용하는 것이 좋습니다. 저번에는 float에 관해 설명했다면 이번에는 flex에 관해 설명하고자 합니다. float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️ 레이아웃 : float에 대해 알아봅시다! 레이아웃 : float에 대해 알아봅시다! 블록구조의 태그들은 기본적으로 세로로 배치가 되지만 floa..

AJAX를 이용한 유효성 검사 AJAX를 이용한 유효성 검사는 서버와 비동기적으로 데이터를 주고받으며, 화면 전환 없이 유효성 검사를 수행할 수 있습니다. 일반적으로 웹 페이지에서 입력 필드를 제출할 때, 전체 폼이 서버로 전송되어 페이지가 새로고침되는데 반해, AJAX를 이용하면 입력 필드의 값을 서버로 전송하고, 서버에서 검증 결과를 돌려주는 과정에서 페이지가 새로고침되지 않습니다. 이 방법은 사용자 경험을 향상시키는 데 큰 역할을 합니다. 예를 들어, 회원 가입 페이지에서 유효성 검사를 수행하는 경우, 사용자가 입력한 값들이 올바른지 서버에서 검증하고, 검증 결과에 따라 사용자에게 적절한 메시지를 표시할 수 있습니다. 이를 통해 사용자는 빠르게 오류를 수정하고, 올바른 값을 제출할 수 있게 됩니다...

오늘은 게시판에 검색 시스템을 만들어 정리하려고 합니다. 코드

오늘은 게시판에 페이지에 숫자를 눌러서 움직이는 것을 구현하였습니다. 전체 게시판 웹디자이너, 웹퍼블리셔, 프론트앤드 개발자를 위한 게시판입니다. 관련된 문의 사항을 여기서 확인하세요! * 총 111 건의 게시물이 등록 되었습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

오늘은 제가 한 미션을 정리하여 올리려고 합니다. 1. boardVeiw.php을 바로 들어갈때 생기는 오류 수정

오늘은 php을 통해 실시간으로 홈페이지를 만들고 수정합니다. 이때 데이터 베이스에 값을 저장하여 진짜 회원가입하고 로그인까지 하는 것을 구현하였습니다. join.php 회원가입을 해주시면 다양한 정보를 자유롭게 볼수 있습니다. 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호확인 연락처 회원가입 완료 이 HTML 코드는 회원가입 페이지를 만드는 코드입니다. 페이지에는 회원가입을 유도하는 이미지와 메시지, 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 등 회원가입에 필요한 정보를 입력할 수 있는 폼이 포함되어 있습니다. 폼은 "joinsave.php" 라는 PHP 스크립트를 통해 전송됩니다. 또한, 이 코드는 웹사이트의 공통적인 요소들을 포함하는 다른 PHP 파일을 include하여 사용합니다. ..

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

html Javascript parallax Effect07 페럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은 바다에서 표류하는 쪽배와 같다. 09 sectin9 꿈이 없는..

오늘은 뮤직 리스트 부분을 추가하였습니다. 수정한 부분 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list"); const musicList = musicWrap.querySelector(".music__list"); const musicListUl = musicWrap.querySelector(".music__list ul"); const musicListClose = musicWrap.querySelector(".music__list h3 .close"); // 이전곡 듣기 const prevMusic = () => { musicIn..

오늘은 재생바와 컨트롤 버튼을 활성화 하였습니다. 재생버튼, 일시정지 버튼 이전곡 버튼 다음곡버튼으로 곡재생을 하였고 기본적으로 전체 재생을 주었으므로 마지막 곡이 재생되면 다시 돌아가 곡이 재생됩니다. 마지막으로 뮤직 재생바라 활성화 되면서 재생바의 위치에 따라 곡의 위치와 곡의 진행도를 알 수 있습니다. // 재생 버튼 const playMusic = () =>{ musicWrap.classList.add("paused"); musicPlay.setAttribute("title","정지"); musicPlay.setAttribute("class","stop"); musicAudio.play(); } // 일시정지 버튼 const pauseMusic = () =>{ musicWrap.classList...

html ARARA GAME WORLD 2023년 04월 24이 09시 30분 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 roading... : 마우스 커서를 나타내는 요소입니다. img 태그를 포함하고 있어 이미지를 표시하고 있습니다. : 웹 페이지의 헤더를 나타내는 요소입니다. h1 태그를 포함하고 있어 제목을 표시하고 있습니다. 또한 현재 시간을 나타내는 div 요소도 포함하고 있습니다. : 웹 페이지의 주요 콘텐츠를 나타내는 요소입니다. icon_box 클래스를 가진 div 요소를 포함하고 있습니다. : 아이콘 박스를 나타내는 요소입니다. icon1~icon4 클래스를 가진 div 요소를 포함하고 있으며, 각각의 아이콘과 텍스트를 표시하고 있습니다. : 웹 페이지의 푸터를 나타내는 요소입니다. d..

오늘은 플러그인을 사용하여 스크롤을 내릴수록 애니메이션이 진행되는 효과를 주었습니다. 미리 말씀드리지만 소스가 길어요😂 css *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'ReciaSerifDisplay'; } body { height: 20000px; background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 40px; height: 40px; color: #fff; text-align: center; font-size: 14px; line-height: 40px; background-color: rgba(0..

HTML Javascript parallax Effect01 페럴랙스 이펙트 : 메뉴효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은..