그럼에도 불구하고

오늘은 그러데이션 효과에 대해 알아보자 [ 그러데이션 효과 ] 웹 문서의 배경을 꾸밀 때 배경색이나 이미지를 사용하는 것 외에 그러데이션 효과로 색 다른 느낌을 줄 수 있다. [ 선형 그러데이션 ] 선형 그러데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 함수 : linear-gradient linear-gradient( to 방향 / 각도, 색상 중지점, [색상 중지점.....]); [ 방향 ] 그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 여기서 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. ex) 1..

day/ night mode를 만들어보자 [ 조건 ] 1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자 2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 3. 해당 모드에 맞는 버튼의 value를 변경하자 HTML 삽입 미리보기할 수 없는 소스 code day mode / night mode 핵심 [ element.setAttribute() ] Syntax : element.setAttribute(name, value) Parameters Parameter 설명 name 필수요건 속성의 이름 value 필수요건 새로운 속성의 값 ※ 주의사항 요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 ..

오늘은 캐스케이딩과 스타일 우선순위에 대해 알아보자 [ 캐스케이딩 ] CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이다. 스타일이 충돌되지 않게 하는 방법으로는 다음 2가지 방법이 있다. 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 상속: 태그의 포함 관계에 따라 부모 요소..

자주 사용하는 form 태그와 input 태그의 타입을 정리해보자 [ form에서 사용하는 태그 ] 종류 설명 폼의 시작과 끝을 만든다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. [ input 태그의 유형 ] 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 password 비밀번호를 입력할 수 있는 필드 생성 search 검색할 때 입력하는 필드 생성 url URL 주소를 입력할 수 있는 필드 생성 email 이메일 주소를 입력할 수 있는 필드 생성 tel 전화번호를 입력할 수 있는 필드 생성 checkbox 주어..

오늘은 데이터 타입에 대해 알아보자 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 구분 데이터 타입 설명 원시타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에 추가된 ..

오늘은 표현식과 문에 대해 알아보자 어떻게 보면 당연할 수도 있다고 생각해 간과할 수 있는 내용이지만, 굉장히 중요하다고 생각한다. [ 값 ] 값(value)은 식(표현식 expression)이 평가(evaluation)되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 다음 예제를 살펴보자. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 달리 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자로 해석하면 'A'이다. 변수는 하나의 값을 저장하기 위해 확보한..

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언에 의해 확보된 메모리 공간은 확보가 해제(release)되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다. 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되기 이전까지 var 키워드는 자바스크립트에서 변수를 ..

오늘은 JavaScript의 변수에 대해 알아보자. [ 변수란 무엇인가? ] 애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력(input) 받아 처리하고, 그 결과를 출력(output)하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수란 무엇인지 그리고 왜 필요한지 살펴보자. 10 + 20 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다. 먼저 사람은 위 식을 어떻게 계산하는지 생각해보자. [ 사람 ] 사람이 위 식을 계산하려면 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10 + 20이라는 식의 의미도 해석할 수 있어야 한다. 사람이 10 + 20이라는 식의 의미를 해석하면 + 기호의 의미대로 덧셈을 ..

오늘은 브레이크 포인트를 이용하여 반응형 페이지를 만들어보자 웹을 만들 때는 웹을 이용하는 기기의 사이즈에 맞춰서 웹사이트를 배치해야 한다. 장비( 스크린: 모니터, 프린트, 빔프로젝트,. 스크린리더기)등의 가로 사이즈에 맞춰서 웹사이트를 배치해야한다. 즉, 브레이크 포인트를 사용하여 모니터 가로 너비 기준을 잡아야 한다. [ 브레이크 포인트 사용 방법 ] HTML 삽입 미리보기할 수 없는 소스 @media screen and (max-width:1200px){ } 위와 같이 사용하면 되는데 max-width의 부분이 사이트의 크기를 나타내며 min-width와 같이 최소에 초점을 맞춰 사용할 수 있다. 혹은, @mediascreen and (min-width:760px) and (max-width:11..

여러 가지 shadow를 이용해보자 HTML HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

가로 / 세로 메뉴바를 만들어보자 [ 가로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 가로 상단 메뉴바 (모든 메뉴 나오게) ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 세로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스