본문 바로가기

html+CSS+JS/html+CSS

[쫌쫌따리 스터디] 초간단 오픈채팅방 복기 사이트 만들기 완성!!
html+CSS+JS/html+CSS 2023. 5. 1. [쫌쫌따리 스터디] 초간단 오픈채팅방 복기 사이트 만들기 완성!! 몇개월 전, 카톡이 오류가 생겼는지 갑자기 멈추면서 아무것도 안 되고, 이게 반복됐습니다... 고민 끝에 다시 설치했지만 싹 다 날아가버린 오픈카톡 내용... 온라인 타로나 상담 내용 등 복기해두고 싶은 내용들이 있다 보니 상대방에게 부탁해서 txt파일을 받는데는 성공했지만... 보는데 눈알이 빠질 것 같았습니다... 거기다 대화분량이 어마무시해서ㅠ 그래서!! 카톡 오픈채팅 내보내기 한 txt를 카톡 화면처럼 볼 수 있도록 만들어 보았습니다 아래처럼!! 킹지's 카톡 복원 편하게 보기 majestic-torte-16c3b9.netlify.app 코드 숨긴 건 하나도 없습니다!! 헤더 우측의 버튼을 눌러서 주간 모드, 야간 모드로 나눠서 볼 수 있고 (색상 팔레트는 순전 내 취향:3) 처음부터 볼지, 끝부..
[BS] 부트스트랩 설치 방법
html+CSS+JS/html+CSS 2020. 10. 21. [BS] 부트스트랩 설치 방법 Bootstrap 이란? 웹사이트를 쉽게 만들 수 있도록 도와주는 HTML, CSS, Java Script 프레임워크. 하나의 css로 다양한 기기에서 사용될 수 있는 반응형 웹사이트를 만드는데 최적화 되어 있습니다. 반응형 웹사이트 제작을 위한 그리드 설정 및 버튼, 도표 등 어느정도의 css가 만들어져있기에 제작, 유지, 보수하기 보다 편합니다. 다만, Bootstrap에서 제공하는 디자인과 다른 외형을 원하는 경우가 많은지라 column(그리드) 시스템 활용도가 가장 높고 디자인적인 부분은 반영되지 않은 사례를 많이 볼 수 있습니다. Bootstrap 설치 방법 Bootstrap 홈페이지로 들어갑니다. 링크 한글로 번역된 페이지도 존재합니다만 업데이트가 많이 느린 관계로 공식 홈페이지로 들어갑니다...
html+CSS+JS/html+CSS 2020. 10. 20. [웹퍼블리싱] 클래스, id 이름 짓기: 네이밍 컨벤션 (Naming Convention) Naming Convention 이란? 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 같은 규율 내에서 진행하여 작업 속도를 높이고자 하는 것이기에 필수라고 말할 수는 없으나 권장되는 방식입니다. 회사 및 커뮤니티마다 조금씩 다른 방식을 취하고 있습니다만 큰 맥락은 비슷한 경우가 많습니다. 아래로는 절대적이기 보다 많이 사용하는 내용에 대해 기입해두었으니 참고하는 방향으로 봐주시기 바랍니다. HTML/CSS - ID & Class 영어, 숫자, 특수문자 중 일부만 인식이 가능하다. id는 전체에서 1개만 사용 가능하다. [필수] 첫 시작에는 가능한 문자로 시작하고, 숫자, 특수문자, 대문자의 사용은 지양한..
[CSS/js] 수정/배포로 파일 업데이트 시, 캐시 방지 & 강력 새로고침(캐시초기화)
html+CSS+JS/html+CSS 2020. 5. 29. [CSS/js] 수정/배포로 파일 업데이트 시, 캐시 방지 & 강력 새로고침(캐시초기화) 홈페이지를 만들고 업데이트 할 때, 기존에 있는 캐시 때문에 수정사항이 반영이 안 되는 경우가 생각보다 많습니다. 솔직히 css 파일 뿐 아니라 js 파일도 수시로 업데이트하고 자잘한 오타로 인해 수정하게 됩니다. 그런데 캐시파일 때문에 모처럼의 수정이 소비자의 화면에 반영되지 않는다면? 뿍침 때문에 파일 경로에 임의 쿼리스트링(단순 인자)를 추가합니다. 쿼리스트링 추가이기 때문에 실제 파일경로나 파일명을 바꿀 필요는 없습니다. 이렇게 추가된 쿼리스트링 명만 바꿔도 다른 파일로 인식하기 때문에 서버 관리하기도 편합니다. 여기서 쿼리스트링은 파일경로와 같이 영문과 숫자로 적어주세요. css ex) js ex) import @import url('파일의 파일 경로?쿼리스트링') ex) @import url(..
[css] position : static, relative, absolute, fixed
html+CSS+JS/html+CSS 2019. 9. 11. [css] position : static, relative, absolute, fixed position 요소의 위치를 정해주는 속성. 기본적으로 모든 요소는 좌측 정렬을 하지만 position 속성과 기타 속성(top, right, bottom, left) 등을 이용하여 변화를 줄 수 있다. position: static 위치라는 의미. 기본 값. position: relative 상대적인 위치값. 즉, 상대적인 위치를 지정해주어 하위 요소가 absolute값을 가질 때, 이 요소를 기준으로 움직일 수 있게 된다. position: absolute 절대적인 위치값. 상위 값이 상대적인 위치값(relative)을 가졌을 때, 이를 기준으로 움직임. 때문에 top, right, bottom, left 값을 정할 수 있음. top:값 : relative값이 주어진 상위 요소의 상단을 기준으로 값..
html+CSS+JS/html+CSS 2019. 6. 28. [CSS] 애니메이션 무한반복 (animation, from, to, duration) 애니메이션 부여 과정 1) 애니메이션 속성 부여 (개별 부여) 선택자: {스타일 내용; animation-name: 애니메이션 이름 부여; /* 원하는 선택자에 애니메이션 이름 부여 */ animation-duration: 숫자(단위:ms/s); /* 애니메이션 지속되는 시간 */ animation-iteration-count:값; /* 애니메이션 반복여부. 숫자, infinite(무한반복) 등 */ } 선택자:visited {스타일 내용} 적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상) 3. 커서가 올라가있을 때 (Tab키를 누르면 선택이 달라지는 때) 선택자:focus {스타일 내용} 적용 스타일값 - font-weight: 글자..
html+CSS+JS/html+CSS 2019. 6. 28. [CSS] inline, block, inline-block 차이점 block요소 안에 내용이 아무리 작더라도 온전히 상자 형태로 자리를 차지하는 요소. (padding, margin 값 포함) 때문에 넓이, 높이를 설정할 수 있다. 물론 넓이를 설정해도 별도의 설정없이는 자신 옆에 아무도 오게 할 수 없다. 글자와 다른 상자로 취급되기에 text-align으로 정렬을 할 수가 없다. margin:0 auto를 통해 상하의 여백은 0, 양 옆의 여백은 자동으로 조절하여 가운데 정렬 효과를 볼 수 있다. float:left 혹은 float:right 로 왼쪽/오른쪽 정렬 효과를 볼 수 있다. float float는 block요소를 왼쪽, 오른쪽에 붙이겠다는 속성. 때문에 float를 한 번만 써도 아래의 block요소들이 영향을 받기 때문에 float를 넣은 요소 부모 요..
[CSS] 이미지 중심점 바꿔서 회전 시키기 (transform:rotate, transform-origin)
html+CSS+JS/html+CSS 2019. 6. 27. [CSS] 이미지 중심점 바꿔서 회전 시키기 (transform:rotate, transform-origin) 선택자 {transform:rotate(회전값)} : 이미지나 박스에 한하여 회전값 주기. (회전값 단위=deg) 선택자 {transform-origin:중심점 위치 설정} : 회전 시, 회전 축 설정. left, right, top, bottom, center 설정 가능 마우스를 올렸을 때 돌도록 만들기 (선택자:hover)

티스토리툴바