반응형 분류 전체보기 HTML&CSS 2022. 2. 7. 초보 웹개발자의 필수 CSS 작성 규칙 TOP 10 1. CSS Reset은 필수다. 가장 중요하기 때문에 1번입니다. CSS 리셋을 하는 방법은 여러 가지가 있습니다. 용도에 따라 자신만의 CSS 리셋을 만들어 쓰기도 하지만, 기본적으로 CSS 리셋은 더 최적화되고 적은 CSS 속성을 작성할 수 있도록 도움을 주는 가장 기본적인 CSS 코드 작성입니다. CSS 리셋은 브라우저간의 기본 속성 차이로 인해 발생하는 CSS 호환성 문제를 줄여주고, 단일 CSS 코드만으로 모든 브라우저에 같은 UI를 표시하는데 도움을 줍니다. 최근에는 브라우저간의 호환성 문제가 줄어들면서 이런 CSS 리셋의 중요도가 다소 불필요하게 보일 수도 있지만, 남용하지만 않으면 여전히 고전적이면서도 뛰어난 CSS 기법 중 하나입니다. * { margin:0; padding:0; } *.. 티스토리스킨/스킨 활용&패치 2022. 2. 6. 티에디션, 테터데스크 종료에 따라 기본으로 적용되는 Whatever 스킨 기본 설정 방법과 썸네일 커스터마이징 방법 안내 2022년 2월 기준 Whatever 스킨을 기준으로 작성한 내용입니다. 이후 스킨이 패치된 경우 내용이 다소 다를 수 있습니다. 가장 최근 배포된 티스토리 레퍼런스 스킨 7종은 기본적인 구조와 스킨 옵션 설정 방법이 대동소이합니다. 사용자단의 디자인과 카테고리 표시 여부 정도가 다르다고 생각하면 됩니다. 2022년 3월 말에 티스토리 메인 화면을 꾸미는 기능인 티에디션, 테터데스크 서비스를 종료할 예정입니다. 사용자가 거의 없는 기능인데다 반응형 스킨 사용으로 티스토리 이용 환경이 바뀌면서 조금씩 무쓸모가 되어가던 기능이었습니다. 티에디션, 테터데스크가 종료된 후에는 티스토리의 기본 모바일 서비스도 종료되면서 반응형 스킨을 이용하는 구조로 티스토리 이용 환경이 완전히 정착하게 될 수도 있어 보입니다. .. Javascript 2022. 2. 3. 흐르는 주가 전광판 스타일의 무한 롤링 배너 만들기 고정된 크기를 가지는 이미지들을 전환하는 이미지 슬라이드 배너를 제외하고, 많은 웹사이트에서 가장 사용하는 배너 방식이 텍스트 롤링 배너입니다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너입니다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있습니다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 됩니다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 훨씬 더 쉽습니다. 무한 롤링 배너 종류중 많은 아이템을 무한 회전시키는 주가 전광판 스타일의 배너를 제작해 보겠습니다. 내용 끝부분에 완성된 소스의.. 일상·여행 2022. 2. 3. 북한산 의상능선 종주 후기 다녀온지는 좀 되었는데 날이 추워서 산에 못 가니 사진만 뒤적거리다 정리를 했습니다. 서울 시내에 있는 산행 코스 중에서는 꽤 험하기로 이름난 의상 능선에 다녀왔습니다. 폭설 내리기 전이라 다행히 눈때문에 힘든 건 없었지만 그래도 명불허전인지라 꽤 힘들었습니다. 의상능선 코스는 반환점인 대남문까지 의상 능선을 타고 갔다 대서문 쪽으로 돌아서 하산하는 대충 둥근 환형 코스입니다. 대남문에서 하산하는 코스는 트래킹 수준의 평평한 관광 코스라 난이도도 낮고 등산객들도 정말 많습니다. 경치는 당연히 하산하는 사찰 코스쪽이 좋습니다. 사찰도 여러 개 있고... 목표가 의상능선 코스여서 북한산 입구에서 바로 의상능선 코스로 갈라집니다. 의상능선 코스가 길이 좁아서 사람들 부대끼면 힘들기 때문에 해뜨기 전에 도착해서.. 카테고리 없음 2022. 2. 3. 속보형 무한 롤링 텍스트 배너 만들기 작은 영역 안에 여러 개의 단문 텍스트를 무한 롤링해서 표현하는 배너를 이용하면 작은 웹페이지의 자투리 영역을 활용하거나 주목도가 높은 배너를 제작할 수 있습니다. 기본적으로 가로로 긴 문자열을 위, 또는 아래로 반복적으로 스크롤해서 회전하는 방식으로 제작하기 때문에 구조는 아주 단순합니다. CSS로 최적화를 잘 하면 라이브러리나 모듈로 구현하는 방식보다 단순하고 가볍게 구현할 수 있고, 이 방법을 이용해서 배너를 구현해보겠습니다. 설명 맨 끝에 완성된 코드 압축 파일 링크가 있습니다. 다운로드해서 동작하는 방식을 확인해가면서 읽으면 이해가 더 쉽습니다. 무한 롤링 텍스트 배너 HTML 작성하기 먼저 배너의 HTML 구조는 다음과 같습니다. ".rollingbanner" 클래스가 배너의 루트 요소가 됩니.. 티스토리스킨/반응형 2단 스킨 2022. 1. 25. 티스토리 반응형 스킨 121 디모드(Dmode) 스킨 배포합니다. ----------------------------------- 2022-05-22 1.10 패치 안내 모바일 보기 화면에서 글목록 아이템 하단에 불필요한 여백이 발생해서 균형이 안맞아 보이는 현상 개선 모바일 보기 화면에서 검색 입력 필드 활성화를 하면 검색바가 사라지는 버그 패치 ----------------------------------- 2022-03-30 1.01 패치 안내 헤더 표시 카테고리를 사이드바로 옮기면 검색바가 표시되지 않던 버그 패치. 기존 사용자는 style.css script.js 재적용 해야 합니다. 배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다. 임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다. 2022년 배포 스.. Javascript 2022. 1. 22. 다크모드 토글 기능 구현과 다크모드 토글 디자인 구현 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 어떤 방법을 사용해도 무방합니다. CSS 클래스로 구현 다크모드 구현은 다크 모드용 컬러 CSS 클래스를 정의한 후 자바스크립트로 , 또는 태그에 다크 모드용 클래스를 추가하거나 삭제하는 방식으로 구현합니다. 다음 자바스크립트 코드는 'toggle" ID를 가진 요소를 클릭하면 '.dark-mode" 클래스를 태그에 추가하거나 삭제하는 간단한 이벤트 핸들러 입다. 구현하기에 따라서는 ".light-mode", ".dark-mode" 2개의 클래스로 적용하는 테마 컬러를 전환하는 클래스를 각각 구현할 수도 있습니다. d.. Javascript 2022. 1. 20. 서버 없이 자바스크립트로 파일 생성해서 셀프 다운로드 하기 자바스크립트를 이용하면 별도의 웹서버 기능 없이도 파일을 생성해서 다운로드할 수 있습니다. 텍스트 기반인 파일은 종류에 상관없이 생성할 수 있습니다. HTML5 표준을 지원하는 웹 브라우저에서는 모두 지원되는 표준 기능이며, 하이퍼링크 태그()의 "href" 속성을 활용해서 구현합니다. "href" 속성은 하이퍼링크 태그를 통해 이동하는 URI를 표시하는 속성입니다. 대상 링크는 다른 HTML 문서일 수도 있고, 이미지나 사운드와 같은 리소스 파일이거나 텍스트 파일일 수도 있습니다. 그리고 하이퍼링크 태그에는 새로운 HTML5 속성이 하나 더 있습니다. 하이퍼링크 태그에 "download" 속성을 표시하면 하이퍼링크로 가리키는 연결된 페이지, 또는 리소스 파일을 웹 브라우저에서 열지 않고 파일로 다운로드.. 테크팁·활용 2022. 1. 20. 티스토리 에디터 팁 - 이미지를 파일로 저장하지 않고 복사&붙여넣기로 이미지 추가하기. 티스토리 에디터가 기능 개선이 되면서 추가된 편의 기능인데 아마도 많은 티스토리 블로거가 모르는 내용일 듯합니다. 알아두면 글쓰기를 좀 더 편하게 할 수 있을 것 같아서 소개합니다. 티스토리 글쓰기 에디터에 이미지를 붙여 넣는 방식은 상단 이미지 아이콘(첨부) 클릭 후 "사진" 메뉴를 선택해서 이미지 파일을 선택하는 방식입니다. 다량의 이미지(최대 50개)를 한꺼번에 데이터에 가져올 수 있어서 한꺼번에 이미지를 붙여 넣은 후 글 내용을 작성하기가 좋습니다. 다만, 대량 이미지를 붙일 일이 없거나 캡처한 이미지를 가져와 사용할 때는 이 과정이 조금 번거로워집니다. 특히 캡처한 이미지를 글에 붙일 때는 더 번거로워집니다. 티스토리 에디터는 상단 메뉴 기능으로 이미지 파일을 가져오는 방법 말고도 이미지를 에디.. 일상·여행 2022. 1. 20. 광교산 주말 등산 후기 일 때문에 바빠서 못 가던 등산을 올해 처음 갔습니다. 동네 뒷산처럼 겨울철이면 동계 운동 대신으로 가끔씩 올라갔다 오는 산입니다. 멀지 않아서 좋고, 공영주차장 시설이랑 화장실이 잘 되어있어서 이용하기도 편합니다. 영하의 추운 날씨라 사람이 별로 없을 줄 알았는데 역시 토요일은 토요일입니다. 7시 반인데도 주차장은 거의 만석입니다. 주로 공영주차장 2층에 주차하고 구름다리를 건너 바로 광교산 등산로 입구로 들어갑니다. 입구에서 한참 걸어 들어가야 등산로 시작되는 다른 산들과 달리 광교산의 최대 장점입니다. 광교저수지는 완전히 얼어붙어있습니다. 작년에는 얼어있는 광교저수지를 본 기억이 거의 없는데 올 겨울에는 계속 얼어있는 호수만 보게 됩니다. 광교산 등상로는 주차장 바로 맞은편입니다. 왼쪽에는 반딧불이.. 티스토리스킨/스킨 활용&패치 2022. 1. 19. 티스토리 공식 레퍼런스 북클럽 스킨의 썸네일 이미지 표시 방법 변경하기 같은 질문에 계속 올라가서 대응 차원에서 안내를 합니다. 작성일자 기준의 레퍼런스 스킨 중 북클럽 스킨에 대한 안내이며, 이후 스킨이 패치된 경우 내용이 다소 다를 수 있습니다. 작성일자 _2022.01.19 스킨은 배포한 해당 제작자에게 문의를 해야 하며, 공식 레퍼런스 스킨은 티스토리에 문의를 해야 합니다. 레퍼런스 스킨이나 다른 제작자가 배포하는 스킨과 관련한 질문은 받지 않습니다. 같은 질문이 자꾸 올라가서 중복 댓글 방지를 위해 썸네일 이미지 설정을 바꾸는 방법을 안내합니다. 북클럽 스킨의 썸네일 이미지의 기본 구조 티스토리에서 공식 스킨으로 배포하는 스킨들 중 2020년 겨울부터 배포하는 최근 스킨들은 일부를 제외하고는 모두 같은 구조로 제작된(같은 디자이너로 추정) 스킨입니다. 북클럽 스킨 .. 티스토리스킨/반응형 2단 스킨 2022. 1. 19. 반응형 티스토리 스킨 120 페민(fEmine) 스킨 배포합니다. ---------------------------------------------------------- 2022-05-21 1.1 패치 배포 모바일 화면 보기시 화면 스크롤 상태에서 검색바 활성화를 하면 블로그 타이틀과 겹쳐보이는 현상 개선 모바일 화면 보기시 글 목록 아이템 하단 여백이 상단 여백보다 넓어 불필요한 공간을 차지하는 현상 개선 ---------------------------------------------------------- 배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다. 임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다. 2022년 배포 스킨부터는 인터넷 익스플로러에 대한 공식 지원을 중단합니다. 인터넷 익스플로러에서 사.. 이전 1 2 3 4 5 6 7 ··· 70 다음 반응형
