xoouxa

안녕하세요 o((>ω< ))o 오늘은 내가 원하는대로 이미지 유형의 페이지를 만드는 작업을 한 번 해보도록 하겠습니다 ✍🏻 what i made ✍🏻 코드입니다. 반려견을 키우는 최고의 방법 반려견을 키우기 위해선 많은 노력과 시간과 정성이 필요합니다. 함께하는 충분한 시간 반려견의 시간은 사람보다 짧기 때문에 많은 시간을 함께 보내기 위해 노력해야 합니다. 자세히 보기 함께하는 충분한 시간 반려견의 시간은 사람보다 짧기 때문에 많은 시간을 함께 보내기 위해 노력해야 합니다. 자세히 보기 how to coding ? - 자신이 원하는 폰트를 가져와 폰트 링크를 지정해 줍니다. - 페이지의 전체 구역을 사용하기 때문에 head 태그에 style 태그를 만들어 전체구역 * {} 태그를 만들고 margin :..

안녕하세요 o((>ω< ))o 오늘은 자바스크립트 테스트 오답풀이를 한 번 해보도록 하겠습니다. 여러분들도 함께 지금까지 공부 한 내용들을 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 : false 풀이 : 조건문에서 null은 false한 값으로 간주되기 때문입니다. 따라서 else 블록이 실행되어 "false"가 출력됩니다. 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; //더이상 실행되지 않음 끝 } console.log(num); } } 정답 : 1 2 4 5 6 풀이 : 이 코드는 1부터 6까지..

안녕하세요 o((>ω< ))o 오늘은 저번에 했던 작업을 토대로 조금 더 다듬어보고 문제 내용을 하나 더 추가해보도록 하겠습니다. (저번 작업 link : https://xoouxa58.tistory.com/29) 정답을 입력한 완성 화면 코드 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 어제와 동일한 코드이지만 추가 작업을 해주도록 하겠습니다. 사용자가 정답을 적어야하기 때문에 정답을 적는 칸을 만들어줍니다. quiz__answer 안에 input태그를 만들어 답을 입력하는 칸도 만들어줍니다. 또, 정답을 적고 확인했을 때, 해설을 확인할 수 있도록 quiz__footer 아래에 desc, 설명 칸을 만들어 해설을 넣어줄 영역을 지정해줍니다. reset.css코드 입니다. @i..

안녕하세요 o((>ω< ))o 오늘은 아직 미완성이지만 기본 페이지는 꼬리를 흔드는 강아지, 정답을 맞추면 웃고있는 강아지 , 맞추지 못하면 울고있는 강아지를 만들어 자바스크립트를 작업해 보도록 하겠습니다. 완성작 코드 HTML 코드입니다. Quiz. 정답 확인하기 유형 . //like dog, dislike dog으로 설정 가능 정답 확인하기 연변대비 yuna243441@naver.com dog로 설정하는 경우 (기본) dog like로 설정하는 경우 dog dislike로 설정하는 경우 reset.css코드 입니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontwor..

안녕하세요 o((>ω< ))o 오늘은 저번 시간에 했던 내 스타일대로 만드는 이미지 유형 페이지에 이어서 카드 유형 페이지를 만들어 보도록 하겠습니다. (이미지 유형 바로 가기 : https://xoouxa58.tistory.com/27) ✍🏻 what i made ✍🏻 코드 반려견을 키우는 좋은 방법 반려견을 키우기 위해선 정성과 사랑이 필요합니다. 건강한 식이 강아지의 건강은 올바른 식이와 함께 유지됩니다. 건강한 강아지 사료와 간식을 골라서 줘야 합니다. 맛있는 거 많이 사주세요. 강아지를 행복하게 하는것도 중요합니다. 자세히 보기 주인의 사랑과 관심 강아지는 주인으로부터 사랑과 관심을 받아야 합니다. 매일 피드백과 함께 칭찬을 해주고, 정기적으로 건강 체크하며 좋은 관계를 유지해주세요. 강아지는 ..

안녕하세요 o((>ω< ))o 오늘은 자바스크립트 데이터 불러오기 총정리를 해보도록 하겠습니다. ✍🏻01. 변수 : 데이터 불러오기✍🏻 변수 안에 저장 된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x,y,z); } 결과 100,200,javascript ✍🏻02. 상수 : 데이터 불러오기✍🏻 상수 안에 저장 된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log.(x,y,z); } 결과 100,200,javascript ✍🏻03. 배열 : 데이터 불러오기✍🏻 여러 개의 배열된 데이터를 불러오는 방법입니다. { const arr = [100,2..

🤷‍♂️ 01. 다음의 출력값을 보고 빈칸을 채우시오 🤷‍♂️ { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 📍 변수 x에 숫자 100을 지정함 변수 y에 숫자 200을 지정함 변수 z에 숫자 javascript ✍🏻 x y x+y 🤷‍♂️ 02. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️ { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //..

오늘은 문자 관련 스타일 13가지에 대해 알아보겠습니다 😊 ✍🏻 font-family ✍🏻 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: 사용자 지정 폰트; ✍🏻 font-size ✍🏻 폰트의 크기를 지정하는 속성으로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px : 해상도에 따라 상대적으로 달라지는 기본 단위 % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위 rem : em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 ..

grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다. 레이아웃 - grid 유형을 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. //grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다. ✨ 감사합니다.

✍🏻 레이아웃 - flex 유형 ✍🏻 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하는 레이아웃을 잡는 것이다. display: flex;​ flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없습니다. 저번 시간 (레이아웃 - float 유형 - 반응형 한 번에 이해하기 : https://xoouxa58.tistory.com/21)에 공부한 예제를 이용하여 flex 작업을 해보겠습니다. //전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. //header 구역, nav 구역, main 구역, footer 구역을 만들어줍니다. //main 구역 안에 3개의 레이아웃을 만들기 위해 asid..