Leeyanggoo

반복문은 코드 블록을 반복적으로 실행할 수 있도록 하는 구문입니다. 그중 자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다. 반복문을 사용하는 이유는 불필요한 명령을 늘어놓지 않아도 된다는 점, 그만큼 소스 코드도 깔끔해진다는 점입니다. 오늘은 반복문 중에 for문에 대해 알아보겠습니다! :) for문 for문은 지정된 조건이 'true'인 동안 코드 블록을 반복 실행합니다. 일반적으로 반복 횟수가 명확한 경우에 사용됩니다. for문의 구문은 다음과 같습니다. for(초깃값; 조건식; 증감식){ } 초깃값 : 몇 번 반복할지 지정하기 위해 변수를 선언합니다. 초깃값은 보통 0이나 1부터 시작합니다. 조건식 : 문장을 어떤 조건으로 반복할지 정하는 조건식을 넣습니다. for문은 'true'인 동안..

id 선택자 CSS의 선택자는 HTML 요소 중 같은 요소일지라도 각자 다른 속성을 부여할 때 사용합니다. 그중 id 선택자는 여러 요소 중 특정한 이름을 부여하는 선택자이며 중복해서 사용할 수 없습니다. See the Pen CSS_id by leeyanggoo (@leeyanggoo) on CodePen. id 선택자는 HTML 요소 태그의 시작에 과 같이 붙여서 나타냅니다. 또한 id 선택자의 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다. class 선택자 class 선택자는 HTML 요소 중 같은 이름을 갖는 특정한 집단을 모아 속성을 부여하는 선택자입니다. 즉 특정 집단을 class라고 표현하는 것이며, 여러 개의 요소에 같은 class 이름을 부여할 수 있습니다. See the P..

각각의 프로그램이 수식을 만들어야 할 때 필요한 것을 '연산자'라고 합니다. 자바스크립트는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 차례대로 알아보겠습니다. :) 산술 연산자 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. 증감 연산자 ++ 1씩 증가시킬 때 사용합니다. (+와 +의 사이에 공백이 있으면 안 됩니다.) -- 1씩 감소시킬 때 사용합니다. (-와 -의 사이에 공백이 있으면 안 됩니다.) 더하기(+), 빼기(-), 곱하기(*), 나누기(/)는 일반적인 사..

See the Pen Tail Animation by leeyanggoo (@leeyanggoo) on CodePen. 배경 그라디언트 효과 linear-gradient : https://uigradients.com/

CSS는 Cascading Style Sheets의 약자로서 HTML의 요소들을 어떻게 보여줄지 정의하는 스타일 시트 언어입니다. 이 CSS를 적용하는 표현 방법으로 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트가 있습니다. 한번 알아보겠습니다. :) 내부 스타일 시트Internal style sheet 내부 스타일 시트는 HTML의 문서 안에 태그를 이용하여 요소에게 적용하는 방식입니다. 대부분 태그는 HTML 문서의 태그 안에 넣습니다. See the Pen CSS_1 by leeyanggoo (@leeyanggoo) on CodePen. 이처럼 태그가 HTML 문서 내부에 쓰여 적용되는 방식을 '내부 스타일 시트'라고 합니다. 이 방식은 해당 HTML 문서에만 스타일을 적용할 수 있습니..

자료형 프로그래밍 언어에는 내장된 여러 가지 형태의 자료 형태(daya type)가 존재하고 그를 자료형이라고 합니다. 자바스크립트의 자료형은 크게 원시 유형과 객체로 구분할 수 있고, 원시 유형은 다시 6가지로 나눠집니다. 먼저 원시 유형의 숫자형부터 차례대로 알아보겠습니다! :) 원시 유형primitive type 원시 유형(원시 값)은 자바스크립트의 기본 타입을 말하며 변형이 불가능한 즉 '불변성'을 지니고 있는 데이터입니다. 원시 유형은 더 이상 단순화할 수 없기 때문에 원시적(primitive)이라고 부릅니다. let a = 3; console.log(a); // 3 a = 5; console.log(a); // 5 언뜻 3이라는 값이 5로 변형했다고 생각할 수 있지만, 데이터 영역에 새로 값 ..

지난 HTML의 포스트에서 웹 페이지를 구조를 만들 때 의미를 고려한 태그를 사용하여 구현하는 시멘틱(semantic)과 논리적 순서(logical sequence) 마크업을 소개해드렸습니다. 웹 페이지의 구조가 의미에 따라 구성되어 있다면, 그 구조를 이루는 태그들 또한 각자 의미와 쓰이는 경우가 있습니다. 이번엔 그 태그들 중에 구획을 나누는 태그에 대해 자세히 알아봄으로써 좀 더 접근성 있고, 명확한 정보를 갖춘 웹 페이지를 구현하는 데 한 걸음 더 나아가 봅시다! 위의 웹 페이지 구조를 보면 태그가 다양한 곳에 쓰이는 걸 알 수 있습니다. 왜 그런 것인지 태그와 관련된 태그를 알아보겠습니다! 🔎 header : 문서의 소개, 제목, 탐색에 도움이 되는 콘텐츠를 나타냅니다. 또한 는 구획을 나눌 때..

시멘틱 마크업Semantic Markup 시멘틱(Semantic)은 '의미론적인'의 뜻으로, 시멘틱 마크업이란 웹 페이지의 구조와 의미를 고려하여 태그를 사용하는 방식을 의미합니다. header, nav, section, article, aside, footer 등 각각의 태그 안에 알맞은 데이터를 채워넣음으로써 보다 명확한 정보를 갖춘 웹 페이지를 구현할 수 있습니다. header 웹 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 네비게이션, 검색 등의 내용을 포함합니다. nav 메인 메뉴나 목차, 색인 등을 포함하는 구획입니다. section 맥락이 같은 요소들을 주제별로 그룹화하는 태그. 문서의 일반적인 영역을 나타냅니다. article 게시판, 블로그 포스팅, 뉴스 기사 등과 ..

블록 레벨 요소Block-level Elements 블록 레벨 요소는 일반적으로 목록·표 등을 포함하고 있으며, 문단으로 큰 공간을 차지하고 있습니다. 여기서 말하는 "문단Parahraph"이란 블록 레벨 요소가 기본적으로 가지고 있는 줄이 바뀌는 특성을 뜻합니다. 블록 레벨 요소는 새로운 줄에서 시작하기 때문에 '세로'로 쌓이는 형태를 보입니다. See the Pen block_1 by leeyanggoo (@leeyanggoo) on CodePen. 위의 코드는 "블록 레벨 요소는 줄이 바뀌는 특성을 가지고 있습니다."라는 하나의 문장을 블록 레벨 요소 중 하나인 태그를 이용해 세 문단으로 나눈 것입니다. 블록 레벨 요소가 차지하는 "문단의 공간"이란 부모 요소의 좌우 전체를 차지하여 블록을 만든다는..