글

프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

-
이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v
댓글 쓰기
자세한 내용 보기

자바스크립트 로그인 폼 만들기

-
이미지
로그인 폼을 만들어 본다. 아이디 와 패스워드를 입력하는 필드가 있고, 서버 전송을 위한 submit 버튼이 있다. 소스를 보자. < body >   < form action = "#" >     < fieldset >       < legend > 로그인 </ legend >         < input type = "text" placeholder = "id" name = "input_id" >         < br >         < input type = "password"   placeholder = "password" name = "input_pw" >         < input type = "submit" value = "login" >     </ fieldset >   </ form >     < script >     //forms 에 이벤트 리스너를 등록한다.     //submit 이벤트가 발생시 리스너 함수를 실행한다.     document . forms [ 0 ]. addEventListener ( "submit" , function (){           const id = document . forms [ 0 ]. input_id ;       // console.log(`${"id is" + id.value}`);       if ( id . value . trim ()== "" ){ //입력된 값이 없다면         alert ( "id 를 입력하세요" );         id . focus ();
댓글 쓰기
자세한 내용 보기

자바스크립트 document.form 이란?

-
이미지
document.form  은 자바스크립트에서 문서에 포함된 모든 <form> 의 HTMLcollection 을 반환하는 속성 이다. 소스를 보자. < h1 > The Document Object </ h1 > < h2 > The forms Property </ h2 >   < p >< form id = "myCarForm" >   Favorite Car: < input type = "text" name = "fname" value = "Volvo" >   </ form ></ p >   < p >< form id = "myColorForm" >   Favorite Color: < input type = "text" name = "favcolor" value = "Blue" >   </ form ></ p >   < p > The name of the form elements in the document are: </ p >   < p id = "demo" ></ p > < script >   const forms = document . forms ;   let text = "" ;   for ( let i = 0 ; i < forms . length ; i ++) {     text +=   forms [ i ]. id + "<br>" ;   }   document . getElementById ( "demo" ). innerHTML = text ; </ script >
댓글 쓰기
자세한 내용 보기

자바스크립트 이벤트리스너 등록하기

-
이미지
  자바스크립트 에서 이벤트 처리 하는 방법 중 하나인 이벤트리스너 등록 편이다. 코드를 보자.   < button > Click </ button >   < script >       const button = document . querySelector ( "button" );     button . addEventListener ( "click" , alertPopup );     function alertPopup (){       alert ( "button click" );     }   </ script > H5 요소로 버튼을 만들었고, 자바스크립트에서는 버튼을 선택자로 접근하였다. 그리고 하기 Syntax 로 이벤트가 등록된다.  요소.addEventListner( "이벤트 타입" , 이벤트 처리 함수 ) "이벤트 타입" 에는 on을 제거한 이벤트 명을 적는다. 앞선 포스팅에서 HTML 속성과 요소의 속성으로 이벤트를 등록할때는 on이벤트 명이였다. 자바스크립트 이벤트 만들기 - 인라인 방식 자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기 그리고, 함수는 () 괄호를 넣지 않도록 주의해야 한다. 이벤트리스너를 활용해서 더블클릭 이벤트를 구현하면 하기와 같다.     const doubleButton = document . querySelector ( "button" );     doubleButton . addEventListener ( "dblclick" , alertPopup );     function alertPopup (){       alert ( "double button click" );     } 그러면 이벤트 명을 모두 외워야 하나? 그렇지 않다. 필요한 이벤트가 있다면 웹 검색을 통해서 찾으면 된다. 버튼에 더블이벤
댓글 쓰기
자세한 내용 보기

자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기

-
이미지
  자바스크립트 에서 이벤트를 등록하는 방법 중 하나는 요소노드의 속성에 함수를 등록하는 방식이다. 하기 Syntax 에서 HTML 요소에 속성을 주어서 처리하는 방식은 지난시간 보았고 이번 시간 소개되는 방식이 바로 자바스크립트에서 요소노드에 직접 이벤트 함수를 등록하는 방식이다. 둘다 큰 범주에서는 동일하다. 코드를 보자.   < button > Click </ button >   < script >     const button = document . querySelector ( "button" );     button . onclick = function (){       alert ( "click" );     }      </ script > document.querySelector()를 사용해서 버튼 요소를 가져온다. 가져온 버튼요소의 이벤트 속성에 함수를 등록한다. 버튼 클릭이 발생하면 해당 함수가 실행되는 구조이다,
