반응형 분류 전체보기51 기본적인 뉴스티커(News ticker) 기능 구현 안녕하세요 :0 원래는 JavaScript도 기본부터 정리를 할까 했는데, 게으른 저 때문에 많이 지연되고 있어서 일단은 기본은 잠시 내려두고 학원에서 배운 내용과 포트폴리오에서 사용되는 기능들 위주로 정리를 해서 업로드를 하면서, 중간중간에 기본 내용들은 정리하는 식으로 할까 합니다. 포트폴리오에서 사용되는 js에 관한 소스들이나, 디자인 요소들의 유입이 많아서 최대한 빨리 포트폴리오에 도움이 되는 게시글로 자주 찾아뵙겠습니다 오늘은 뉴스티커 기능을 구현해볼까 합니다. 뉴스티커란? 네이버 웹페이지에서 많이 볼 수 있는 기능으로 최근에 없어진 실시간 검색어나, 뉴스 등 한 줄씩 보여주면서 위로 올라가는 기능인데, 예시로 네이버 뉴스를 보여드리고 시작하도록 하겠습니다. 위의 영상에서 빨간색 상자 부분이 뉴.. 2021. 8. 5. JavaScript란? JavaScript란? 웹을 풍부하게 만들어주는 작고 가벼운 언어로, 웹페이지에 기능을 더해 HTML 웹페이지를 동적으로 살아있게 만들 수 있다. JavaScript 특징 객체기반의 언어지만 Java와 다른 프로토타입 기반의 객체지향이다 (상속과 클래스 개념은 없다) 인터프리터언어로서 클라이언트의 웹 브라우저에 의해 해석과 실행이 가능하다 HTML문서내에 기술이되고, HTML과 함께 수행하다보니까 소스코드가 공개가 되어 보안에 취약하다 컴파일 작업을 거치지 않고 소스코드를 바로 실행할 수 있어 다른 언어와 비교했을때 빠른 시간안에 스크립트 코드를 작성 가능하다 단순한 코드와 원칙을 가지고 있어서 초보 개발자들이 쉽게 배울 수 있는 언어이다 내부에서 제공되는 기능이 제한적이고, 관련된 개발 툴이 적다 Ja.. 2021. 7. 16. CSS 문단 속성 문단 속성 글자 사이의 간격이나 정렬, 들여 쓰기 등 문단에 관련된 스타일을 지정 1. letter-spacing, word-spacing letter-spacing : 글자 사이의 간격 / word-spacing : 단어 사이의 간격 값이 커지면 간격이 넓어지며, 음수 값도 가능하다 (음수 값일 경우 글자가 겹쳐질 수 있음) 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변화 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변화 X Hello World Hello World Hello World Hello World Hello World 실행결과 2. text-align block 요소 안에 있는 inline 요소에 적용 가능 block 요소에만 text-align 속성을 적용 가능 정렬되는 건 .. 2021. 7. 15. Daily UI :: 005 "App Icon" UI 디자인하기 네 번째 Design 주제 App Icon Design 힌트 Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps? 아이콘은 일러스트로 작업하였습니다. 스토리텔링을 보면 주제를 하고 싶은 단어들을 나열하다가 맘에 든 주제 하나를 선택하여서 해당 단어를 가지치기를 해서 원하는 디자인을 생각하는 시간을 가졌습니다. 정리를 해보자면 단어는 일기로 선정하였고 일기를 생각하면 매일 꾸준히 작성을 하고, 저녁에 하루를 되돌.. 2021. 6. 21. 이전 1 2 3 4 5 6 ··· 13 다음 반응형
