퍼블리싱/HTML&CSS (23) 썸네일형 리스트형 [CSS]텍스트 조정하기(자간/어간/줄간격/다단) 텍스트의 문단을 꾸미기 위해 필요한 CSS 속성들 ▶ letter-spacing : 자간(글자 간격) ▶ word-spacing : 어간(단어 간격) ▶ line-height : 줄간격 ▶ columns : 다단 letter-spacing - 글자 사이의 간격을 정하는 속성 - 글자 오른쪽에 패딩이 생기는 느낌이다. 단어사이 간격도 같이 커진다. ex) 1 .p01{letter-spacing:10px} cs word-spacing - 단어 사이의 간격을 정하는 속성 - 글자사이의 간격에는 변화가 없다. ex) 1 .p01{word-spacing:10px} cs line-height - 텍스트의 줄의 높이 정하는 속성 - 값 : normal / length / number/ percentage/ initi.. A태그 막는 방법(CSS/ jQuery) a태그가 어떤 사이트로 연결되었는데, 이동하지 않도록 막아야 할 경우가 빈번이 일어난다. 그때 쓰면 좋은 코드들!! 01. CSS 가장 간단한 방법 같다. 1 2 3 4 a.link { pointer-events: none; /*이벤트를 막음*/ cursor: default; /*마우스 커서를 포인트에서 디폴트로 변경*/ } cs 02. jQuery a. 1 2 $('.link').click(function () {return false;}); cs b. 1 2 3 $(".link").on("click",function(event){ event.preventDefault(); }); cs 간단하지만 까먹어 매번찾아보게 되는 코드 ㅎㅎ (HTML)임시이미지 간단히 넣는 방법 가상의 샘플이미지를 쉽게 넣을 수 있는 방법 아직 웹사이트의 적용할 이미지가 나오지 않았을때 위치만 잡아 놓기 위치 쓸 수 있는 아주 유용한 방법이다. 이미지를 따로 제작하지 않아도 URL로만 쉽게 이용가능하다. 사용방법 이미지 경로에 해당 url과 정보(사이즈 등)를 적으면 플레이스홀더의 이미지를 위 이미지처럼 나온다. https://via.placeholder.com/사이즈 예시 1 2 cs 요렇게 파일경로에 해당 유알엘을 적어주고, 원하는 이미지의 사이즈를 적어준다. 이미지 사이즈 적용 방법 https://via.placeholder.com/150 -> 150 x 150 px 의 이미지 생성 https://via.placeholder.com/150x200 -> 150 x 200 px 의 이미지 생성.. [CSS] 메인메뉴 이미지로 변경 & SNS 아이콘으로 메뉴를 만들거나 어떤 버튼을 텍스트 대신 이미지로 교체하려고 할때 쓸 수 있는 방법입니다. 일부 메뉴는 텍스트로 들어가고, 몇개의 메뉴(아래 이미지에 있는 sns 메뉴같은)만 이미지로 바꿀때 유용할 것 같다. 텍스트 이미지로 변경 (이미지버튼) 우선 태그를 이용해서 HTML를 만들어 준다. HTML 1 2 3 4 5 6 7 8 9 메뉴01 메뉴02 메뉴03 인스타그램 페이스북 cs CSS 먼저 메뉴를 가로로 일렬로 만들어준다. 1 2 .gnb01 li{float: left;list-style: none;margin: 0 5px} .clearfixed::after{display: block;content: "";clear: both;} cs "clearfixed"안에 내용은 메뉴가 모두 float되어 있기.. 동영상<video> 배경색이 브라우저마다 다를때 동영상을 업로드하고 여러 디바이스에서 테스트하는데, 아이폰에서는 잘나오는데 안드로이드 폰에서는 동영상 배경색이 흰색임에도 불구하고 회색으로 나오는 현상이 발생했다. 이렇게 전체 흰색으로 나와야하는데 마음대로 동영상 배경색이 회색으로 나온다 ㅜㅜ 나는 설정한 적도 없는데 그래서 검색해본 결과 > 이렇게 브라우저마다 다른 배경색으로 나오는 걸 볼 수 있다..( 이렇게 다를 수가..) 이런 결과가 나오는 건 브라우저가 동영상을 렌더링하는 방법과 색공간의 차이로 생기는거라고 한다. 결론부터 말하지면 수정이 되었고, 여러 코드들을 넣어보았고 어떤것 때문에 되었는지는 모르겠지만 해결되었다. 사용했던 코드들 01. 자바스크립트로 배경색 지정 02. css 필터로 contrast 올리기 ( 블랙 또는 흰색 배경일 때 .. 아이폰에서 비디오 전체화면으로 넘어가는 이슈 요새 사이트 메인페이지에 동영상으로 gif처럼 넣고 싶은데, pc버전에서는 문제 없이 나오는데 모바일에서 열어보니 몇가지 문제점이 있었다. 먼저 구동하고 싶었던 모습은 - 페이지 오픈시 자동재생 - gif처럼 플레이어 안보이게 재생 우선 아이폰에서는 자체 동영상 플레이어로 넘어가는 현상을 보였다. 그걸 방지할 수 있는 코드 인라인으로(플레이어로 이동 또는 전체화면 모드로 넘어가지 않고) 재생이 된다. video 태그 안에 'playinline' 넣어주면 끝( autoplay / loop / muted를 함께 써주면 자동재생되면서 전체화면으로 넘어가지 않음) -------------------------- 또는 동영상 재생이 문제가 있을 때 쓸 수 있는 방법 (동영상 대신 그때만 gif로 변경해주는 방법이.. 웹 아이콘 사용하기(font awesome5 & google icon) 웹 아이콘의 장점 01. 일일히 아이콘을 만들지 않아도 되서 편리함 02. CSS 적용가능( 색상과 크기 변경등 ) 웹아이콘 사용가능한 곳 01. font awesome 02. google icon 03. zurb font awesome 사용법 01. CDN 연결해주기 - font-awesome 5버전 사이트에서 kit code를 받아주세요! 사이트에 들어가서 이메일을 입력하시면 kit code를 받을 수 있습니다. 받은 kit code를 에 넣어주세요. ( EX) W3SCHOOL에서 가져온 예시니 직접사이트에 들어가 받아주세용) 1 cs (버전 5가 나오면서 kit code를 받도록 바뀐거 같다..ㅠㅠ) 02. 아이콘 선택해서 사용하기 - 상단 메뉴에서 icon 선택 or 아이콘이 있는 페이지로 이동 .. [CSS]CSS가 안먹을때 해볼만한 것들 유지보수를 하다 보면 내가 정확히 쓴 것 같은데 CSS가 안 먹힐 때가 많다. 그럴 때 해볼 만 것들을 적어보려고 한다. CSS가 안먹을 만한 이유 01. 캐시문제 02. 그전에 쓰였던 CSS와 충돌 03. 겹쳐서 안 보이는 경우 해결책 01. 캐시 문제 css를 고쳤는데도 그전과 똑같이 보인다면, 브라우저가 저장해놓은 캐시를 사용하기 때문에 그전에 내용을 그대로(수정되기 전) 보이는 경우가 많다. 해결책으로는 브라우저의 캐시를 지우거나, 파일명을 변경해주는 방법이 했다. A. 크롬 브라우저 캐시 삭제 방법 브라우저 오른쪽 상단 점버튼 > 도구 더보기 > 인터넷 사용 기록 삭제 클릭 여기서 쿠키 및 기타 사이트 데이터, 캐시된 이미지 및 파일을 삭제해준다. 그리고 다시 CSS가 먹는지 확인! B. lin.. 이전 1 2 3 다음
