Front-End64 [JavaScript] 화면에 데이터를 출력하는 방법 4가지 화면에 데이터를 출력하는 방법 4가지 1) innerHTML 속성(property)을 이용하는 방법 2) console.log() 메서드를 이용하는 방법 3) document.write() 메서드를 이용하는 방법 4) window.alert() 메서드를 이용하는 방법 1) innerHTML 속성(property)을 이용하는 방법 일반적으로 자바스크립트로 HTML요소에 접근할 때는 document.getElementById(id) 메서드를 이용. 여기서 HTML요소의 id 속성(attribute)을 찾아서 innerHTML 속성을 통해 콘텐츠의 내용을 적용시켜 줌 2) console.log() 메서드를 이용하는 방법 console.log()는 주로 디버깅 시에 필요한 정보를 출력할 때 사용. ==> 전문 .. 2021. 11. 10. [JavaScript] 자바스크립트의 특징 자바스크립트(JavaScript) - 자바스크립트는 HTML 페이지와 어울어져서 웹 페이지 내의 여러 가지 요소를 다이나믹하게 제어하는 기술을 말함. - 자바스크립트는 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때 그 동작에 대응하여 반응이 일어날 수 있도록 해 주는 언어. - 자바스크립트는 웹 브라우저에서 사용하기 위해서 만들어진 프로그래밍 언어. 이 언어는 1990년대부터 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위해서 사용해 왔음. 기존에는 브라우저에서만 사용해 왔던 언어인데, 이제는 단순히 웹 페이지에서만 국한되지 않고 서버 쪽에서도 사용되는 언어로 발전하고 있음. 서버 쪽 주요 언어 - JSP, ASP, PHP, Spring 등등 클라이언트 측 주요 언어 - HTML :.. 2021. 11. 10. [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) 마우스 오버/hover 마우스 커서를 올렸을때(hover) effect를 주는 방법 지난 포스팅에서 다뤘던 opacity 속성과 함께 예문 작성) 마우스 커서가 안 보이는데, 커서를 올릴 때마다 이미지가 변화되는 것을 볼 수 있다. 2021. 11. 10. [CSS] opacity 속성(요소를 투명하게 만드는 속성) opacity 속성 /* 문법 */ opacity: number /*0.0부터 1.0까지의 수를 넣음*/ 숫자가 작을수록 투명해짐 pacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다. 원본 사진 이렇게 투명해 진 것을 볼 수 있다. 2021. 11. 10. [CSS] 브라우저 업체별 접두어(vendor prefix) CSS3는 모듈들이 많고 표준 규약이 아직 완성이 되지 않은 부분이 많이 있음. 따라서 현재도 계속적으로 개발이 되고 있는 상황임. 하지만 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원이 되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여서 브라우저 별로 구분을 해 주어야 함. * -webkit- : 크롬, 사파리 브라우저 * -moz- : 모질라, 파이어폭스 브라우저 * -o- : 오페라 브라우저 * -ms- : 인터넷 익스플로러 브라우저 접두어를 사용하는 이유 css에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것 표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것 사용 예) 2021. 11. 10. [CSS] list-style-type 속성 https://jinnnkcoding.tistory.com/104 [HTML] 목록 태그(ul, ol, li 태그) 목록태그 * ul 태그 : 순서가 없는(정렬이 되지 않은) 목록 태그 * ol(ordered list) 태그 : 순서가 있는(정렬이 된) 목록 태그. * li 태그 : 리스트 목록 태그는, type : disc / circle / square.. jinnnkcoding.tistory.com 목록태그의 스타일을 변경하는 list-style-type 속성 CSS에서 사용할 수 있는 list-style 속성은 다음과 같음 . 1. list-style-type 2. list-style-image 3. list-style-position list-style 속성 항목 모양의 종류, 위치, 항목에 넣.. 2021. 11. 10. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
