랄지 IT
CSS 입문 지식 본문
CSS를 사용하는 이유
- 중복의 제거
- 효율적
CSS는 클래스 여러개면 가장 나중에 선언된 애의 말을 듣는다
width 발음 위스
height 발음 하이츠
div, span: 무색무취의 태그임
css 최신기술 사용해도 되나? 안되나?를 확인할때
caniuse.com 사이트에서 확인
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
반응형 웹 or 반응형 디자인(responsive web) 이란?
- 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
- 미디어 쿼리 @media(min-width:800px){} 사용해서 작업함
css 링크태그 <link rel="stylesheet" href="style.css">
- 캐시: 파일을 내 컴에 저장함, 효율적임
input 태그 id랑 label 태그 for 속성 맞춰쓰면 연결됨
~ 이후의 선택자를 가리킴
input[type="checkbox"]:checked~ul{
display: none;
}
fontello.com 아이콘 사용할때 유용한 사이트 (문자형식으로 만들어 임폴트 후 font family 지정하고 사용)
Fontello - icon fonts generator
This site will not work if cookies are completely disabled. {"assets_hash":"1f309fb7aec88ff26c36cb97224caa56","page_data":{},"locale":"en-US","layout":"fontello.layout"}
fontello.com
필요한 폰트 있을때 구글 폰트 활용 fonts.google.com
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
List Apart는 웹 표준과 모범 사례에 특별히 중점을두고 웹 콘텐츠의 디자인, 개발 및 의미를 탐색하는 웹진입니다
A List Apart
For people who make websites
alistapart.com
holy grail layout 기본 구성
div container
header
section content
main
nav
aside
footer
box-sizing: border-box 보더 포함 사이즈로 지정됨
콘텐츠(가운데 메인부분) 늘어나면 아랫쪽에 붙어버리고 이상해지는것 방지 위해 패딩 바텀, 마진 바텀 주고, 오버플로를 히든으로 해준다
깨지는 레이아웃 컨테이너 min-width 로 체크해두고 더이상 안줄어들도록.. or 미디어 쿼리(위치는 아래루) 써서 쌓이는 형태 =로 바꿔준다
templated.co html,css 템플릿을 제공하는 사이트
TEMPLATED
A collection of 867 Creative Commons-licensed CSS, HTML5 and Responsive site templates created by Cherry, Doni, AJ, and co.
templated.co
사용자에게 정보 받을 수 있는 폼, 설문 질문 등
Typeform: People-Friendly Forms and Surveys
Build beautiful, interactive forms — get more responses. No coding needed. Templates for quizzes, research, feedback, lead generation, and more. Sign up FREE.
www.typeform.com
parallax scrolling : 스크롤하는 레이아웃, 고정된 배경으로 공간감을 느낄 수 있다
뷰포트란, 사용자의 시선, 사용자가 보고 있는 화면을 의미함
<meta name="viewport" content="width=device-width, initial-scale=1.0">
를 사용하게 되면 모바일에 적합한 뷰포트, 데스크탑에 적합한 뷰포트 기준으로 자동 설정됨
가운데 정확히 이동시키고 싶으면 position과 transform(translate) 속성 이용해서,
position: relative left top50%
transform: translateX(-50%) translateY(-50%)
이런식으로 사용
background-attachment: fixed 배경 고정
사용자에게 정보 받는 에디터 페이지
CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor
Rock-solid, free WYSIWYG editor with collaborative editing, 200+ features, full documentation and support. Join Microsoft, Mozilla, IBM and 20k+ other companies.
ckeditor.com
Disqus는 소셜 댓글 서비스입니다
https://disqus.com/
disqus.com
리로드할때마다 랜덤 배경이미지 생성
- https://source.unsplash.com/ - https://source.unsplash.com/random
- http://loremflickr.com/ - http://loremflickr.com/1280/720
- http://pipsum.com/ - http://pipsum.com/1280x720.jpg
- https://unsplash.it/ - https://unsplash.it/1280/?random
모션그래픽 라이브러리 자바스크립트 라이브러리
http://ww1.mojs.io
ww1.mojs.io
링크를 누르면 페이지 리로딩이 일어납니다. 이런 문제를 완화하기 위해서 나온 방법이 ajax입니다.
하지만 ajax로 변경된 정보에는 url로 접근하는 것이 어려웠습니다. html5에서는 이런 문제를 해결하기 위해서 history.pushState, history.replaceState라는 기능이 추가 되었습니다.
- 에이젝스는 부분적으로 리로드되는 것 -> 페이지 전체가 아님
- 사클처럼 페이지 바껴도 음악은 안멈추는 그런 기능 만들 수 있음
- 히스토리 페이지 왓다리 갓다리 하는 거에 대한 역사임
제이쿼리 사용 위해서는 라이브러리 추가후, 스크립트 태그안에
$document.ready(function(){
이안에 코드를 작성해줘야함
});
event prenentDefault() > 웹페이지가 기본적 동작하는 이벤트 막아버림
여지껏 방문했던 페이지에 대한 역사: 히스토리 객체
페이지는 로드되지 않지만, url 바뀌고 부분적으로 교체
github 호스팅
git 사용시 디렉토리를 깃 폴더로 지정하게 되면 .git이라는 폴더가 숨김으로 생성됨
freenom.com 공짜도메인
Freenom - A Name for Everyone
Cost Price Free Special
www.freenom.com
oauth
api 사용시 , access token로 리소스 서버에서 정보를 받아낼 수 있는것임
구글 클라우드 플랫폼 가서 oauth 등록해서 사용
api 메뉴얼 보면서 사용
sdk는 일종의 라이브러리: 쉽게사용할 수 있도록 제공함
스터디 사이트: 생활코딩
WEB2 - CSS
WEB2 - CSS - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인
opentutorials.org
겁나 빠른 웹 레시피
겁나 빠른 웹 레시피 - 생활코딩
웹 프론트엔드 레시피는 HTML, CSS, JavaScript를 이용해서 여러 UI를 만들기 위해서 필요한 재료와 결합방법 그리고 순서를 설명해드립니다. 이 수업을 통해서 UI에 대한 실전적이고 실천적인 사례들
opentutorials.org
CSS 사용이유, caniuse, 반응형 웹, fontello, 구글 폰트, List Apart, holy grail layout 기본 구성, box-sizing: border-box, css 기본 template 참고, 랜덤이미지, ajax(에이젝스) 조금, 모션그래픽 라이브러리, 댓글 서..