본문 바로가기
반응형

Web5

[JavaScript] 엘리먼트 추가 하기 | .createElement(), .appendChild() 메서드 사용법, 예제 HTML 문서에서 자바스크립트로 엘리먼트를 추가할 수 있습니다. Document.createElement() 메서드는 지정한 tagName의 HTML 엘리먼트를 만들어 반환합니다. 구문 let element = document.createElement(tagName[, options]); 매개변수 tagName 생성할 엘리먼트의 유형을 가리키는 문자열. 예) section, div, h1, p, button 등 반환 값 새로운 엘리먼트 var aChild = element.appendChild(aChild); 예제 아래 예제는 엘리먼트 안쪽에 엘리먼트가 생성되어 추가됩니다. 다음 예제는 엘리먼트 안쪽에 엘리먼트를 생성합니다. 엘리먼트 안쪽에는 "Hello World!"가 삽입됩니다. 참고로 appendC.. 2022. 7. 16.
[CSS] 눈누 웹폰트 적용하기 | 상업적 이용 가능한 무료 한글 폰트 사용법 | 티스토리 블로그, 웹사이트 꾸미기 상업적으로도 이용 가능한 예쁜 폰트들을 온라인에서 무료로 제공하는 사이트들이 있습니다. 지난 번에 포스팅을 했던 구글 웹폰트와 마찬가지로 무료 제공 폰트 사이트 중에 잘 알려진 곳 중에 하나가 바로 오늘 소개해드릴 '눈누'라는 사이트입니다. 눈누는 상업적으로도 사용 가능한 무료 폰트들을 제공하는 사이트입니다. 아래 링크를 통해 사이트에 접속하실 수 있습니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 웹폰트 준비하기 눈누 사이트에 접속하셨다면 사이트 내에서 자신이 적용하고 싶은 폰트를 선택합니다. 제가 즐겨 사용하는 티몬 몬소리체를 선택해보았습니다. 클릭하시면 폰트 미리보기, 웹폰트로 사용, 디자인 예시, 폰트의 라이센스 등이 표시됩니다. 웹폰트로 사용 부분에 스.. 2022. 7. 13.
[HTML] 웹표준 제목(h1, h2, h3, h4, h5, h6) 요소 태그, heading tag HTML 제목 태그 ~ 의 종류와 개념 제목(h1~h6 요소)에는 h1 요소, h2 요소, h3 요소, h4 요소, h5 요소, h6 요소, 이렇게 여섯 단계가 있습니다. 요소는 큰 제목, 는 중간 제목, 는 작은 제목으로 사용하며, ~ 요소는 필요에 따라 이하의 제목에 사용하는게 기본입니다. 보통 이 가장 크게 표시되며 요소가 가장 작게 표시됩니다. 각각의 크기는 브라우저에 의존하지만 CSS의 font-size 속성으로 임의이 크기를 지정할 수도 있습니다. 제목1 입니다. 제목2 입니다. 제목3 입니다. 제목4 입니다. 제목5 입니다. 제목6 입니다. h1~h6 요소의 계층 구조에 주의 예컨데 h1 요소 다음에 h3 요소 지정은 계층 구조를 지키지 않은 것이 됩니다. 즉 h1 요소 다음에는 h2 요소,.. 2022. 7. 6.
[CSS] 나의 웹사이트에 구글 웹폰트 적용하는 방법, 무료폰트, CSS, HTML, 웹디자인 나의 웹페이지에 구글 웹폰트를 적용해봅시다. 웹페이지 HTML, CSS 파일을 만들다 보니 글자체를 바꾸고 싶을 때가 있습니다. 구글에서 웹폰트를 많이 제공하고 있는데요. 구글 웹폰트를 어떻게 활용할 수 있는지 간단히 알아보겠습니다. 1. 구글 웹폰트 사이트에 접속합니다. 아래의 링크를 클릭하거나 포털 사이트에서 "구글 폰트"를 검색하면 보통 제일 위쪽에 아래 사이트가 등장합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 언어를 선택합니다. 굳이 언어를 선택하지는 않아도 되지만, 한글 폰트 위주로 찾기 쉽도록 Kor.. 2022. 6. 27.
[CSS] 손쉬운 반응형 웹 디자인을 위한 부트스트랩 사용 방법, Bootstrap 부트스트랩이란? 부트스트랩(Bootstrap)은 프런트엔드 개발을 쉽고 빠르게 하는 프레임워크입니다. 각종 레이아웃, 입력창, 버튼 같은 HTML UI 컴포넌트를 CSS와 자바스크립트를 이용해 쓰기 편하게 제공합니다. 부트스트랩은 원래 트위터 블루프린트(Twitter Blueprint)라는 트위터 사내 프로젝트로 시작했습니다. 트위터의 수많은 직원이 각자 맡은 부분을 개발하다 보니 디자인 일관성이 깨지고 관리하기가 점점 어려웠다고 합니다. 그래서 이 문제를 심각하게 느낀 트위터의 디자이너인 마크 오토(Mark Otto)와 개발자인 제이콥 쏜튼(Jacob Thornton)이 업무 시간 외 시간에 함께 프로젝트를 진행하였고 이후 많은 사람이 프로젝트에 참여하게 되어 마침내 2011년에 부트스트랩이라는 이름으.. 2022. 6. 24.
반응형