아라의 WWW

3월 3일 2차 시험을 봤는데요 이것도 한번씩 상기하는 것도 좋을것 같아 해설을 달아 정리하려고 합니다. 01. 1-50까지 for문으로 출력 for(let i = 1; i

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

네 오늘은 시험을 봤어요 어차피 오후면 시험 보긴 하는데 오늘은 쪽지시험을 보고 틀린문제 해설을 적으려고 합니다. 화이팅! 01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 답 : 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 //jquer..

블로그를 시작하면서 선생님과 약속한 1일 1블로그에 위기가 찾아왔어요.... 주제가 없는데 글을 올려야 하는 상황이 오고말았어요.... 뭘 적어야 하는가 생각해봤는데 오늘은 명확한 주제를 가지고 정리하는 것 말고 오늘 수업에서 공부한 걸 정리하려고 해요... 앞으로도 여러번 쓸거같은 예감이ㅎㅎ 형변화 그저께 올린 문제중 형과 관련된 함수가 있었는데 parseInt() : 문자열을 정수로 바꾸는 함수(숫자가 아닐 경우 nan을 반환함) isNaN() : 매개변수가 숫자인지 검사하는 함수 ispositive() : 양수인지 확인하는 함수 이렇게 세가지 였습니다. 이렇게 세가지 함수와 더불어 오늘은 형변화에 대해 수업이 먼저 이루어졌습니다. 형변화를 배우기 전에 type of 함수로 형을 판별하는 것부터 배웠..

웹사이트를 보다보면 아무리 사진고 동영상들이 있어도 문자가 빠진 웹사이트는 없는 것 같습니다. 문자로 정보를 전달할때 여러가지 속성으로 강조와 꾸밈을 줄 수있습니다. 이번엔 텍스트와 관련된 스타일에 대해 정리하려고 합니다. 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..

01. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. if(0){ document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(false)") } false 조건문에 들어간 데이터가 형식에 따라 다르게 출력됩니다. false : 0, null, undefined, false, ""(빈문자열) true : 1, 2, 3, "0", "1", "abc", [], {}, true (0을 제외한 숫자와 문자, 배열, 객체, true값은 true) 02. if문 생략 if으로 작업할때 {}생략하여 출력할 수 있습니다. { const num = 100; ..

마무리 문제1(숫자를 받아 양수,음수,0인지 판단하고 창에 표시) 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 면환합니다. (프롬프트 창에 입력한 내용잉 숫자가 아니면 parseInt()함수는 NaN을 반환합니다.) 반환값이 숫자일 경우에만 함수를 실행합니다. See the Pen 2023.02.28_문제1 by jo0132 (@jo0132) on CodePen. 해설 먼저 ParseInt 함수(숫자가 아닐 경우 nan을 반환함)로 수를 받아 상수 number로 선언하면서 시작합니다. !isNaN()(매개변수가 숫자인지 검사하는 함수)로 숫자인지 검사후 ispositive()(양수인지 확인하는 함수..

자바스크립트는 함수형 프로그래밍 언어로, 함수가 중요한 역할을 합니다. 함수는 function 키워드를 사용하여 정의할 수 있습니다. 01. 선언적 함수 선언적 함수(declarative function)는 function 키워드를 사용하여 함수를 선언하는 방식입니다. 함수의 이름과 매개변수를 괄호 안에 넣고, 함수 본문을 중괄호로 감싸서 정의합니다. function 함수(){ 실행문; } 출력문; function func(){ document.write("실행 "); } func(); 기본적인 함수로 출력문(호출)이 함수의 앞또는 뒤에 있어도 호출이 가능합니다. 화살표 함수 또한 각각의 함수들은 화살표로 좀 더 짧게 표현 되기도 합니다. 기존 함수 표현식에서 function키워드를 삭제하고 인자를 받는..

자바스크립트은 웹을 동적인 구현이 가능하게 하는 언어입니다. 동적인 구현이 이루어지기위해서는 변수에 데이터를 저장하는 것이 기본적이 중요한 역활을 하게 됩니다. 데이터를 저장하는 방법은 다양해 공부가 필요한 부분입니다. 간단하게 변수, 상수 배열 객체 별로 나누어지지만 그안에서 여러 가지 방법이 있습니다. 01.변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. 예전에는 var로 변수를 선언했지만 요즘은 let을 사용하는 경우가 많습니다. { var x = 100; // 변수 x에 숫자 100을 저장함 var y = 200; // 변수 y에 숫자 200을 저장함 var z = "javascript"; // 변수 z에 문자 "javascript"를 저장함 console.log(x); console..

선택자 종류 선택자에 대해서는 예전에 한번 올렸지만 다시한번 제대로 포스팅 해보려고 해요! 선택자란 css로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 되는 부분을 말합니다. css 속성이 기본으로 형식은 이런 식으로 되어있습니다. 앞에 선택자는 태그를 선택자로 삼은 type선택자입니다. 이제 선택자에 대해 알아보겠습니다. 01. type선택자 02. 아이디 선택자 03. class 선택자 04. 전체 선택자 05. 하위 선택자 06. 자식 선택자 07. 인접 선택자 08. 형제 선택자 09. 그룹 선택자 10. 속성 선택자 11. 가상 클래스 선택자 12. 가상 요소 선택자 13. 종속 선택자 14. 선택자들의 우선순위 01. type 선택자 html의 태그 이름을 선택자로 사용한 선택자입니다..

블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열 되던 블록들을 가로로 배치하려 할때 유용하며 float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. (크로스 브라우징 : 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것) float 적용 전(미리보기는 0.5로 보는 것이 편합니다.) See the Pen float 적용전 by jo0132 (@jo0132) on CodePen. float 적용 후(미리보기는 0.5로 보는 것이 편합니다...

문제 풀이 전... 자가격리 때문에 집에있는 사이 받은 새로운 책의 문제를 블로그에 올리는게 숙제가 되어버렸어요 고로 문제를 알 수 없는 상황에 친구한테 문제를 페이지를 사진으로 받아 풀게 되었습니다. 결과는 잘 나왔는데 답을 몰라서 틀린 코딩일 수있다는 점... 우리 같이 공부해요😂 마무리 문제 1 주어진 배열에서 10보다 큰 값을 찾아서 화면에 표시해 보세요 배열 요소의 개수만큼 for문을 반복합니다. if문을 사용해서 요소의 값과 10을 비교합니다. document.write문을 사용해서 화면에 표시합니다. See the Pen 20230225_01 by jo0132 (@jo0132) on CodePen. if문으로 배열 arr의 요소중 10이상의 수를 찾아 출력할 수있도록 if문의 조건식을 arr..

자바스크립트에서 조건문은 주어진 조건에 따라 코드의 실행 흐름을 결정하는 구문입니다. if문, switch문 등이 자바스크립트에서 사용되는 조건문 중 일부입니다. 자바스크립트에서 사용되는 대표적인 조건문의 형태는 다음과 같습니다. 1. if 문 2. if / else 문 3. if / else if / else 문 4. 삼항 연산자 5. switch 문 01. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. if (조건식) { // 출력문 } See the Pen if by jo0132 (@jo0132) on CodePen. 위에 구문은 처음 6을 변수에 저장하여 if문의 조건식에 충족되는 값이기 때문..

우리가 코딩을 할 때 변수를 출력하는 것을 반복하는 경우가 있습니다. 예를 들어, const arr =[1,2,3,4,5,6,7,8,...,98,99,100] 위처럼 1부터 100까지 있는 배열에서 데이터를 전부 꺼내야 하는 상황이 온다면 우린 출력 문을 100번 입력하여야 할 것 입니다. 그런 단점을 보안한 것이 반복문입니다. 🤔1. for문 가장 기본적이며 가장 많이 사용하는 for을 이용한 반복문입니다. See the Pen for문 by jo0132 (@jo0132) on CodePen. 🤔2. forEach문 배열의 길이만큼 반복되는 반복문입니다.(배열의 요소의 갯수만큼 반복합니다.) 출력문은 한번 모두 출력되면 index의 모든 숫자가 소진될때까지 출력하게됩니다. item : 배열의 각 요소 ..

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

연산자의 종류에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 01. 산술 연산자 산술 연산자는 수식을 계산 해 주도록 하는 연산자 입니다. 산술 연산자 종류 속성 설명 + 더하기 연산 / 문자와 문자,문자와 변수를 연결할 때 사용 - 빼기 연산 * 곱하기 연산 / 몫을 구 할 때 사용 % 나머지를 구할때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 const a = 5; const b = 11; // 연산자 console.log(a + b); //더하기 //16 console.log(a - b); //빼기 //-6 console.log(a * b); //곱하기 //55 console.log(a / b); //몫을 구하기 //0.4545... console.l..

id와 class의 차이점 1. 중복 사용 여부 클래스는 여러 요소가 한 클래스를 사용할 수 있지만 아이디는 한 아이디가 한 요소만을 사용할수 있습니다. See the Pen Untitled by jo0132 (@jo0132) on CodePen. 2. 한 요소(태그)가 갖는 갯수의 차이 클래스는 한 요소에 여러개의 클래스를 가질수 있으며 아이디는 한 요소에 한개의 아이디만을 가질 수 있습니다. See the Pen Untitled by jo0132 (@jo0132) on CodePen. 위에 보시면 id가 중복으로 사용이 가능한걸로 나옵니다 . 하지만 id는 고유한 id값이 있어야 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다. 그러므로 중복되지 않도록 주의해야합니다. 3. 우선순위 id와..

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

변수에는 데이터 형식이 존재합니다. 데이터를 가지고 코드를 처리할때 데이터 형이 제대로 있어야 정확하게 처리하게 되어있습니다. 자바스크립트의 자료형은 크게 원시유형과 객체으로 나눠집니다. 01. 문자열 형 문자열 형은 문자와 문자열(문장or 단어)을 저장하는 변수입니다. 큰 따옴표(")와 작은 따옴표(')로 감싸서 표현합니다. 큰 따옴표는 큰따옴표끼리 작은 따옴표는 작은 따옴표끼리 감싸 표현합니다. typeof ("큰 따옴표를 사용한 문자열입니다");// string typeof ('작은 따옴표를 사용한 문자열입니다');// string 02. 숫자형 음수, 양수, 정수, 소수, n진수 등의 숫자 값을 넣을 수 잇는 자료형입니다. 숫자를 나타내는 변수를 숫자형이라하고 따옴표 없이 정수또는 소수, n진법으..

css을 표현하는 방법에는 여러가지가 있습니다. 내부 스타일 시트 내부 스타일 시트는 내부 스타일 시트입니다. 외부 스타일 시트 외부 스타일 시트는 중복되는 css를 여러 파일과 공유 할 수 있도록 css를 하나의 파일화 하여 연결한 것을 말합니다. 외부 스타일 시트로 인해 중복되는 불필요한 css을 내부스타일시트로 사용하지 않아도 됩니다. .css라는 확장자를 가진 파일로 저장하고 을 이용하여 선업합니다. 외부 스타일 시트입니다. p { color: red; } @import css안으로 다른 css파일을 불러들일 경우 사용되며 외부 스타일 시트 뿐만 아니라 내부 스타일 시트로 도 불러 사용할 수 있습니다. @import 방식입니다. 인라인 스타일 html에 직접 적용하는 방식으로 style =" "형..

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

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