qqqwe

반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 그만큼 소스 코드도 깔끔해지고 프로그램 실행도 더 깔끔해질 것 입니다. for 문 자바스크립트에서 가장 많이 사용하는 반복문 for 문입니다. for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할때 편리하게 사용 됩니다. for 문에서는 몇 번 반복했는지 기록 하기 위해 카운터를 사용하고 for 문의 첫 번째 항에서 카운터 변수를 지정합니다. for ( 초깃값; 조건; 증가식) { ... } 1. 초깃값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나 1부터..

이미지 출처 기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시맨틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 다양한 구조 관련 요소가 새롭게 추가되었습니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 (~)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1. HTML 문서의 푸터 영역을 의미하는 태그로 섹션..

이미지 출처 선택자 선택자란 CSS로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 디는 부분을 말합니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문잘 시작합니다. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 ..

See the Pen Tail Animation by Kimdohyun2002 (@Kimdohyun2002) on CodePen. 코드팬이라는 사이트에서 CSS로 애니메이션을 한번 만들어 보았습니다 !

연산자 '3 + 5', '3 < 5' 등과 같이 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 연산자의 종류에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자 등이 있습니다. (이 글에선 비트, 삼향 연산자의 설명을 하지 않습니다.) 산술 연산자 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 곱하기 연산을 할 때 사용합니다. * 빼기 연산을 할 때 사용합니다 / 몫을 구 할 때 사용 합니다. % 나머지를 구할 때 사용 합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자의 종류 설명 = num = 1은 우변의 1값을 좌변의 ..

CSS란? CSS는 Cascading Style Sheets의 약자로 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. HTML이 몸을 담당한다면 CSS는 몸을 꾸미는 옷, 화장과 같은 일을 담당 한다고 할 수 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법입니다. 스타일은 css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 인라인 스타일 인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술합니다. 인라인 스타..

자료형이란? 사람은 1, 10, 100을 보면 숫자라는 것을 알 수 있고, '자바스크립트'를 보았을 때는 문자열이라는 것을 알 수 있습니다. 하지만 컴퓨터에게 이것은 숫자이니 더하거나 빼야하고, 저것은 문자열이니 더하거나 뺄 수 없다는 것을 따로 알려주어야 합니다. 이렇게 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 따로 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자바스크립트의 자료형은 크게 '원시 유형과 객체'로 나뉘어집니다. 원시 유형 하나의 값만 저장하는 자료형 숫자형 모든 프로그램에서 가장 기본이 되는 자료형 C나 자바 같은 프로그래밍 언어에서는 정수와 실수를 구별하고 정수의 크기에 따라 다른 자료형을 사용하지만 자바스크립트에서는 정수와 실수를 함께 묶어 '숫자형'으로..

See the Pen 연산자 by Kimdohyun2002 (@Kimdohyun2002) on CodePen.

이미지 출처 시멘틱 마크업 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다. 사용 방법 헤더/푸터에 와 사용한다. 메인 컨텐츠에 과 사용한다. 독립적인 컨텐츠에 사용한다. 최상위 제목으로 사용한다. 순서가 없는 목록으로 과 사용한다. 내비게이션에 사용한다. 이런 식으로 태그가 가지고 있는 의미에 맞게 사용 한다. 필요성 SEO(검색엔진 최적화) 적절한 태그의 사용으로 키워드에 맞는 웹사이트를 구성하여, 검색 결과 상위에 나올 수 있도록 한다. 웹 접근성 (Web ..

블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 주요 블록 요소 ~ 특징 모든 인라인 요소를 포함할 수 있고 또다른 블록 요소도 일부 포함이 가능하다. 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. width, height, margin, padding등을 사용하여 형태를 변형시켜 레이아웃을 수정할 수 있다. 블록 요소 다음으로는 줄바꿈이 이루어진다. 인라인 요소(Inline-Elements) 인라인 요소는 마크업을 할 때 가로로 정렬됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 주요 인라인 요소 특징 인라인 요소는 항상 블록 요소안에 포함되어 있다. 인라인 ..