천천히 차근차근

datepicker html 샘플 코드 datepicker 샘플 코드 설명 datepicker 사용에 필요한 라이브러리 datepicker 는 jquery 라이브러리를 활용한다. datepicker는 jquery를 활용해서 이용할 수 있다. datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다. Help. jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다. jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다. datepicker 기본 설정한 이미지 datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형..

box-shadow: 2px 2px 2px 2px; box-shadow: 3px 3px 3px 3px; box-shadow: 4px 4px 4px 4px; box-shadow: 5px 5px 5px 5px; 각각 다르게 px을 적용해서 그림자 효과를 줄 수 있다. 박스가 조금 더 아름다워 보이는 효과 🤩

아이프레임은 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 태그를 ..

View, Text import React, { Component } from 'react'; react라는 module에서 Component class를 import하는 의미. 그 Component를 상속받는 App이라는 클래스를 생성하는 순서 App 클래스 화면을 렌더링하는 함수가 있고(render() 함수) 그 안에 return 되는 것들이 화면을 구성하게 된다. import { View, Text } from 'react-native'; 'react-native'라는 module에서 View, Text 클래스를 import하는 것이다. Button, Image 등 다양한 클래스를 가져와서 사용할 수 있다. Text, Button, Image 등 화면에 출..

※ [ 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; }

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

절대 경로 : https:// ~~~ 와 같이 절대로 변경될 수 없는 경로. 상대 경로 : 본인의 위치를 기준으로 경로를 지정하는. [ test 결과 ] ../ 상위 폴더의 데이터(test file 형식 :. css)를 잘 불러왔음(연결 완료) 이런 식으로 html과 css를 연결했음. css를 필요로 하는 다른 파일들도 상위로 2번 이동하는 동일한 경로에 css를 만들어서 혼용함... 일단 내가 의도했던 위치가 아녔어서 운이 좋지 않았으면 또 멘붕이 왔을 것임. css를 활용하기 위해 html의 좋은 위치?선정이 필요할 것 같음. 구글링 결과 ./ 하위 폴더 이동이라고 검색되었으나 나는... 적용되지 않음..... ㅠㅠ..... 대체 왜... 그리고 다른 폴더에 저장되어 있는 html을 사용하기 위하여..

overflow-x:auto; 필요에 따라 가로 스크롤바 생성 (text 길이가 width를 벗어나지 않으면 스크롤바는 생기지 않는다.) overflow-x:scroll; text길이가 짧아도 무조건 스크롤바 생성. overflow-x:hidden; 넘쳐나는 내용 무조건 숨김. text-overflow:ellipsis; 넘친 텍스트 ...으로 처리. *조건 : 먼저 텍스트 숨김을 해야 한다. (overflow-x:hidden; )

메뉴 예시 Home Tutorial Articles Inspiration HTML ↑ body, h2 { margin:0; background-color:pink; } a { color:inherit; text-decoration:none; font-weight:bold; font-size:1.2rem; } body > article > img:first-child { display:block; margin:auto; padding-top:70px; width:940px; } article { text-align:center; } article > img { margin:8px; width:300px; } nav { text-align:center; } nav > section { background-c..

1. text-align 2. font-size 3. font-weight 4. letter-spacing 5. font-family

block, inline-block 실험 결과 1. inline-block을 입력하면 background가 text 길이에 맞춰서 채워진다. 2. width 가로를 함께 입력하면 background가 입력한 가로 크기에 맞춰 채워진다. 3. 본인이 display:inline-block을 입력하고, 자식도 display:inline-block을 입력해야 자식이 본인의 옆, 가로로 이동하게 된다. 본인이 입력하지 않고, 자식도 입력하지 않으면 기본 세로로 보여지게 된다.