음악, 삶, 개발

button 태그를 사용하지않고도 div 로도 button 을 만들수있다. :active 클래스를 추가하게되면, 마우스가 눌렸을때 일어날 변화를 설정할수있다. .rect { background-color: red; } /* mouse 가 눌렸을때 */ .rect:active { background-color: green; }

developer.mozilla.org/ko/docs/Web/CSS/box-shadow CSS 의 box-shaow 속성은 해당 요소의 하단 레이어를 만들어주는 속성이다. box-shadow 의 값으로는 5가지가 들어갈수있다. .rect { background-color: red; box-shadow: 50px /* x */ 10px /* y */ 0px /* blur */ 0px /* spread */ blue; /* color */ } 반드시 위의 값 순서를 맞춰야한다. x, y, blur, spread, color 순이다. 여기서, 값의 가장 앞에 inset 을 추가하게되면 inner layer 가 된다. .rect { box-shadow: inset 50px /* x */ 10p..

padding 속성은 부모와 자식간에 간격을 의미한다. 이때 이 간격은 상,하,좌,우 모두이다. #parent { width : 500px; height : 500px; padding : 20px; } padding 속성은 margin 과 달리, 부모 css 에서 정의되어야한다. padding 의 디폴트는, 값에 따라 부모의 크기를 늘린다. 따라서 위와 같이, 500px 500px 에, padding 이 20px 이라면 부모의 크기는 540px 540px 이 된다. 40px 이 늘어나는 이유는, 상.하 그리고 좌.우 (20px x 2 ) 이기때문이다. 하지만 부모의 크기를 유지한채, 자식의 크기를 줄여주는 속성이 있는데, 바로 box-sizing 의 border-box 이다. #parent { width..

stackoverflow.com/questions/28411499/disable-scrolling-on-body Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim modi in exercitationem explicabo, at rem officia autem non porro soluta dolorum officiis ipsa repellat, laudantium ea unde labore, temporibus quas?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet eius totam quam pariatur ratione, in voluptatem d..

lodash 4.17.15 npm i lodash {{ v }}

#circle { width : 100px; height : 100px; border-radius: 50%; background-color: tomato; }

Max 의 [textbutton] 객체를 보자. 보면, 글자가 중심에 있으면서, 길이가 길어지면 ... 으로 표시된다. 이를 html css 를 사용하여 구현해보자. Hello I'm your father. 반드시 글자를 나타내줄 새로운 태그를 부모 태그안에 집어넣어야한다. #box { width : 50%; height : 50%; background-color: lightcoral; display: flex; /* 자식 태그 정렬 준비 */ justify-content: center; /* 가로 정렬 */ align-items: center; /* 세로 정렬 */ } #box-text { font-size: 15px; /* 글자 크기 */ color: violet; /* 글자 색깔 */ border:..

div 태그의 width 는 글자가 입력될 경우 100% 가 되며, height 는 글자의 높이만큼 자동으로 정해진다. Hello #rectangle { background-color: tomato; } 여기서 width 와 height 속성을 css 에 추가하게되면.. #rectangle { width : 30px; height : 30px; background-color: tomato; } 위와 같이, 이제는 글씨와 상관없이 내가 설정한 width height 로 지정된다. 이때 중요한것은, 이벤트의 발생또한 내가 CSS 에서 정한 width 와 height 안에서 발생한다는것이다. 또한, 글자가 길면, 내가 설정한 width 와 height 를 넘어가게 되는데, 이때 이 글자를 클릭해도 event ..

다음과 같이 3개의 div 태그가 부모 div 태그안에 존재하는 상황을 고려해보자. kim lee park #friends { width : 100%; height : 100%; background-color: red; } #kim { background-color: blue;} #lee { background-color: green;} #park { background-color: yellow;} 그러면, kim, lee, park 순으로 div 가 쌓여있는곳을 볼수있다. 우리는 위치에 대한 어떠한 설정도 css 에서 하지않았지만, 이렇게되는 이유는 html 이 default 로 설정해놓았기때문이다. 해당 모든 태그가 생성될때 default 값이다. top, bottom, left,..