개발 (50) 썸네일형 리스트형 CSS transition 기초 참조 : https://www.youtube.com/watch?v=Zp-n49r9TCA 예를 들어 hover하면 색이 변하는 박스를 만든다면 기본 상태 element가 있고 css로 :hover 효과로 다른 색을 지정할 수 있다. 이때 두가지 선택지가 있다. 1. 직접적인 엘리먼트에 transition 넣기 -> hover할때 안할때 모두 자연스럽게 색이 변함 2. hover 이벤트에 transiton 넣기 -> 마우스를 올릴때만 자연스럽게 색이 변함, 뗄 때에는 바로 띡하고 색이 돌아옴 마우스를 올리고 1초뒤에 transition이 일어난다. 마찬가지로 1. transition과 원상복구가 자연스러우려면 직접적 요소에 delay를 주어야함 2. 원상복구는 그냥 냉정하게 처리되려면 이벤트에 delay주기.. CSS fadein fadeout Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다. FadeIn: 서서히 생기는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } @keyframes fadein { /* 효과를 동작시간 동안 0 ~ 1까지 */ from { opacity: 0; } to { opacity: 1; } } @keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 from을 시작으로 to로 변화하는 과정을 만들 수 있다. FadeOut: 서서히 사라지는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } .. CSS 가상 클래스 선택자 개요 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 .. HTML - 검색엔진 최적화 - 웹접근성(음성, 키보드로도 웹사이트 접근 용이하도록) - 직관성, 유지보수성 브랜드, 로고 메뉴 주요 내용 독립적으로 고유한 정보를 사용할 때 ariticle 안 / main 안에서 - 서로 연관 있는 내용들을 묶어주고 싶을 때 회사, 웹사이트에 대한 정보 강조하는 이탤릭체 시각적 이탤릭체 정말 중요한 볼드체 시각적 볼드체 순서가 있는 목록 순서가 없는 목록 단어, 설명을 나타낼 수 있음(정의, 설명 목록) 특정한 액션 시 어디론가 이동할 시 행*열 데이터 수평선 태그는 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰인다. 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있다. 이 .. Typescript 짧은 상식 interface(인터페이스) interface User { name: string; id: number; } // ---cut--- const user: User = { name: "Hayes", id: 0, }; 타입스크립트를 객체형식에서 사용하려면 interface를 이용해야 한다. type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9; 유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다. boolean 타입을 true 또는 false로 설정할 수 있다. 자바스크립트 기초 프로그래밍 공부를 하면서 하루라도 서둘러 실무에 투입되고자 개인프로젝트부터 시작했다. 아무런 지향성 없이 절차지향적으로 코드를 작성하다보니 애로사항이 꽃피고 있다. ES6를 제대로 학습하지 못해 var const let 키워드를 혼용하여 사용하기도 했다. 기능 단위로 함수를 만들었지만 클로저를 제대로 활용하지 못해 전역변수를 사용하기도 했다. 부족함을 깨닫고 블로그를 열었다. 당분간 다음 세 가지에 대한 포스팅을 생각하고 있다. 1. 절차지향vs객체지향vs함수형 프로그래밍. - FP in JS (자바스크립트로 접해보는 함수형 프로그래밍) - 코드 스타일 (velog.io) 2. ES6 3. 클로저 새롭게 알게 된 HTML 태그 출처 : http://tcpschool.com/html/html_basic_images 줄을 나누고 싶어서 이렇게 줄을 나눠봤습니다. 과연 그대로 출력이 될까요? 줄을 나누고 싶어서 이렇게 줄을 나눠봤습니다. 과연 그대로 출력이 될까요? 태그를 사용할 경우 띄어쓰기, 엔터 등이 작성 내용 그대로 표현되지 않는다. 태그는 내용 그대로 표현된다. 내용 HTML 삽입 미리보기할 수 없는 소스 "이 부분"만 하이라이팅하고 싶어요. HTML 삽입 미리보기할 수 없는 소스 HTML5 HTML 삽입 미리보기할 수 없는 소스 엔티티(Entity) HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부른다. 이러한 HTML 예약어를 HTML 코드에서 사용.. 조건부 가장 일반적인 것은 if-else 문이다. if (count == 42) { println("I have the answer.") } else { println("The answer eludes me.") } 일반적인 if문과 다르지 않다. else if를 사용하여 여러 '조건'을 나타낼 수 있다. 단일 조건문 내에서 더욱 상세하고 복잡한 논리를 표현할 수 있다. if (count == 42) { println("I have the answer.") } else if (count > 35) { println("The answer is close.") } else { println("The answer eludes me.") } 조건문을 변수화하여 사용성을 높일 수 있다. val answerString: .. 이전 1 ··· 3 4 5 6 7 다음