기록저장소

웹접근성 : 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것1. 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 함   ex) input type = image, button, image map area / html태그로 표현도 가능 다음컨텐츠보기다음컨텐츠보기.arrow{background-image: url(../img/arrow.png);} 도일리자수#프랑스자수 2. 자막제공 : 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 함3. 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야 함   ex) 색만 아닌 패턴이나 모양으로도 구분4. 명확한 지시사항 제공 : 지시사항은 모양, 크기..

반응형 웹 1강. 반응형 웹 h1{font-size: 24px;} @media (min-width: 768px){ h1{font-size: 36px;} } @media (min-width: 992px){ h1{font-size: 48px;} } 2강. 반응형 그리드 3강. 이노 //세로정렬 .helper{ display:inline-block; vertical-align: middle; } .center{ display:inline-block; vertical-align: middle; } 부트스트랩 1강. 새로운 기술을 배우는 법 2강. 부트스트랩 소개 twitter 개발자 제공의 HTML, CSS, JS 프레임워크 css, js 스타일태그 가져오기 3강. 부트스트랩 그리드 container, row(..

포지셔닝 1강. relative 포지션 position: static default값으로 기본으로 있어야할 곳에 위치함 position: relative 상대적인, 요소의 원래 위치를 기준으로 이동, 위치를 옮겨도 기존 공간은 차지함 2강. 해변의 몽숭이 3강. 명언 4강. fixed 포지션 position: fixed 브라우저를 기준으로 고정된 위치, 기존 공간 상실 5강. absolute 포지션 포지셔닝이 안 된 요소 / 포지셔닝이 된 요소 static / relative, absolute, fixed relative : 원래 위치 기준 fixed : 브러우저 기준 absolue : 가장 가까운, 포지셔닝된 조상 요소 기준 6강. 우표 붙이기 float 1강. float float : 3d공간에서 위..

CSS 제대로 활용하기 1강. 선택자 정리 //태그이름 h1 {color: orange;} //클래스,아이디 .important {color: orange;} #favorite {color: blue;} //자식 .div1 i {color: orange;} //직속자식 .div1 > i {color: orange;} //복수선택 .two, .four {color: orange;} //여러조건 .outside.one {color: blue;} //가상클래스(pseudo-class) .div1 p:nth-child(3) {color: blue;} //.div1의 자식인 태그 중 3번째 .div1 p:first-child {color: red;} //.div1의 자식인 태그 중 첫 번째 .div1 p:last..

Box Model 1강. Box Model 소개 border, margin, padding 2강. margin, padding 3강. margin & padding 정리 padding : 위 우 아래 좌 margin : 위 우 아래 좌 margin-left : auto; margin-right : auto; margin : 0 auto; padding과 margin의 차이 내용(content), 패딩(padding), 테두리(border)로 이루어진 요소에서 내용과 테두리사이의 여유공간이 padding 요소 주위의 여백은 margin 4강. width, height 5강. width, height 정리 width, min-width, max-width height, min-height, max-heigh..

수업소개 1강. 서비스가 주도하는 시대에 살아남는 법 서비스가 주도하는 시대 _ 서비스를 통해 새로운 가치창출, 웹 왜 하필 '웹'일까? _ 연결고리, 모바일앱 -> Progressive Web Apps(PWAs) '프로그레시브 웹 앱'은 웹의 장점과 앱의장점을 결합한 것이며, 앱 수준과 같은 사용자 경험을 웹에서 제공하는것을 목적으로 함, All-in-One 어플리케이션 웹접근성은 https://www.w3.org/TR/WCAG21/ (한글 비공식 번역은 http://www.kwacc.or.kr/WAI/wcag21/) 웹표준은 https://www.w3.org/standards/ https://seulbinim.github.io/WSA/ 2강. 1분 안에 웹사이트 런칭하기 repl.it 온라인 프로그래..