반응형 Web30 기본적인 뉴스티커(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. CSS 글자속성 글자 속성 글자의 스타일을 지정 📢 들어가기 전 살펴봐야 할 것 더보기 상속이라는 개념을 잡고 가야 될 거 같아서 정리합니다. 상속이란?? 부모요소의 스타일을 자식요소에 전달되는 것을 의미합니다. 부모와 자식관계를 통해 속성값의 상속이 가능하게 된다. 속성값은 부모로 부터 자식으로 전달된다 상속을 받고 싶지 않을 때는 자식요소에 따로 직접 스타일일 지정하면된다. 하지만 모든 속성들이 상속되는건 아니다. font-size 글자의 크기를 설정 font-family 글꼴을 설정 font-weight 글자의 두꼐를 설정 font-style 글자의 기울기를 설정 font-variant 대소문자에 대한 설정 line-height 줄 간격을 설정 1. font-size 글자의 크기를 설정하는 스타일 보통 px와 같은.. 2021. 6. 11. 이전 1 2 3 4 5 6 ··· 8 다음 반응형