댓글 쓰기
자세한 내용 보기

자바스크립트 이벤트 만들기 - 인라인 방식

-
이미지
  자바스크립트에서 이벤트를 만드는 방법 중 하나는 바로 HMTL요소 내 이벤트 속성값을 활용하는 방법 이다 코드를 본다.   < p > 버튼 이벤트 입니다 </ p >   < button onclick = " clickButton ()" > Click! </ button >   < script >     function clickButton (){       alert ( "Clicked" )     }   </ script >   1. HTML button 요소에 클릭시 등록된 함수를 실행시키는   onclick 속성을 추가 한다. 2. 자바스크립트 코드에서는 onclick 이벤트가 발생시 수행할 함수를 만든다. 해당 코드에서는 팝업창을 띄울 수 있도록 구현한다.  브라우저에서 확인한 결과는 위와 같다. 
댓글 쓰기
자세한 내용 보기

자바스크립트 HTML 요소 접근 querySelector() 함수 사용하기

-
이미지
  querySelector() 함수를 사용해서 HTML요소에 접근 해본다 querySelector()함수의 인자는 CSS선택자 가 들어간다. 코드를 보자.   < h1 > The Document Object </ h1 >   < h2 class = "text" > The querySelector() Method </ h2 >   < h3 > Add a background color to the first p element </ h3 >   < p > This is first p element </ p >   < p > This is second p element </ p >   < script >     const one = document . querySelector ( "p" )     one . style . background = "red" ;     const two = document . querySelector ( ".text" );     two . style . background = "green" ;   </ script > 핵심은 document.querySelector() 메서드 이다.  반환 값으로 해당 요소 하나만을 반환한다.  위코드에서는  요소.style.속성  으로 스타일을 지정하고 있다. document.querySelector() 메서드 의 인자로는 CSS 선택자 가 온다. 추가로, querySelectorAll() 메서도 도 알아보자. 메서드 이름에서 들어나듯 반환값이 하나가 아니고 여러개임을 유추할 수 있다. 코드를 보자.    < h1 class = "text" > The Document Object </ h1 >   < h2 class =
댓글 쓰기
자세한 내용 보기

자바스크립트로 HTML요소 콘텐츠 텍스트 수정하기 (innerHTML 속성)

-
이미지
요소에 접근한 뒤 콘텐츠의 텍스트 를 반환하고 수정하는 속성에는 innerHTML 이 있다. textContent , innerText 와 다른 점은 콘텐츠에 포함된 태그값도 텍스트와 같이 반환하며, 수정 시 태그도 같이 반영이 된다.  코드를 보자.   < p > Hi, Here is innerHTML test.     < span style = " display:none" > 테스트 입니다. </ span >   </ p >   < script >     let text = document . getElementsByTagName ( "p" );     console . log ( text );     console . log ( `text is ${ text [ 0 ]. innerHTML } ` );   </ script > document.getElementsByTagName() 으로 HTMLCollection 객체의 첫번째 p 요소에 접근할 수 있다. innerHTML 로 반환한 값을 콘솔로그 로 찍어보면 text is Hi, Here is innerHTML test.  <span style="display:none">테스트 입니다.</span> 위와 같다. textContent , innerText 와는 다르게 태그도 같이 출력이 된다. 그럼, 하기 코드를 추가한다면,     text [ 0 ]. innerHTML = "<strong>innerHTML</strong> test" ; 브라우저 화면에 나오는 결과는 태그가 적용된 콘텐츠가 출력된다. innerHTML  test 이 역시 textContent , innerText 와는 다른 점이다. textContent , innerText 은 태그가 그냥 텍스트로 출력이 된다. 태그 및 텍스트를 같이 수정할때는 in
댓글 쓰기
자세한 내용 보기

HTML DOM 이란?

