천천히 차근차근

Web Developer 설치 크롬 설치 링크

HTML 5 인터넷 : 전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털기기로 연결되어 사람들이 정보를 공유할 수 있는 공간(이메일, 웹, FTP, 텔넷...) 통신규약만 다를 뿐이지 다 연결되어 있다. 웹 : 인터넷 공간에서 제공하는 서비스 (http 프로토콜 사용) 인터넷과 웹은 다르다. FTP : 파일 전송하는 프로토콜(통신 규약) 팀 버너스 리 최초 웹 개발자 플로그인 웹 브라우저와 연동되는 프로그램을 사용자의 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법 웹 표준 기술 HTML5 + CSS3 + Javascript(표준 명칭 : ECMAScript) 자바스크립트 현제는 서버는 물론 로봇 개발에도 사용 클라이언트에서 처리해주면 서버 부하를 막을 수 있다. HTML..

text-decoration-line:underline; text-underline-position: under; 위의 2개 코드를 함께 사용하면 간격이 조금이라도 넓어진다.

codebeautify.org/htmlviewer Best Online HTML Viewer, HTML Beautifier, HTML Formatter, Beautify, Minify, Test Output codebeautify.org

1) 위와 같이 html 확장자가 django와 같은 다른 확장자로 인식되는 문제의 경우 오른쪽 하단의 톱니모양 > Settings을 눌러준다. (확장자별 아이콘 위와 같이 바꾸는 법) 2) files associations 검색 후 Add Item으로 Item에 *html , Value에 html을 추가해주면 html 확장자가 적용된다.

head 안에 넣기 css 밑에 넣는게 나은듯. 카카오톡 캐시 삭제 카카오톡 캐시 삭제 : https://developers.kakao.com/ 여기 접속해서 해당 링크 초기화를 한 후, 카카오톡에서 다시 링크를 발송해보면 변경한 수정 사항이 잘 전달된다. 이미지 사이즈는 800 * 400 으로 요청하기.

최신 $('.side_bar_box').click(function(e){ if( !$('.side_bar_box').has(e.target).length ) { $('.side_bar_box').addClass('none'); } }); $("body").click(function (e) { if (!$(e.target).hasClass("btn-toggle")) { $(".side-bar").removeClass("side-open"); $(".btn-toggle-open").removeClass("none"); $(".btn-toggle-close").addClass("none"); } });

아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다. 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. 사용 방법 여러개의 영상을 반복재생 하고 싶은 경우 src="https://www.youtube.com/embed/wgS_E2GDmAo?autoplay=1&mute=1&loop=1&playlist=Afw_FuW7dkw,XEsKvmv9nCw,wgS_E2GDmAo" playlist에 youtube 영상ID를 ,를 사용하여 이어 붙여주면 된다.😎 자동재생 방법 autoplay=1&mute=1 chrome / enternet explore..

이미지 px 좌표 자동 계산 링크 : http://maschek.hu/imagemap/imgmap/ 이미지맵 좌표 유동적으로 적용하기. 이미지맵의 coords는 고정적인 px로 동적인 화면을 구현할 때는 유동적으로 크기가 줄어들지 않는다. 이를 해결하기 위한 방법 rwdImageMaps 라이브러리 활용하기. rwdImageMaps 라이브러리 Github : https://github.com/stowball/jQuery-rwdImageMaps .first > .second > img { width: 100%; } jQuery를 사용하기 위한 script와 rwdImageMaps 라이브러리를 사용하기 위한 script 총 2개를 head 태그 안에 넣어준다. 위의 코드대로 img, map, area 태그를 ..

※ [ CSS ] opacity, rgba 차이 - opacity 속성은 투명도를 지정했을 때, 모든 자식 요소에 투명도 값이 상속됩니다. - rgba로 지정하면 rgba 선언한 요소에만 적용되며 상속되지 않습니다.

box-shadow:-10px -10px 10px rgba(45,45,45,0.5); ※ 샘 사용 예제 - 5개 값을 입력하지 않으시고 4개의 값만으로 사용하셨음. - 아래는 구글링한 사용법. box-shadow: [h-offset] [v-offset] [blur] [spread] [color] (inset); h-offset: 그림자의 좌우 위치 설정 v-offset: 그림자의 상하 위치 설정 blur: 그림자의 흐려짐 정도의 범위 spread: 그림자의 크기 color: 그림자 색상 inset: (optional) 요소 내부에 그림자 표현, 기본적으로 그림자는 요소 외부에 위치 - 좌 : 마이너스 - 상 : 마이너스

※ [ CSS ] box-sizing(border-box, content-box) box-sizing 속성 1. content-box : border를 제외한 content 영역을 지정한 너비로 계산한다. - border 너비까지 포함한다면 내가 지정한 너비(width)보다 초과된다. 2. border-box : border너비를 포함하여 내가 지정한 너비를 초과하지 않는다. - content 영역의 너비는 내가 지정한 너비보다 작게 된다.

body > * { cursor: pointer; } body * { cursor: pointer; }

※ input radio 독립하여 사용할 수 있다. - checkbox와는 다르다. - 중복 체크를 허용할 수도 있고, 독립적으로 사용할 수도 있다. - 같은 form 안에서 같은 name으로 만들어진다면 중복 허용을 허용하지 않는다. - 다른 form에서 사용하면 별개로 구분하여 사용할 수도 있다. ※ select multiple - select 사용 시, multiple 입력을 하면 여러개를 선택할 수 있도록 한다.

::-webkit-scrollbar { /* 스크롤바 전체 영역 */ width: 10px; } ::-webkit-scrollbar-track { /* 스크롤이 움직이는 영역 */ background-color: #f9f9f9; } ::-webkit-scrollbar-thumb { /* 스크롤 */ background-color: gold; border-radius:30px; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { /* 스크롤의 화살표가 포함된 영역 */ display:block; height:8px; background-color: #000; } ::-webkit-scrollbar-c..

# 가장 최근 https://geonlee.tistory.com/51 디자인하면서 어떤 색 고를 지 고민한 적 있잖아? 🤯 CSS 색상 선정을 도와줄 사이트 모음 들어가기 전 웹사이트 제작에서 가장 고민되는 순간 중하나가 CSS(Cascading Style Sheets, 연속적 스타일 시트) 의 색상을 선정하는 순간일 것이다. 색상에 따 geonlee.tistory.com - 1순위 cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, b..

wsss.tistory.com/ @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistory.com [ CSS ] CSS 샘플 참고

overflow 안에 사진, 동영상 채울 때. CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분이다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 된다. 이에 대응하는 CSS3 속성에 대하여 살펴보자. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object..

* 부모한테 flex를 주면 자식들은 display:block; 취급을 당한다! 자식이 display:inline-block으로 높이와 너비가 먹지 않을 때는 부모한테 flex를 주어서 자식들의 display를 block 취급당하게해서 사용할 수도 있다. 자식들을 직접 display:block 으로 바꿔주는 방법도 있지만! * 애니메이션을 할 때는 display:none으로 하지 않기! visibility:hidden; 사용해서 숨기기 !!!! * 경고창 보여주는 코드. 반응형의 경우, min-width가 필요없다. 대신 max-width:1356px; max를 만들어서 최대 지정 크기보다 더 커지지 않게만 설정한다. *flex 는 바로 밑에 자식의 높이(height)를 쫙 늘려버린다. 너비는 상관없음...