천천히 알아가는 세상

안녕하세요. 이번에는 transform에 대하여 알아보겠습니다. 해당 글에서는 간단한 예시 코드만 보여드릴 예정이라 자세한 내용은 아래 링크를 통해서 접속하시면 자세한 내용을 확인하실 수 있습니다. mdn web docs 페이지 바로가기 transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 해당 코드 외에도 다른 여러 가지 속성을 설정할 수 있습니다. skew rotate scale 2. transform 속성 transform-origin: center; 해당 개체의 기준점을 변경 함 transform: rotate(-90deg); 기준점을 기준으로 개체를 돌림 ..

안녕하세요. 이번에는 css의 z-index 기능에 대하여 알아보겠습니다. z-index 태그를 화면에 표시할 때 순서를 바꿀수 있는 속성이며, 태그의 position 값이 relative, absolute 인 경우에만 적용 가능합니다. z-index 값을 설정하지 않으면 기본 코드에 따라서 배치가 됩니다. 만약 부모의 z-index가 1이고 자식이 10이여도 부모를 따라가기 때문에 자식도 1을 받는다. 노란색 원에 z-index: 10 값을 지정하여 초록색 원 밑에 있어야할 노란색 원이 위로 배치된 모습입니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 초록색 원보다 위에 존재합니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 ..

안녕하세요. 이번에는 HTML에서 요소의 위치를 조정할 때 사용하는 기능에 속하는 CSS의 Position에 대해서 알아보겠습니다. Position HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS 속성입니다. static, relative, absolute, fixed 속성이 존재합니다. position 속성은 요소의 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용합니다. 1. static 기본적으로 적용되는 값이며, 정적 방식에 해당 합니다. 2. relative 상대적 위치 방식으로 적용되는 속성이며, static 속성을 기준으로 상대적으로 위치를 이동한다. 2-1. Ex1) circle1 (빨간 원)에 relative 속성을 부여하면 ..

[참고용] CSS 적용 우선 순위 1순위 -------------------------------------- 마지막 순위 !important > 인라인 > 아이디 > 클래스/속성/가상 > 태그 > 전체

안녕하세요. 이번에는 CSS 선택자에 대하여 알아보겠습니다. 자세하게 보고 싶으신 분은 공식 문서 페이지를 참고하시면 됩니다. CSS 선택자 문서 페이지 바로가기 일단 CSS 선택자는 크게 2가지 종류로 나뉩니다. 단일 선택자 - 전체(*), 태그, Class, ID 복합 선택자 - 단일 선택자를 혼합해서 사용하는 방식 1. 단일 선택자 h1 h2 h3 p1 p2 2. 복합 선택자 1 2 3 4 5 6 1 2 3 4 5 6 7 test 3. 가상 선택자 E::active {}, E::hover {} 기타 등등 이벤트 관련 CSS 라고 생각하면 됩니다. 네이버 다음 오렌지 딸기 수박 망고 사과 간략하게 설명을 드리자면 우선 div 태그를 CSS를 이용하여 100px 노란색 박스로 만들어줍니다. div 태그..