코딩 이야기

전환 요소가 하나의 스타일에서 다른 스타일로 점진적 변화 하는 것 전환을 지정하기 위해 다음 2가지를 지정해야한다. 1.효과를 추가하고 싶은 CSS 속성을 지정한다. 2.효과의 지속 시간을 지정한다. transition :width 5s; 전환되는속성 효과의 지속 시간 시간을 설정하지 않으면 0으로 효과x 전환 효과는 지정된 CSS속성의 값이 변경될 떄 시작된다. 다중 전환 예) p{ width : 100px; height : 50px; border : 1px solid black; background : yellow: transition: width 5s height 5s border 5s, transform 5s; } p:hover { width : 200px; height : 100-px; bord..

웹 사이트를 보기 좋게 만드는 레이아웃을 만드는 방법에는 다음과 같이 몇 가지의 방법이 있다. 1. 요소를 사용한 레이아웃 : 아주 편리한 방법이지만 테이블의 월래 용도와 어긋난다. 2. 요소를 사용한 레이아웃 : 요소를 생성하고 요소의 위치를 지정해서 다른 요소를 그룹핑하는 데 사용된다. CSS를 사용해 요소의 위치를 잡고 배경이나 색상을 지정한다. 3.HTML5의 ,, 등의 시멘틱 요소를 사용한 레이아웃 : 최근에 HTML에서 추가된 레이아웃 방법 근본은 요소와 유사하다. 의미적 요소를 이용한 레이아웃 의미적 요소는 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소 태그는 단순히 컨테이너 역활만 하기에 브라우저는 이것을 인식하지 못한다. HTML5에서는 이러한 문제점을 해결하기위해 시맨틱 요소..

CSS로 display 속성 변경하기 div { display; inline; } 블록,인라인요소결정 인라인(블록을 넣으면 블록요소로 바낌) 인라인요소안에 블록요소는 넣을 수 없다. 요소 위치 정하기 #target { top; 100px; left:200px: } 기준점에서 100과200 사이에 배치 기준 위치는 position 속성으로 결정 CSS의 position 속성은 요소의 위치 설정 방법을 나타냄 position을 설정하지 않는다면 top left right bottom 은 작동하지 않는다. CSS는 4가지 설정 방법이 존재한다. 정적 위치 설정(static position) : 정상적인 흐름에 따른 배치 상대 위치 설정(relative position) : 정상적인 위치가 기준이 된다. 절대 ..