반응형 앱 만들기363 자바스크립트 HTML DOM 이란 HTML DOM을 사용하면 자바스크립트가 HTML 웹 문서의 모든 요소에 접근 및 수정 이 가능하기에 정적인 웹 문서를 동적인 웹문서로 바꿀 수 있습니다. HTML DOM ( Document Object Model) 은 하나의 웹 페이지가 브라우저에서 로딩될 때 브라우저에 의해서 만들어지며 브라우저가 해당 웹페이지에서 사용할 수 있는 DOM 오브젝트를 생성한다고 이해하면 쉽습니다. 만들어진 오브젝트를 통해서 우리는 손쉽게 HTML 요소에 접근하여 CSS 스타일 및 이벤트를 적용할 수 있다는 이야기입니다. 하나의 웹 페이지를 읽어 들이면 하기처럼 DOM 오브젝트 들이 생성됩니다. 오브젝트 들은 하기의 구조를 가집니다. DOM을 가지고 어떻게 HTML 요소에 접근하여 동적으로 페이지를 변경시킬지 알아봅니다... 앱 만들기/JavaScript 2023. 7. 26. HTML <style>태그 와 style 속성 HTML 태그와 style 속성은 둘 다 모두 CSS를 특정 html요소에 적용하기 위해서 사용됩니다. 즉, HTML 과 CSS를 연결시켜 주는 개념입니다. 먼저 태그를 알아봅시다. 태그 A heading A paragraph. head 태그 사이에 body 에서 사용되는 h1, p 요소를 선택자를 사용해서 스타일을 설정합니다. 여기서는 텍스트 색상을 빨강과 파랑으로 설정했습니다. 하기 결과처럼, 태그를 사용하면 특정 html 요소 부분에 스타일을 적용할 수 있습니다. style 속성 이번에는 style 속성을 사용해서 동일한 결과를 만들어 봅니다. html 태그 내부의 inline 스타일로 적용했습니다. 결과는 동일합니다. A heading paragraph. 두 가지 방법 모두 특정 태그 요소에 스타.. 앱 만들기/HTML5 2023. 7. 25. HTML <script> 태그 사용법 HTML 결과로는 브라우저 화면에 hello! 라고 텍스트를 출력해줍니다. 태그 의 주요특성 중 하나는 태그 사이에 자바스크립트 코드가 와야 한다는 점 입니다. 태그는 웹 문서 어디든 위치 할수 있으며, 하나의 웹문서 안에서 여러번 사용이 가능합니다. 하지만, 브라우저가 HTML 코드를 읽어들일때 위에서 부터 아래로 한줄씩 읽으면서 분석을 하기때문에 섹션 사이에 코드가 있으면 웹페이지를 로딩하는게 시간이 걸릴 수 있겠습니다. 특이한 상황이 아니라면 종료 태그 전에 삽입하는 것이 좋습니다. 그리고, 웹 문서와 자바스크립트 코드가 혼용이 되면 소스분석 및 유지보수에도 어려움이 생깁니다. 그렇기에 HTML 웹 문서와 자바스크립트 파일을 분리해서 사용하는 것이 좋겠죠. 태그의 src 속성을 활용하여 외부의 자바.. 앱 만들기/HTML5 2023. 7. 24. HTML onkeydown 이벤트 HTML 웹 문서에서 사용자 행동에 반응하도록 만들어 놓은 것이 바로 이벤트입니다. 예를 들자면 마우스를 클릭한다던지 키를 누르는 동작 등등 말이죠. 이번 시간은 그중 키를 눌렀을 때 반응하는 onkeydown 이벤트에 대해서 알아봅니다. onkeydown Event 유저가 키를 눌렀을때 발생하는 이벤트입니다. 문법은 하기와 같습니다. onkeydown 속성값으로 자바스크립트 코드가 와야 합니다. 규칙입니다. HTML과 자바스크립트가 연결되는 가장 기본적인 구조라고 할 수 있습니다. 웹페이지에서 하나의 요소에 이벤트가 발생했을 때 자바스크립트 코드가 실행된다 는 것입니다. 빈 텍스트 박스에 키를 입력하면 팝업창이 보이는 예제를 만들어 봅니다. 코드입니다. 주요한 부분은 input 태그 내 onkeydow.. 앱 만들기/HTML5 2023. 7. 22. 구글콘솔 앱 출시 안되게 설정하는 방법 구글콘솔을 관리 중 출시된 앱을 더 이상 서비스 하지 않도록 하는 방법에 대해서 알아보겠습니다. 먼저 구글개발자콘솔에 로그인합니다. 1. 개발자콘솔 로그인 왼쪽 모든 앱 메뉴에 등록된 앱들이 보입니다. 정렬기준을 프로덕션으로 변경하면 현재 출시된 앱만 보여줍니다. 이 중 서비스를 종료하고 싶은 앱을 선택합니다. 2. 설정 >> 고급설정 서비스 종료할 앱을 선택한 다음 설정>>고급설정으로 진입합니다. 3. 고급설정 >> 앱 이용 가능 여부 앱 이용 가능여부 탭을 확인해 보면 현재 '출시됨'에 선택이 되어 있습니다. 이를 출시 안됨으로 수정합니다. 출시 안됨 수정 후 게시 취소를 선택합니다. 설정이 모두 완료되었습니다. 약 1시간 정도가 지나면 구글플레이에서 삭제되며, 개발자 콘솔 앱 리스트 상에서도 앱 상.. 앱 만들기/안드로이드 2023. 7. 21. 티스토리 제목 라인 넣는 방법 티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부 soo0100.tistory.com 지난 시간 우리는 타이틀에 밑줄을 넣는 CSS 코드를 완성했습니다. 그럼 이번시간에는 자신의 티스토리에 해당 코드를 넣는 방법을 알아보겠습니다. 만들어놓은 CSS 코드를 넣는 다는것은 즉, 적절한 위치에 넣어야 하는것을 의미합니다. 여러분들의 티스토리 스킨이 다르기에 무조건 외워서 넣기보다는 넣는곳을 찾아서 넣을 수만 있다면스킨이 바뀌더라 언제든 편하게 편집이 가능합니다. 시작해볼까요? 1. 에디터에서 글자크기 팝업창을 선택합니다. 밑줄 생성을 원하는 타이.. 앱 만들기/CSS 2023. 7. 17. 티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부각 해줄 수 있기 때문에 가독성 즉 글을 읽기에 편해지겠습니다. 물론 해당 스타일을 적용한다고 해서 SEO(검색엔진 최적화)에 유리하다거나 매우 좋다고 할 수는 없습니다. SEO는 HTML 태그의 목적과 구성이 정확해야 더 높은 점수를 받을 수 있으니 타이틀에는 타이틀 태그를 문단에는 문단 태그를 각자 목적에 맞는 태그를 구성하는 것이 좋겠습니다. 그럼, 다시 티스토리 소제목에 밑줄 긋는 방법에 대해서 계속 진행해 볼까요? 티스토리 소제목에 밑줄을 그어주는 CSS 스타일 선언은 여러 가지 방법이 있습니다. 여기서는 두 가.. 앱 만들기/CSS 2023. 7. 16. CSS 테두리 면 설정하기 와 티스토리 소제목 라인 만들기 앞 포스팅에서는 CSS border 속성을 가지고 네 면에 테두리 선을 그려보았습니다. 이번에는 네면이 아니 특정 면을 지정해서 해당 면에만 테두리 선을 그려봅니다. 티스토리 본문내용 중 소제목을 강조하기 위해서 많이 사용되는 방식입니다. 먼저 예제를 만들어 볼까요? CSS 스타일과 스타일이 적용될 P 요소(element)를 코딩합니다.border-top, right, bottom, left(위치)-style테두리의 4면을 각각 다른 선으로 구성합니다. 여기서 중요한 포인트는 border-top, right, bottom, left(위치)-style을 선언하여 원하는 위치에 속성값을 설정합니다. Individual Border Sides 2 different border styles. 결과는 하기와 같습.. 앱 만들기/CSS 2023. 7. 14. CSS 테두리 설정 CSS 테두리 설정에 대해서 알아봅니다. CSS 테두리 즉, border라는 영역은 CSS Box model 중 패딩 밖에 위치한 영역입니다. border는 style , width , color 속성을 통해서 테두리 선을 만들 수 있습니다. 이중 style 속성이 정의되지 않으면 width 나 color 속성값들이 있더라도 테두리선은 그려지지 않습니다. border-style border-style 속성은 선의 스타일을 선언합니다. 예제를 통해서 어떤 종류의 테두리 선을 정할 수 있는지 알아볼까요? CSS 선언부를 작성합니다. CSS Border 테두리 선 테스트를 위해서 P요소 문단들을 배치합니다. The border-style Property This property specifies what ki.. 앱 만들기/CSS 2023. 7. 13. CSS 컬러 (백그라운드, 텍스트) 배경 색상과 텍스트 색상은 CSS 컬러로 가장 많이 설정하는 속성입니다. 예제를 만들어봅니다. CSS 선언부에서 h1과 p 요소(element)를 위한 스타일을 선언합니다. color : 컬러값 >> 텍스트 컬러를 설정합니다 background-color : 컬러값 >> 배경 컬러를 설정합니다. CSS Colors h1, p 태그 콘텐츠를 완성합니다. Hello world! What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unkno.. 앱 만들기/CSS 2023. 7. 12. CSS 배경이미지 전체화면이 되도록 설정하기 CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성은 background-image 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결 soo0100.tistory.com 지난 시간 CSS 배경(background)을 설정할 수 있는 background 속성을 알아보았습니다. 주요 속성으로 하기 4가지 속성이 있었습니다. background-image background-position background-repeat background-attachment 오늘은 배경이미지를 브라우저 화면에 꽉 채우는 방법을 알아보겠습니다. 전체화면을 위해서는 containe.. 앱 만들기/CSS 2023. 7. 11. CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성 과 속성값 설정 방법은 background-image : url("이미지 경로"); 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결과는 하기와 같습니다. 기본적으로 배경이미지는 X축과 Y축으로 반복되어져서 그려집니다. background-repeat : no-repeat , repeat-x, repeat-y 반복되지 않고 하나만 그려주기 위해서는 하기 속성을 추가 합니다. background-repeat: no-repeat; 해당 속성값에 의해서 이미지는 하나만 설정이 됩니다. X축과 Y축만 반복되게 이미지를 설정하고 싶을때는 repeat.. 앱 만들기/CSS 2023. 7. 9. 이전 1 2 3 4 5 ··· 31 다음 반응형