흰둥이는 코드를 짤 때 짖어 (왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!)

자바스크립트(JavaScript) 1995년 넷스케이프 커뮤니테이션즈: 네비게이터 브라우저가 90% 이상의 점유율 1996년 브랜던 아이크 동적인 프로그램을 개발하기 위해 언어(모카, 10일만에 개발)를 개발 네비게이터2에 탑재(모카 -> 라이브스크립트 -> 자바스크립트) MS의 익스플로러의 jscript 호환성 문제로 크로스 브라우징 이슈가 발생 1997년 자바스크립트는 ECMAScript(비영리 표준화 기구 ECMA 인터내셔널)로 명명됨 1999년 비동기적(Asynchronous) 서버와 브라우저가 데이터를 교환할 수 있는 통신기능 Ajax(Asynchronous JavaScript and XML) 2005년 구글이 발쵸한 구글맵에 Ajax기술을 사용 크롬 발표함(V8 자바스크립트 엔진) 2006년 ..

CSS 우선순위 계산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 계산식 inline: 1000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 CSS css.css div{ background-color: purple; } HTML css 우선순위 div 1번(인라인 스타일 우선: aqua) div 2번(id 점수 우선: deeppink) div 3번(class 점수 우선: greenyellow) div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: pink) div 5번(같은 요소일 ..

css animation 요소의 현재 스타일을 다른 스타일로 변환 @keyframe 시작: 0%, from 과정: 1%, 3%, 10%, .. 끝: 100%, to 0% 5% 50% ... 100% 장면1 장면2 장면3 끝 장면 animation-name: 애니메이션의 이름을 설정 animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정 forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지 animation-direction: 애니메이션의 진행 방향을 정하는 속성 reverse: 반대 순서로 진행 alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행 reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행 animati..

css 2D transform 2차원 좌표에서 요소를 변형시키는 속성 translate: 이돌 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 CSS p { width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5) } #translate { transform: translate(30px, 50px); background-color: deeppink; } #rotate{ transform: rotate(60deg); background-color: gold; } #scale { transform: scale(1.5, 1.2); background-color: orange; } #skew { transform: skew(30d..

시험문제 1. 학생을 등록한다. 2. 학생의 등록된 정보를 성적(평균)으로 내림차순으로 출력한다. (단, 학생의 점수가 있을 경우 점수도 같이 출력한다. 등록된 학생의 전체 수와 해당 학생의 석차를 같이 출력한다. 동점인 경우 학번으로 내림차순으로 함) 3. 학생정보를 수정한다. 4. 학생정보를 삭제한다. 학생정보를 삭제할 경우 점수도 같이 삭제한다. 5. 학생정보를 검색한다. (단, 학생의 점수가 있을 경우 점수도 같이 출력한다.) 6. 학생점수를 등록한다. 점수를 등록할 때 총점, 평균을 계산하여 같이 저장한다. 7. 학생점수를 수정한다. 점수를 수정할 경우 총점, 평균을 계산하여 같이 저장한다. 8. 학생점수를 삭제한다. 9. DAO, DTO를 작성한다. 10. View를 이용하여 데이터를 불러온다..

미디어 쿼리(media query) 반응형 웹 하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 @media 매체유형 and (속성에 대한 조건){ css 코드 ... } ✅매체 유형 all: 모든 매체 screen: 컴퓨터, 태블릿, 스마트폰 ... print: 프린터 speech: 스크린 리더 body{ background-color: beige; } @media screen and (min-width: 1024px) { body { background-color: deepskyblue; } } 브라우저의 가로길이에 따라 배경색이 바뀌는걸 확인할 수 있다. em 과 rem 상대적인 크기를 정하는 단위 em 부모 요..

다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼을 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-gap: 단과 단사이의 여백을 설정 column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all) CSS div, h2, p { margin: 0; padding: 0;} h2 { padding: 0 0 20px; text-align: center; } div.col { text-align: justify; padding: 20px; background-color: gold; border: 3px solid red; column-count: 3;..

박스 모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) 내용과 테두리 사이의 간격 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽순으로 설정 CSS #padding1{ padding: 10px 30px 20px 40px; } #padding2{ padding: 20px 30px 40px; } div#padding{ padding: 30px 50px; } div#padding{ padding: 20px; } HTML 패딩 Lorem .....