목록CSS (7)

땅콩이 맛난고 먹이자

[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(6. Tab UI 실습 - FE)_Tab UI 만들기를 위한 HTML과 CSS 구조 및 실습

Tab UI란? 상단 메뉴를 누를 때마다, 새 고침 없이 하단 내용이 통째로 변경되는 component이다. #Tab UI 실습해보기 JS bin 을 이용하였다. https://jsbin.com/yebulopatu/edit?html,output JS Bin Sample of the bin: jsbin.com 1. 구조 짜기 코드 TAB UI TEST orange mango banana apple I like orange 👩🏻❤🍊 결과 2. 생명 불어넣기 상단의 Tab menu를 클릭했을 때 Ajax를 불러와 하단의 content를 바꿔보자. 1) click event 추가 2) 불러오기 Using XMLHttpRequest https://developer.mozilla.org/ko/docs/Web/API..
edwith_부스트코스_웹 프로그래밍 2020. 3. 17. 13:04
[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(4. Web Animation - FE)_2. requestAnimationFrame & CSS3 transition

setTimeout이나 setInterval을 사용해서 연속적인 함수 호출로 애니메이션을 구현하는 방법은 약간의 delay가 발생하는 문제가 있다. 이들 함수는 애니메이션을 위해서 생겨난 기능은 아니기 때문이다. 애니메이션 구현을 위해서는 끊김없이 부드럽게 처리가 돼야 하는데, 다행히도 이를 위한 메서드를 브라우저가 제공하고 있다. requestAnimationFrame() 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 한다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받는다. *다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()을 호출해야한다. w..
edwith_부스트코스_웹 프로그래밍 2020. 3. 11. 16:01
[부스트코스]{1. 웹 프로그래밍 기초}(3. CSS)_2. CSS style 변경 & element가 배치되는 방법! CSS layout

CSS 기본 스타일 변경 하기 font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠. font 사이즈 변경 font-size : 16px; font-size : 1em; (상속 받은 부모의 크기 기준으로 n배) 배경색 background-color : #ff0; background-image, position, repeat 등 background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능 글씨체/ 글꼴 font-family:"Gulim"; font-family : monospace; #예시 CSS layout #엘리..
edwith_부스트코스_웹 프로그래밍 2020. 2. 6. 18:34
[부스트코스]{1. 웹 프로그래밍 기초}(3. CSS)_1. 선언, 상속, 우선순위, 그리고 selector

CSS(Cascading Style Sheet) 선언 #CSS의 구성 span : selector(선택자), color : property, red : value #CSS 선언 방식 세가지 Inline HTML 태그 안에다가 직접 선언 최우선으로 적용됨 Internal style 태그로 지정 (단점) 구조와 스타일이 섞이게 되므로 유지보수가 어려움 (장점) 별도의 CSS 파일을 관리하지 않아도 되고 서버에 CSS 파일을 부르기 위한 별도의 브라우저 필요 없음 External 외부파일(.css)로 지정하는 방식, CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋음 현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 함 internal 코드와 같은 CSS 코..
edwith_부스트코스_웹 프로그래밍 2020. 2. 6. 17:11
이전 Prev 1 2 Next 다음