CSS7 CSS - hover box 요소 만들기 parent element에 position : relative 를 주고 child element에 position : absolute와 display : none을 준다. 혹은, // html mouse over child1 child2 //js const parent = document.getElementById("parent") const child = document.getElementById('child') function onMouseOver(){ // 마우스가 over 했을 때 hover 생성 child.style.display = 'block' } function onMouseLeave(){ // 마우스가 떠났을 때 hover 제거 child.style.display = 'none' } i.. 2020. 3. 14. CSS - transition element에 움직이는 효과를 주는 속성. font-size와 transform에 transition을 주었다. transform - https://developer.mozilla.org/ko/docs/Web/CSS/transform transform 은 element에 회전(rotate), 크기 조절(scale), 이동(translate), 기울임 등을 설정한다. transform 효과는 element가 block 또는 inline-block level 일 경우에 적용 된다. transition은 요소에 변경이 적용될 css와 시간, 변화 과정을 설정하는 속성이다. transition-timing-function이 변화하는 과정을 설정하는 효과.(ease, linear, step-end, steps(.. 2020. 3. 13. CSS - float 원래는 웹페이지에서 이미지와 텍스트를 띄워서 어떻게 배치할 것인가를 결정하는 속성이다. 근데 요즘에는 레이아웃을 설정하는 용도로 많이 쓰인다. 위로 띄운다는 느낌이 있다. 예시, 레이아웃 적용 예시, 2020. 3. 13. CSS - 미디어쿼리 화면의 사이즈가 바뀔 때 css가 다르게 적용되도록 하는 속성 브라우저 너비가 500px일 때 배경색 바꾸기. 크롬으로 페이지 검사 창을 열고, 브라우저 너비를 500으로 맞추면 결과가 빨간색이 된다. 브라우저 너비 경우에 따라서 바꾸기 body width ~500px : red, 501~600 : green, 601~ : blue 2020. 3. 12. CSS - flex display : flex; elements를 정렬하는데 사용된다. 기존의 table 태그로 정렬하면 불편한 것이 많았기에 개발된 것. flex를 사용하기 위해서는 태그가 두단계가 필요하다. ex) ul과 li 처럼 container에 부여할 수 있는 속성 item에 부여할 수 있는 속성 display flex-direction flex-wrap flex-flow justify-content align-items align-content order flex-grow flex-shrink flex-basis flex align-self flex의 기본 부모 자식간의 element 구조 부모 element의 display: flex; 1 2 3 4 5 flex 부모 element 속성 flex-directi.. 2020. 3. 12. CSS - box-sizing box-sizing에는 두 가지 속성이 있다. border-box, content-box 바로 예제를 들어서 보겠다. border-box Hello Hello box-sizing: border-box이면, 선의 굵기가 얇던 굵던 width:150px; 임으로 small과 large가 contents-size를 무시하고 border 까지 포함한 box-size가 width: 150px;으로 설정된다. content-box Hello Hello box-sizing: content-box; 이면 contents만 width: 150px로 적용되어 small과 large 모두 contents의 box는 150px로 적용되고, border 사이즈는 따로 적용돼서 전체 box-size를 보면 large가 더 크게 .. 2020. 3. 11. 이전 1 2 다음