-
이미지
HTML DOM 이란 Document Object Model 의 약자로 웹 페이지가 로딩될때 브라우져는 HTML을 DOM 으로 만든다. HTML 문서를 객체로 만든다. DOM 으로 만들어진 객체 덕분에 자바스크립트는 HTML document의 모든 요소에 접근 및 수정을 할 수 있게 된다. Dom 은 이런식의 구조를 가진다. DOM 트리 라고 부른다. 위 객체 구조는 하기 HTML문서를 객체한 한 것이다. <! DOCTYPE html > < html > < head > >   < title > My title </ title > </ head > < body >   < a href = "My link" ></ a >   < h1 > My header </ h1 > </ body > </ html > 더 복잡은 HTML문서 역시  DOM 트리로 생성시 동일한 구조를 가진다. 이것이 바로 DOM 이다. HTML을 자바스크립트가 접근 할수 있도록 객체화 한 것! 자바스크립트 는 자체적으로 객체를 지원한다. 이를 내장 객체라고 한다. Math, Array, String 등등... 이미 여러 기능구현이 되어있는 객체들이다.  이 외에 웹 브라우저에서 제공되는 객체를 브라우저 객체모델(BOM)이라고 하며. 여기에 DOM이 포함되어 있다. BOM의 최상위 객체는 window 이다. DOM 트리 최상단의 document 역시 바로 window의 하부 객체 이다.  코드상으로는 이렇게 접근이 가능하다.   < h1 > My header </ h1 >   < script >     const temp = window . document . getElementsByTagName ( "h1" );     console . log ( temp [ 0 ]. inne
댓글 쓰기
자세한 내용 보기

자바스크립트 Dom 요소 classList

-
이미지
  자바스크립트를 사용해서 동적으로 HTML요소에 class 속성을 추가 또는 제거 할 수 있다. 코드를 보자. 이런 스타일이 정의 되어있고, < style >       .mystyle {       background-color : coral ;       padding : 20px ;     } </ style > 하기 코드에서는 해당 스타일을 P 요소에 적용하고 있다. < body >   < h1 > The DomToken Object </ h1 >   < h2 > The add() Method </ h2 >   < button onclick = " myFunction ()" > Add </ button >   < p > Click "Add" to add the "myStyle" class to myDiv. </ p >   < div id = "myDiv" >     < p > I am myDiv. </ p >   </ div >   < script >     function myFunction (){       const list = document . getElementById ( "myDiv" ). classList ;       console . log ( list );       list . add ( "mystyle" );     }   </ script > 핵심은 Dom요소.classList 란 속성이다.   이 속성은 반환값으로 DomTokenList 를 가진다. 조금더 풀어쓰면 요소의 CSS클래스 네임을 반환한다. 손쉽게 반환되는 요소에 class속성을 추가 할수 있다고 생각하자.  위 코드에서 P요소는 처음에는 스타일이 적용되어 있지 않다
댓글 쓰기
자세한 내용 보기

자바스크립트로 HTML요소 콘텐츠 텍스트 수정하기 (innerText 속성)

-
이미지
  자바스크립트로 HTML 요소에 접근뒤 해당 요소의 콘텐츠 텍스트를 반환 하거나 수정하는 속성 중 하나는 innerText 이다. 지난 시간 살펴본 textContent 속성과 다른점은 화면에 보이는 텍스트 만 반환 한다는 점. 코드를 보자.   < h1 > Hi, Here is innerText test.     < span style = " display:none" > 테스트 입니다. </ span >   </ h1 >   < script >     let text = document . getElementsByTagName ( "h1" );     console . log ( text );     console . log ( `text is ${ text [ 0 ]. innerText } ` );   </ script > h1 요소의 구성은 textContent 포스팅 과 동일하다. ㅇdocument.getElementByTagName() 반환값이 HTMLcollection 타입이므로 첫번째 인덱스의 h1 요소에 접근한뒤 innerText 속성을 불러본다. 결과 값은, text is Hi, Here is innerText test.  이다. 화면에 보이는 텍스트 콘텐츠 만 반환한다. 그리고, 해당 텍스트를 하기처럼 수정할 수도 있다.   text [ 0 ]. textContent = "innerText test" ; innerText test 브라우저에 수정된 결과가 나온다. innerText 속성은 화면에 보이는 텍스트 만 요소로 부터 반환 및 수정이 가능하다.
댓글 쓰기
자세한 내용 보기

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

-
이미지
 구글 블로그에서 복사 붙여넣기로 이미지 삽입이 가능한지 테스트 해보았습니다. 1. 윈도우를 사용하신다면,    윈도우키+Shift+S 로 화면캡쳐 한 후, 구글 블로그 글쓰기 창에 CTR+V 로 붙여넣기 하면    하기 처럼 이미지 가 복사 됩니다 복사된 이미지를 마우스로 선택하면 하기처럼 하단에 서브메뉴가 나옵니다 복사 붙여넣기 한 이미지 좌측 3개는 이미지 정렬 메뉴 이며, 4번째는 이미지 크기 조정 메뉴 입니다. 해당 메뉴를 사용해도 되고, 위 처럼 마우스 클릭시 나타난 작은 네모박스 등을 마우스 드래그로 크기를 직접 조정해도 됩니다. 하지만 주로 업로드 실패 에러가 뜹니다. 이는 공식적으로 구글 블로그에서 이미지 복사 붙여넣기 기능을 지원하지 않는 다는것을 의미 합니다.  이미지 삽입은 공식적으로는 상단 이미지 삽입 아이콘을 통해서  이루어져야 합니다.  구글 블로그는 티스토리 에 비해서 이런 점들이 불편한거 같습니다. 블로그에 안착하면서 하나씩 개선 방법을 찾아봐야 겠습니다. 감사합니다.
자세한 내용 보기

HTML 페이지 기본 구성.(HTML Page Structure)

-
이미지
HTML 기본 구성. HTML 문서는 기본적으로 <html>요소 사이에 <head><body> 를 담고 있다. 이게 가장 큰 구조 이다. 먼저 <head></head> 요소는 브라우저에 나타낼 정보를 표기 한다고 생각하면 된다. <title>요소는 브라우저의 타이틀 바 혹은 페이지 탭에 보여지는 제목이다. 하기 빨간 네모박스 부분이라고 생각하면 된다. <body></body>요소 안의 컨텐츠는 브라우저 화면에 보여지는 부분이다. 위 그림에서 My First Heading 과 My first paragraph 부분이 되겠다. 위 그림에 나오는 웹 페이지를 코딩하면 하기와 같다. HTML에서 가장 기본이 되는 문법단위인 태그에 대해서 한번쯤은 생각해 볼 필요가 있다. 태그란 무엇인가에 그리고 HTML은 어떻게 공부하는 것이 좋을것인가 대해서는 하기글에서 이야기 해보자. HTML 태그란 무엇인가?
자세한 내용 보기

구글 블로그 대표이미지 설정하기

-
이미지
구글 블로그에서 대표 이미지를 설정 하는 방법을 알아봅니다. 글을 적으면, 자동으로 글에 포함된 첫번째 이미지가 대표 이미지로 설정됩니다. 다른 이미지 로 변경하고 싶다면 어떻게 해야될까요? 여기서는 위 파란색 네모 박스의 이미지를 설정해봅니다. 먼저 이미 대표 이미지가 설정된 글로 이동 후 수정모드 로 들어갑니다. 편집모드를 HTML 로 변경 합니다. 해당 페이지에는 이미 대표이미지 로 설정될 이미지 엘리먼트가 들어있습니다.  여러분들이 처음 만들때는 대표이미지 로 사용될 이미지를 '새 글쓰기' 로 업로드 한뒤 html 모드로 변경한뒤 이미지 코드를 확인 해야 합니다. 이미지 소스는 각자 다 다르겠죠.  대표이미지로 설정을 위해서는 해당 코드가 첫줄에만 있어야 합니다.  왜그런지는 정확히 잘 모르겠습니다.  이미지가 글 내부에서는 보이지 않고, 썸네일 이미지에만 보이기 위해서  Style 속성값을 줍니다. 이미지를 보이지 않겠다는 뜻 입니다. 해당 코드를 복사 한뒤, 여러분이 원하는 글로 이동합니다.  글을 HTML 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다. 첫줄에 붙여넣기 가 완료 되었습니다. 저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다. 썸네일이 잘  업데이트 되었네요. 감사합니다.
자세한 내용 보기