728x90 Web75 [Bootstrap] Bootstrap이란? [Bootstrap] Bootstrap이란? 정말 기본만 알아볼 것이다. Bootstrap이란? : HTML, CSS, JS 프레임워크 : 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크이다. : HTML과 CSS 기반의 템플릿 양식, 버튼, 네이게이션 및 기타 페이지를 구성하는 요소를 포함한다. : 자바스크립트를 선택적으로 확장 할 수 있다. Bootstrap의 특징 드롭다운 메뉴, 버튼, 탭, 리스트 등등 웹 페이지에서 많이 쓰이는 요소를 내장하고 있다. 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 디자인이 완성된다. Bootstrap의 활용 반응형 웹 디자인을 만들 때 쓰는 것이다. 반응형 웹 디자인 : 장치의 종류에 상관없이 모든 브라우저에서 잘 보.. 2022. 6. 18. [jQuery] jQuery 기본 문법 이해하기 [jQuery] jQuery 기본 문법 이해하기 1. jQuery 정의 : HTML 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리. : 부트스트랩도 의존도를 줄여간다고 하고, 요즘은 점유율이 낮아지고 있는 추세이다. 2. jQuery 호출 html 문서 내부에 script로 추가한다. jQuery 홈페이지에서 코드를 복사할 수 있는데, 그것을 html 문서 내에 붙여넣기 하면 jQuery를 사용할 수 있다. 3. 기초 문법 1) 선택자 : DOM을 통해 HTML 요소를 선택하여 가져와서 쉽게 제어할 수 있다. $(선택자).메소드(); id 선택을 위해서는 ‘#id', class 선택을 위해서는 ‘.class’로 쓰면된다. 지정 태그와 일치하는 요소를 선택하기 위해서.. 2022. 6. 18. [JavaScript] JavaScript 기본 문법 [JavaScript] JavaScript 기본 문법 console 창으로만 확인할 수 있는 언어를 학습하고 있었는데, 수업을 따라가다가 JavaScript를 마주하였다. 이전까지는 신기한 생각을 가지고 있었다. '이건 나에게 '필요없는 언어'이다.' 나중에 안하니까? 전혀 잘못된 생각을 하고 있었다. 일단 전체가 대강이라도 어떻게 돌아가는지, 내가 구현한 코드가 어디에 써먹히는지, 눈으로는 어떻게 나와서 서비스가 어떻게 나오는지를 알아야 되지 않나. 전문가는 아니더라도 '알고는' 있어야 하는 것인데 외면하고 있지 않았나 하는 반성을 해본다. (물론 뭐 지금까지 얕은 공부를 했기 때문에 필요가 없다고 느꼈을 수도 있다) 아무튼 이번에는 자바스크립트 문법에 대한 기초적인 것을 파악해보겠다. 정말 생기초! .. 2022. 6. 18. [JavaScript] DOM(Document Object Model) 이해하기 [JavaScript] DOM(Document Object Model) 이해하기 DOM(Document Object Model)의 정의 : XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. : 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다. : W3C의 표준 객체 모델이며, 다음과 같은 계층구조로 표현된다. DOM 활용 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다. : 새로운 HTML 요소나 속성을 추가 : 존재하는 HTML 요소나 속성을 제거 : HTML 문서의 모든 HTML 요소를 변경 : HTML 문서의 모든 HTML 속성을 변경 : HTML 문서의 모든 CSS 스타일을 변경 : HTML 문서에 새로운 HTML 이벤트를 추가 : .. 2022. 6. 18. [HTML/CSS] github hosting [HTML/CSS] github hosting HTML의 태그와 CSS 선택자, 속성을 정리하고 대강 페이지를 만들어보았다. 한 장 짜리 HTML 문서이지만, HTML/CSS를 모르는 사람에게도 보여주고 싶다면, Hosting을 해야 한다. github는 commit한 자료들을 hosting 해주는 써어비스를 해주고 있다. git 활용법을 어제 대강 습득한 나는 두 가지 지식을 융합시켜보고자 호스팅 방법을 탐구하였다. 커밋을 마치고 push를 하면 위와 같이 repository에 파일들이 저장된다. 이 때 주의할 것은, html 파일의 경우, index.html 파일이 꼭 있어야 한다. 브라우저는 이 파일을 우선적으로 읽고 나머지 html 파일을 들여다보는데, 이것이 없다면 404 not found를 만.. 2022. 6. 16. [HTML/CSS] 필수 CSS 선택자, CSS 속성 모음 [HTML/CSS] 필수 CSS 선택자, CSS 속성 모음 CSS에는 선택자와 속성이 있다. div { font-size: 20px; } 여기서 div가 '선택자'가 되는 것이고, font-size가 속성이 된다. 속성은 특정한 값을 가진다. 선택자 { 속성: 값; } 이런 식으로 CSS 문서가 구성이 된다. 아래에서는 아주 잘 쓰이는 CSS 선택자와 속성을 알아볼 것이다. 1. CSS 선택자 선택자 설명 상세 설명 * 페이지 전체 요소 스타일시트 전체가 요소를 공유한다. .X X class의 요소 class는 여러 번 쓸 수 있다. #X X id의 요소 id는 한 번만 쓸 수 있다. X X 태그의 요소 html 문서의 특정 X 태그가 요소를 공유한다. X Y X 태그 내부의 모든 Y 태그의 요소 Des.. 2022. 6. 15. 이전 1 ··· 7 8 9 10 11 12 13 다음 728x90
