목록개발 Web/HTML & CSS (75)
음악, 삶, 개발
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..
#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,..