글

라벨이 자바스크립트인 게시물 표시

프로젝트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
댓글 쓰기
자세한 내용 보기

자바스크립트 문자열 표현하기

-
이미지
  자바스크립트에서 문자열을 표현하는 방법 입니다. 문자열은 ""(쌍따옴표) 혹은 '(작은따옴표) 사이에 적어준다. 문자열 내에 쌍따옴표 혹은 작은따옴표를 기재하기 위해서는 반대의 따옴표를 문자열 안에 넣어주면 정상적으로 출력된다. 무슨말인지 예제를 보면 아래와 같다.   console . log ( "안녕하세요'" );   console . log ( '안녕하세요"' ); 1. 문자열 표현을 위해서 따옴표 를 사용했다. 2. 문자열 내 쌍따옴표와 작은 따옴표 표기를 위해서 서로 반대의 따옴표를 사용했다. 추가로, 문자열 줄바꿈(한줄 띄우기) 처리는 백슬래시를 사용한다. (\n) 이다. console . log ( " \' 반갑습니다 \" \n 안녕히 가세요" ); 위 코드는 백슬래시를 활용하여, 줄바꿈 처리를 할수 있다. 에디터에서 줄바꿈을 위해서 Enter 가 아닌 \n을 문자열 사이에 입력한다. 백슬래시는 자바스크립트에서 다양한 기능을 표현할 수 있다. '\ , \" 는 각각 문자열 내에서 작은 따옴표 와 쌍따옴표를 표시 할수 있다. \t 는 탭 처리를 할 수 있다. 이상으로 자바스크립에서 문자열을 표현하는 기본적인 방법을 정리해본다. ES6부터 적용된 백틱 스트링 표현법은 하기 포스팅을 참고한다. 감사합니다. 백틱 스트링 표현법
댓글 쓰기
자세한 내용 보기

자바스크립트 템플릿 스트링이란?

-
이미지
  자바스크립트 템플릿 스트링이란?  자바스크립트에서 문자열을 다룰때 백틱(`) 문자를 사용하는 것을 말한다. ES6 버전부터 지원되는 방식으로 기존 ' , " 를 문자열 안에서 표현하기 위해 \(백슬래쉬)를 사용했던 불편함과 한줄 띄우기 그리고 문자열내에 식을 포함할 수 있는 기능이 개선되었다. 그렇기에 ES6버전이 지원되는 환경이라면 템플릿 스트링을 사용하면 편리하다. 템플릿 스트링의 예시이다.     console . log ( `템플릿 스트링 예제 입니다. 템플릿 스트링은 자동으로 한줄 띄어쓰기를 지원한다. 그리고 문자열내에 식을 포함 할수 있다. 3+5의 값은 ${ 3 + 5 } 입니다.` ); 1. 문자열은 `(백틱) 문자열 사이에 입력한다. 2. 에디터에서 줄 띄우기를 하면 한줄 띄우기가 실행된다. 3. ${ } 를 사용하면 문자열 내에 식을 표현할 수 있다. 위 코드에 대한 실행값은 하기와 같다. 이상으로 템플릿 스트링을 정리해본다. 감사합니다.
댓글 쓰기
자세한 내용 보기

자바스크립트 confirm 대화상자

-
이미지
  자바스크립트 confirm 대화상자는  확인,취소 버튼을 가진 대화 상자이다.  사용방법은 confirm("메시지"); 이다. 확인 버튼을 선택 시 리턴값은 true 이고, 취소를 선택하면 false 가 리턴된다. 자바스크립트 confirm 대화상자를 정리해본다. 감사합니다.
댓글 쓰기
자세한 내용 보기

자바스크립트 prompt 대화상자

-
이미지
  자바스크립트 prompt 대화 상자는 하기처럼, 텍스트를 입력받는 필드를 가진 대화상자를 띄울때 사용된다. 입력받은 텍스트는 변수로 별도 저장이 가능하다. 위 예제에서는 name 변수가 prompt 에서 입력되는 텍스트를 저장하는 역할을 한다. 더 정확히 말하자면, string type을 저장하는 변수 이다. "확인" 버튼을 선택하면, name 의 값은 입력한 스트링의 값이 되며, 취소 버튼 시에는 name 값은 null이 된다. 자바스크립트 prompt 대화상자를 정리해보았다.
댓글 쓰기
자세한 내용 보기

자바스크립트 대화상자 alert

-
이미지
자바스크립트 대화상자 중 alert 내용이다. alert 는 알림창을 뜻한다. alert 대화상자를 실행하면 결과는 하기와 같다. 정보만 전달하기에 확인 버튼을 선택하면  대화상자는 사라진다. 위 대화 상자를 만드는 자바스크립트 코드는 이와 같다. alert 함수의 인자로는 문자열이 온다. "", '' 등으로 표기 할수 있다. 대화상자에서 확인을 눌렀을때 리턴값이 없기에 undefined 라고 표기된다. alert() 대화상자 는 말그대로 어떤 정보를 전달할때 사용하는 대화 상자이다. -끝-
댓글 쓰기
자세한 내용 보기

자바스크립트 이벤트 리스너 만들기

-
이미지
HTML 태그에서 이벤트가 발생했을때, 예를 들어 화면에 버튼이 클릭되었을때 어떤 반응을 보여주어야 한다면, 화면 부분은 HTML 요소가 전담하고 자바스크립트는 동작 구현에 집중 한다. 화면에는 버튼이 하나 있고, 그 버튼이 클릭될때 콘솔창에 텍스트를 출력하는 예제를 만들어본다. < body >   < button > 미사일 </ button >   < script > let missile  = document . querySelector ( 'button' );   const onClickButton = () => {     console . log ( "미사일 버튼 클릭" );   };      missile . addEventListener ( 'click' , onClickButton );   </ script >   </ body > 자바스크립트 코드는 HTML 화면 구성 밑에 존재한다. 화면요소 들을 정상적으로 컨트롤 하기 위함이다. 여기서 중요한 점은 바로, HTML요소에서 올라온 이벤트를 자바스크립트와 연결하는 방법이다. 실제 이벤트를 발생시키는 것은 HMTL 요소 이다.  여기서는 Button 이 되겠다. 그 이벤트를 받아서 동작시키기 위해서는 "이벤트 리스너" 라는 자바스크립트 단의 구현이 필요하다. "이벤트 리스너" 는 말그대로 특정 이벤트가 발생함을 듣고 있다가, 트레이스 하다가 해당 이벤트가 발생하면 특정 함수를 실행하는 역할을 한다. 여기서 특정 함수는 "콜백 함수" 라고 부른다. 이벤트 리스너를 등록하기전 먼저, 우리는 이벤트가 발생하는 HTML요소에 접근 할수 있어야 한다.  여러 방법이 있지만 가장 간편한  document.querySelector() 라는 자바스크립트 함수를 사용한다. 해당 함수의 인자값은 "선택자" 가 들어
댓글 쓰기
자세한 내용 보기

이 블로그의 인기 게시물

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

-
이미지
 구글 블로그에서 복사 붙여넣기로 이미지 삽입이 가능한지 테스트 해보았습니다. 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 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다. 첫줄에 붙여넣기 가 완료 되었습니다. 저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다. 썸네일이 잘  업데이트 되었네요. 감사합니다.
자세한 내용 보기