본문 바로가기

Dev.FrontEnd

 (51)
[Tip] Font Awesome 활용하기! Font Awesome 활용하기!위 sample에서 아래 방향 화살표가 Font-Awesome을 활용한 아이콘이다. >>Font-Awesome 페이지로 이동하기>> 활용하는 방법은 간단하다.위 예제의 코드를 살펴보면 쉽게 이해할 수 있다. i tag를 보면 class가 지정되있는 것을 볼 수 있다.Font-Awesome 페이지에 있는 아이콘들 중 마음에 드는 아이콘을 클릭하면,그 아이콘에 해당하는 class가 나온다.그 클래스를 복사, 붙여넣기 해주면 된다! 물론,여기에 추가적으로 해야할 사항이 한 가지 더 있다.HTML파일을 읽어들일 때, i class = " " 에 해당하는 클래스가 무엇을 가리키는지 알아야 하기 때문에, 태그에 추가로 삽입해야할 코드가 있다. 혹시 뭔가가 잘 되지 않는다면 Font-..
[HTML/CSS] 2. Responsive Web Design / 반응형 웹이란? 반응형 웹(Responsive Web)이란? 반응형 웹은 사용자의 특정 해상도를 가징하지 않는 것부터 출발한다. 모든 해상도를 커버할 수 있고, 의도에 따라 특정 해상도 범위에 제한적으로 적용할 수 있으며, 적절한 중단점(breakpoint)를 제공한다. 반응형 웹 개념 *모바일 퍼스트 PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다. 모바일의 제약 1) 모바일 기기의 스크린 크기 2) 네트워크 속도 및 품질 3) 사용하는 모드 반응형 웹은 고 사양(고 해상도) 웹이 저 사양(저 해상도) 모바일 기기에서도 불편함없이 구현되는데 초점이 맞춰져 있다. 때문에 일반 웹이 모바일 웹으로 보여질 때 불필요한 요소들을 최소화시켜야 한다. 가장 대표적인 것으로 일반 웹 메뉴를 버튼 하나로 축..
[HTML/CSS] 3. Bootstrap Framework CSS 프레임워크 부트스트랩 사용해보기! 3. Responsive design with bootstrapBootstrap Framework부트스트랩을 사용하는 방법은,이미 부트스트랩에서 지정된 class를 정의하는 방식으로 사용한다. 반응형 이미지class = img-responsive 버튼class = “btn btn-block"btn : 버튼 모양btn-block : 100%로 가득찬 버튼 Grid Font Awesome Font Awesome은 아이콘 라이브러리로, vector 이미지이다. .svg 파일에 저장되어있다. 링크를 추가함으로써, 아이콘을 추가할 수 있다.px을 조절함으로써 크기를 조정할 수 있다.아이콘은 icon이므로 i라는 약자로 element를 표시한다.열고 바로 닫아준다. 좋아요 = fa-thumbs-up 쓰레기통 = f..
[HTML/CSS] 1. Box Model / Block Element, Inline Element 각각 갖고 있는 Box Model이 다르다.Block Element / Inline Element Block Element는 독자적인 영역을 차지하고 있다.그렇기 때문에 위에서 아래로 배열된다.ex) h1, h2, h3, ... , div, p, ul, li, form Inline Element는 content area의 영역만 차지하고 있다.그래서 웹 페이지의 영역이 되는데로 좌에서 우로 배열된다.ex) a, img, span, em, input 위 두 가지 속성은 style의 display를 통해서 변환시킬 수 있다.추가적으로 inline-block이라는 속성이 있다.inline 요소는 Box Model 을 통해 제어할 수 있는 margin 값이 적용이 안될 때가 있는데,이 부분을 보완하기 위해서 등..
JavaScript는 세상에서 제일 잘못 이해되고 있는 언어이다. / 자바스크립트란 어떤 언어인가? Javascript: 세상에서 제일 잘못 이해되고 있는 언어 http://javascript.crockford.com/javascript.html :번역 Douglas Crokford : www.crokford.com LiveScript, JScript, ECMAScript로 알려져 있는 Javascript는 세상에서 가장 유명한 언어중의 하나이다. 자바스크립트 인터프리터는 세상의 모든 퍼스널 컴퓨터에 설치되어 사용되고 있다. Javascript의 유명세는 WWW 스크립팅 언어의 막중한 책임을 맡고 있기 때문이다. 이런 유명세에도 불구하고, 오로지 몇몇만이 자바스크립트를 매우 좋은 동적 object-oriented 범용 목적의 프로그래밍 언어로 알고 있다. 이게 어떻게 비밀일 수 가 있는가? 왜 이 언어..
[HTML] 0. HTML/CSS의 기본과 웹사이트 개발에 대해서 HTML(Hyper Text Markup Language)“연결된" “문자"를 “markup"하는 “언어" markup이란 요구사항을 위해 주석, 메모를 다는 것을 의미한다. HTML의 핵심은 구조화이다. 이 문서의 title, subtitle, list, table은 무엇인지를 설정 구조화를 제대로 해서 마크업을 해줘야 웹 문서의 의미가 살아난다. 이렇게 의미론적으로 구조가 갖춰져있는 웹을 시맨틱(Semantic) Web이라고 한다. 왜 의미에 맞는 태그를 사용해야 하나요?위에서 말했듯이 HTML 태그에 맞게 작성된 웹을 Semantic Web이라고 한다.div로 템플릿을 설계할 수도 있지만 왜 각 태그를 내용에 맞게 설계해야 하는가? 우선, 단편적으로 검색에 노출될 수 있게 하는 이유가 있다.내용에 ..
[아홉번째] JavaScript - Web Browser / Ajax , JSON Ajax(Asynchronous JavaScript and XML) 자바스크립트를 통해 내부적으로 통신할 수 있는 것.- 누가 : 사용자들이- 무엇을 : 지금 당장 필요로하지 않는 정보들을- 언제 : 나중에 필요로할 때- 어떻게 : 서버에서 가져와주는 기술 - 왜 : 그게 사용자 입장에서 효율적이니까 Asynchronous JavaScript and XMLXML은 중요하지 않다. 요즘엔 다른 데이터도 다 취급하기 때문에주로 JSON을 많이 사용.비동기적으로 서버와 통신을 하는 방식동기적인 것은 동시적인 것 JSON(JavaScript Object Notation)JavaScript 에서 객체를 만들 때 사용하는 표현식서버와 통신을 통해서 작업을 해야하는 상황에서 유용하고 광범위하게 사용하는 기술이다. j..
[여덟번쨰] JavaScript - Web Browser / 이벤트 II 이벤트키보드를 눌렀을 때 텍스트가 입력되는 것은 기본적으로 웹브라우저가 가지고 있는 API 라고 할 수 있다.input 태그를 불러왔을 때 submit 버튼을 누르면 데이터가 전송되는 것도a href 태그를 클릭하면 URL로 이동하는 것도기본 이벤트 동작들즉 API브라우저들의 구성요소들이 우리가 원하는 작업이 실행될 수 있도록 하는 것이 이벤트 - 동작 취소하기.checked 됬을 때 return false를 해주면 실행되지 않도록 해서동작의 취소 기능을 구현한다. 이벤트 타입- 폼 form form이라는 이벤트 안에 submit을 만든다.submit : 사용자가 입력한 폼의 정보들을 서버로 전송하는 명령change : 텍스트 입력창에 입력을 하면 그대로 입력blur : 포커스를 뺏을 때focus : 포..

티스토리툴바