recoding;

if문if~else문if~if else~else문  생략 switch 조건문let input = 32;switch (input % 2) { case 0: console.log("짝수입니다."); break; case 1: console.log("홀수입니다."); break;} * break 키워드를 사용하지 않는 switch조건문let date = new Date();switch (date.getMonth()+1){ //getMonth()는 0부터 가져오기 때문에 +1 해준다. case 12: case 1: case 2: console.log("겨울입니다."); break; case 3: case 4: ca..

HTML과 XML페이지를 위한 프로그래밍 인터페이스(API)로 문서의 구조도와 함께 문서에 포함된 요소를 읽고 조작할 수 있는 메서드를 제공한다. DOM을 이용해서 요소를 이름이나 속성으로 찾고 요소나 요소의 콘텐츠를 추가, 수정, 삭제할 수 있다. 1.1 노드 트리DOM은 노드 컬렉션이다* 요소 노드* 속성 노드* 텍스트 노드페이지 내의 각 요소를 노드라고 부른다. DOM을 나무로 본다면 각 노드는 더 멀리 있는 나뭇가지를 포함할 수 있는 개별 나뭇가지이다. DOM의 노드트리에서는 요소, 요소의 속성, 요소의 콘텐츠 모두가 노드이다. 1.2 DOM 노드에 접근하기document 객체에는 문서의 정보를 포함하는 기본 제공 속성들이 있다. 속성과 메서드를 함꼐 연결하고 . 으로 구분해서 필요한 요소를 찾아..

비교 연산자== 같다.=== 일치한다(값이 같고 데이터 형식도 같다). 같다 vs 일치하다alert("5" == 5); //'true', 둘 다 '5'이다.alert("5" === 5); //'false', 둘 다 '5'이지만, 같은 데이터 형식은 아니다.alert("5" != 5); //'false', 둘 다 '5'니까alert("5" !== 5); //'true', 같은 데이터 형식이 아니다. 내장 함수* alert(), confirm(), prompt() : 브라우저 단계의 대화 상자를 표시한다.* Date() : 현재의 날짜와 시간을 반환한다.* parseInt("123") : 숫자를 포함한 문자열 데이터 형식을 인수로 받아서 숫자 데이터 형식으로 바꾼다. 문자열은 인수로 함수에 전달된다.* se..

각 기기용 레이아웃 만들기 모바일용 레이아웃 구조 만들기 카페 소개 오시는 길 이 달의 추천 카페 소개 영업 시간 : 오전 9시 ~ 밤 10시 휴무 : 매주 수요일 (수요일이 공휴일일 경우 수요일 영업, 다음날 휴무) ..

웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준 = '그리드 시스템'그리드 시스템: 화면을 몇개의 칼럼으로 나누어 요소들을 배치하는 것그리드 시스템은 화면 너비를 특정 값으로 고정해놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있다.= pc용 사이트만 만들때는 이 방법이 편리반면어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 됨.-> 가변 그리드 레이아웃  애완견 종류 ..

반응형 웹 디자인데스크톱 PC용 브라우저를 기본으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨고 표시되는 문제가 발생 -> 모바일 기기의 특성을 활용할 수 있도록 모바일 사이트를 별도로 제작하기 시작함. -> 기존의 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시할 수 있는 방법 ??=> 반응형 웹 디자인 여러 기기에 맞는 사이트를 별도로 제작하지 않고 앞의 사이트처럼 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 = 반응형 웹 디자인 반응형 웹의 장단점1. 모든 스마트 기기에서 접속 가능2. 가로 모드에 맞추어 레이아웃 변경 가능3. 사이트 유지,관리 용이 => 사이트가 하나뿐이기 때문에 유지, 관리가 쉬움. 뷰포트스마트폰 화..

사용자 동작에 반응하는 가상 클래스사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등의 동작을 할 때 스타일이 바뀌도록 만들려면 -> 가상 클래스 선택자 사용. 1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용5. :focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 UI 요소 상태에 따른 가상 클래스사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자 사용UI(User In..

HTML4 vs HTML5HTML4에서는 화면 구성하는 역할을 대부분 태그가 맡았고 수많은 태그가 다시 id 속성으로 구분됨.그런데 그 태그들의 이름에 제약이 없었기 때문에 개발자 개인의 생각에 따라 지정되었음.id="header"나 id="content"를 보고 '이 부분에는 헤더가 있겠구나', '이 부분에는 사이트 내용이 있겠구나' 라고 추측 가능=> 헤더나 사이트 내용, 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속해 놓는다면?--------> HTML5에서는 웹 문서 레이아웃을 표준화하는 태그들이 새롭게 추가됨. 이것이 "시맨틱 태그" 왜 시맨틱 태그로 레이아웃을 만들어야 할까?-시맨틱 태그로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있음...

사이트 제목 사이드바 국회의원은 국회에서 직무상 행한 발언과 표결에 관하여 국회외에서 책임을 지지 아니한다. 본문 재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을 해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장..

블록 레벨 요소와 인라인 레벨 요소블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소.인라인 레벨(inline-level)요소는 줄을 차지하지 않는 요소.  종류해당 태그블록 레벨 태그, ~, , , , , , , , , 인라인 레벨 태그, , , , , , , , ,   박스 모델스타일 시트에서 하나의 박스 형태를 가지는 요소를 박스 모델 요소라고 한다. width, height => 콘텐츠 영역의 크기 display속성 -> 화면 배치 방법 결정하기display 속성값들속성 값설명inherit상위 요소의 display 속성을 상속받습니다.table블록 레벨의 표로 만듭니다.inline-table인라인 레벨의 표로 만듭니다( 태그 사용한 것처럼).ta..