전체 글49 Java Script-기본 형식 및 적용 방법 1. 자바스크립트의 기본 형식 2. 기본 규칙 2-1. 하나의 실행문이 끝나면 마지막에 세미콜론(;)을 붙여 줍니다. 세미콜론(;)을 붙여 주지 않아도 상관은 없으나, 하나의 실행문을 확인하고 넘어가는 차원에서 세미콜론을(;)을 붙여서 코딩하는 것이 좋습니다. var num=5; document.write(num); 2-2. 대소문자를 구분합니다. var num=5; document.write(num); document.write(Num); 2-3. 가독성을 위해 들여 쓰기를 사용합니다. var avgDistance=function() { var speed=distance*time; } 2-4. 주석(comment) 처리 // 한 줄 주석 처리 방법입니다. /* 여러 줄 주석 처리 방법입니다. */ 3... 2020. 9. 7. Java Script-정의 및 특징 1. 자바스크립트란? 우리가 매일 접속하는 웹사이트는 크게 3가지 HTML, CSS, Javascript 요소로 구성된다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 객체지향 스크립트 언어로 웹페이지의 동작을 담당해 사용자와 상호작용할 수 있도록 돕는다. 즉, 자바스크립트는 웹을 풍부하게 만들어주는 작고 가벼운 언어라고 말할 수 있다. 2. 자바스크립트의 특징 2-1. 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 서버가 아닌 사용자의 컴퓨터에서 실행된다. 즉 클라이언트 사이드 언어이다. 이메일을 보내거나 소셜 네트워크에 로그인하는 등의 작업처럼 서버에 어떤 요청을 하기 위해서는 파이썬 같은 서버 사이드 언어를 사용해야 한다. 2-.. 2020. 9. 7. CSS-레이아웃Ⅲ: Flex box Layout (플렉스 박스) [ Flexbox ] Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다. div 요소는 block 요소이므로 수직 정렬된다. 1 2 3 4 5 ㅁㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄹ 이를 수평 정렬하려면 자식 요소(flex-item)를 inline-block으로 지정하거나 float 프로퍼티를 지정해야 하는데 각 자식 요소의 너비를 %로 지.. 2020. 8. 29. CSS-반응형 레이아웃 (미디어쿼리) 1. 반응형 웹 디자인 Responsive Web Design 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 보통 웹사이트가 축소되어 가로 스크롤 없이 콘텐츠를 볼 수 있으나 글자가 너무 작아지기 때문이다. 데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다. 즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 1-1. viewport meta tag vi.. 2020. 8. 27. CSS-레이아웃Ⅱ: float + position 어떤 레이아웃에는 float을 쓰고, 어떤 레이아웃에는 position을 써야한다는 법칙이 있는 것은 아닙니다. 속성을 정확히 알고 구현하면 그것이 정답입니다. - 밑에 예제는 임의적으로 id명과 class명을 넣었습니다. F12를 통해 확인해주세요. float 방식 - sidemenu는 float: left;하고, content는 float: right; - float의 해제(clear)가 필요함 header container position: relative; float: left; width: 100%; sidemenu float: left; content position: absolute; banner float: right; footer clear:both 2020. 8. 27. 이전 1 2 3 4 5 6 ··· 10 다음
