100S00

Type 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다. 예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다. p { color: blue; } Id 선택자 아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어 다음은 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다. #abc { color: red; } Class 선택자 클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(elemen..

마무리 예제 따라하기 마무리 예제 1 const arr 에 있는 배열을 for문을 이용하여 반복 시키고 if문으로 10보다 큰 값이라는 조건을 부여한다. const arr = [1,3,5,7,9,11,13,15,17,19] //배열을 아용하여 숫자를 저장한다. for(i=0 ; i 10) //if문으로 예제에 맞는 조건을 추가한다. document.write(arr) //결과 값 출력. } 마무리 예제 2 prompt() 함수는 사용자에게 윈도우 창을 띄워 데이터를 입력받을 수 있는 함수입니다. for문을 이용해 입력한 값이 조건에 맞으면 그 조건까지 계속 출력시키지만 if문으로 짝수만 출력하게 설정합니다. 그 후 sum 은 1부터 i를 더한 값이 나오도록 합니다. See the Pen Untitled ..

데이터 저장하기 01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. var x = 100; //변수 X에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저정함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 결과 값 100 200 "javascript" 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할수도 있지만 변경도 가능하다. let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.lo..

CSS Float 사용방법 정리 CSS Float는 요소를 좌우 방향으로 이동시켜 다른 요소들과의 배치를 조정하는 속성입니다. 이를 이용하면 웹페이지의 레이아웃을 구성하거나 이미지와 텍스트를 함께 배치하는 등 다양한 디자인을 구현할 수 있습니다. Float 속성 사용 방법 Float 속성은 CSS의 속성 중 하나로, float 값을 이용하여 설정합니다. 일반적으로 left 또는 right 값을 사용하며, none은 float 속성을 취소합니다. /* 요소를 왼쪽으로 이동시키는 예시 */ .box { float: left; } /* 요소를 오른쪽으로 이동시키는 예시 */ .box { float: right; } /* float 속성을 취소하는 예시 */ .box { float: none; } 주의사항 Fl..

조건문 if문 자바스크립트에서는 if문을 사용하여 조건문을 작성할 수 있습니다. 기본적인 if-else문의 형태는 아래와 같습니다. if (조건식) { // 조건식이 참일 경우 실행되는 코드 블록 } else { // 조건식이 거짓일 경우 실행되는 코드 블록 } 또한, else if문을 사용하여 여러 개의 조건식을 체크할 수 있습니다. if (조건식1) { // 조건식1이 참일 경우 실행되는 코드 블록 } else if (조건식2) { // 조건식1이 거짓이고, 조건식2가 참일 경우 실행되는 코드 블록 } else { // 조건식1과 조건식2가 모두 거짓일 경우 실행되는 코드 블록 } 위 예제의 코드는 사용자가 입력한 값에 따라 다른 결과를 출력하는 예제입니다. 입력한 값이 100일 경우 "당신은 백점짜..

반복문 for문 자바스크립트에서 가장 많이 사용하는 반복문이며, for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for(초기값;조건; 증가식;){..} 초기값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화 합니다. 초기값은 0이나1부터 시작합니다 조건: 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for문에 있는 명령을 반복 할 수있습니다. 증가식: 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다. ps. for문에서 반복 횟수를 알기 위해 배열의 갯수를 알아야 할 때는 length를 사용합니다. console.log(x.leng..

태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 태그를 사용합니다. 주요 콘텐츠와 단독으로 콘텐츠를 표현하고 싶다면,요소를 사용하는 것이 적절합니다. 섹션과 관련된 태그(Section Related Tag) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 헤더 영역 주제별 영역 내용 독립된 주제 영역 내용 사이드 영역 내용 푸터 영역 섹션 레이아웃 예제

연산자 01. 산술 연산자 산술연산자들의 기본적인 용도는 덧셈을 할 때 입니다. +연산자 산술 연산자 중 ' +'연산자는 '+'를 기준으로 좌변과 우변에 숫자가 아닌 문자나 변수등이 오면 더하기 연산이 아닌 연결 연산을 합니다. var subject = 'css'; var score = 100; console.log(subject + ;과목 성적은 ' score'); //css과목 성적은 100 %연산자 %(나머지) 연산자는 '반복적인' 숫자 구간의 패턴' 조건문을 이용한 ' 짝 - 홀수 판단, 배수 판단' 등의 식을 만드는데 사용합니다. //var dividend = 0 //var dividend = 1 //var dividend = 2 //var dividend = 3 //var dividend = ..

CSS id & class의 차이 id 속성 id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다. class 속성 id 속성과 다르게 여러 번 반복해서 사용할 수 있습니다. 반복적으로 쓰이는 유형들을 유형별로 동일한 class로 분류하여 쉽게 관리할 수 있습니다. id 속성은 태그에 유일한 이름을 붙이고 싶을 때 씁니다. class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 씁니다. .container { width: 1200px; height: inherit; background-color: rgba(0, 0, 0, 0.2); margin: 0 auto; 수업시간에서 사용한 class = "container" 가 예시 입니다. css에서의 차이 CSS에서 id 속성..

See the Pen 애니메이션 by hyeonbeen97 (@hyeonbeen97) on CodePen.