본문 바로가기

웹프로그래밍

(5)
CSS / 구글 웹폰트 사용하는 방법 구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 CUSTOMIZE를 클릭합니다. 필요한 스타일을 체크합니다. 일단 다 체크를 했습니다. 이제 코드를 복사합니다. STANDARD와 @IMPORT 중 고를 수 있습니다. 사용하기 다음은 위에서 선택한 나눔 고딕을 사용한 간단한 예제입니다. 400 : Lorem I..
React란 무엇인가? 🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트입니다. 1 f(data) = View cs 🤔 자바스크립트 라이브러리란? 페이지를 정적으로 보여주는 게 아닌 동적으로 보여주고 싶다면 자바스크립트를 이용하게 됩니다. 하지만 웹 개발 시 DOM 관리 및 상태값 업데이트 관리등 귀찮은 것들을 최소화하고 오직 기능 개발, 사용자 인터페이스(UI)를 구현하는 것에 집중하기 위해 만들어진 프로젝트들로 React, Angular, Vue가 자바스크립트 라이브러리에 속한다. 리액트의 특징 뷰 담당 - MVC..
자바스크립트 기본문법 [자바스크립트 데이터 (주로 웹브라우저) 표시 방법] 1) window.alert() : alert box를 가지고 데이터를 보여줌 2) document.write() : html 문서의 내용 변경하는 방식(기존 문서내용 없애고, 데이터만 표시)으로 데이터를 보여줌 3) DOM객체.innerHTML : html 문서의 특정 태그에 내용을 추가하는 방식(태그 추가 가능)으로 데이터를 보여줌 => 기존 내용 대체, DOM API를 통해서 html 태그를 DOM 객체화하는 방법 참조(1번 포스팅) 4) console.log() : 웹브라우저의 콘솔(개발자도구 이용)로 데이터를 보여줌 [자바스크립트 구문] : 웹브라우저에 명령을 하기위한 방식, 문법 1) 구성 - 변수명 : 연산에 의해 변할 수 있는 값을 넣는..
자주 사용하는 html 태그들 오늘은 html 주요 태그를 정리하는 시간을 가져보려고 합니다. html 태그는 250개가 넘지만, 실제 사용하는 태그는 그렇게 많지 않습니다. 그럼 어떤 태그들이 자주 쓰이는지 살펴볼까요? ​ ​ 한 사이트의 조사 결과에 따르면 웹 페이지에서 사용하는 태그 수는 28개가 가장 많다고 합니다. ​ 눈에 익은 태그들이 많이 보이지요? 위의 태그를 카테고리별로 구분해보면 다음과 같습니다. , , , 처럼 CSS와 JavaScript와 관련된 태그들을 제외하면 대부분 우리가 배운 것들입니다. 분류 태그 기능 기본 태그 HTML 문서 문서에 대한 정보 본문 문서 제목 단락 한 줄 삽입 ~ 본문 제목 메타정보 메타데이터 텍스트 서식 굵은 글씨 글자 기울임 이미지 이미지 링크 하이퍼링크 외부 자원 참조 네비게이션 ..
부트스트랩 (1) 부트스트랩이란? 부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다. 출처 - [네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과) 사용법 html 파일의 에 를 입력한다. 점보트론 홈페이지를 소개할 때 사용하는 컴포넌트. 점보트론(Jumbotron)은 대형 전광판을 의미하는 단어이다. 점보트론은 부트스트랩에서 홈페이지를 소개하는 메인 전광판 역할을 한다. 컴포넌트 중에서 가장 돋보이는 컴포넌트이며 버튼 등 다양한 컴포넌트가 포함될 수 있다. 사용법 에 와 같이 사용한다. 네비게이션 바 홈페이지 전체 구성을 ..