스터디일지72 [CSS] 기본 익히기 PART 8 Transform html 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용한다 특수한 함수를 사용해서 나타낼수 있다. /* x축(가로)으로 20px 이동 */ transform: translateX(20px); /* y축(세로)으로 40px 이동 */ transform: translateY(40px); /* x축(가로)으로 20px, y축(세로)으로 40px 이동 */ transform: translate(20px, 40px); Transform 함수 translate - 이동하기 translate(tx, ty) - 지정한 크기 만큼 x축, y축으로 이동한다. traslateX - 지정한 크기 만큼 x축으로 이동한다. traslateY - 지정한 크기 만큼 y축으로 이동한다. .box1 .. 2024. 3. 15. [CSS] 기본 익히기 PART 7 Pseudo Class - 가상 클래스 html의 요소에서 특별한 상태를 명시할 때 사용한다. 선택자:가상클래스이름 {속성: 속성값;} 형식으로 사용한다. a:visited { color: red; } a:hover { color: blue; font-weight: 900px; } 대표적으로 많이 쓰이는 가상 클래스 :link - href 속성을 가진 a, area, link 중에 방문하지 않은 모든 요소를 선택한다. :visited - 사용자가 방문한 적이 있는 링크를 나타낸다. :active - 사용자가 활성화한 요소를 나타낸다(버튼 같은거) :hover - 사용자의 마우스 포인터가 요소위에 올라가 있으면 선택된다. :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다. 보통 요소를 클릭.. 2024. 3. 15. [CSS] 기본 익히기 PART 6 Position 속성 요소를 배치 할 때 사용한다. 기본 속성 static 기본 값이며 요소가 html 문서에서 일반적인 흐름을 따라 배치 되게 한다. relative static 처럼 일반적인 흐름에 따라 배치되게 한다. static 과의 차이점은 static 위치에서 top, bottom, left, right 와 같은 속성에 의한 상대적인 위치에 배치된다는 점이다. absolute 요소가 문서의 일반적인 흐름을 따르지 않게 한다. fixed absolute와 비슷하게 일반적인 흐름을 따르지 않게 하지만 static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 부모중에 relative, absolute, fixed 속성이 없다면 body태그가 기준이 된다. sticky static처럼 일반적인.. 2024. 3. 14. [CSS] 기본 익히기 PART 5 Display 속성 html 요소를 어떻게 화면에 표시할지 결정한다. display : block은 block level 요소이며 display: inlinedms inline level 요소를 말한다. 기본 속성 none - 요소를 보이지 않게 설정하며 영역을 차지하지 않는다. visibility: hidden과 다른점은 hidden은 영역만 차지하고 보이지 않는다. block - 기본적으로 가로 영역을 모두 채운다. 문단을 표시할때 주로 사용한다. inline - 컨텐츠 만큼 영역을 차지한다.(width, height를 지정할 수 없다.) inline-block - inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치 되지만 block 처럼 내부 속성인 width, height 등과 같은 값을 .. 2024. 3. 14. 이전 1 2 3 4 5 ··· 18 다음
