코딩 공부 코딩 공부

CSS 리셋 세팅하기. 1. 여백초기화 body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button, article, aside, details, footer, header, hgroup, menu, nav, section, figure, figcaption { margin: 0; padding: 0; box-sizing: border-box; } 2.시멘틱 태그 초기화 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav..

선택자 종류 예시 설명 translate translate() transform: translate(10px, 20px) X좌표, Y좌표 이동을 나타냅니다. translate3d() transform: translate3d(10px, 20px, 30px) X좌표, Y좌표, Z좌표 이동을 나타냅니다. translateX() transform: translateX(10px) X좌표 이동을 나타냅니다. translateY() transform: translateY(10px) Y좌표 이동을 나타냅니다. translateZ() transform: translateZ(10px) Z좌표 이동을 나타냅니다. scale scale() transform: scale(2, 2) 선택한 요소의 X축과 Y축 확대를 설정합니다...

종류 속성 설명 변형 transform transform 속성은 요소의 움직임을 일괄적으로 설정합니다. transform-orgin transform-origin 속성은 요소의 움직임 방향을 설정합니다. transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다. perspective perspective 속성은 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다. perspective-orgin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다. backface-visibility backface-visibility 속성은 요소의 뒷면을 정의합니다. 애니메이션 animation animat..

IR 효과 IR 효과는 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. 여러 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있다. Phark Method 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법 .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR 의미있는..

css를 작성하면서 내가 원하는 컨텐츠가 다른 컨텐츠 뒤에 가려져서 난감한 경우가 종종 있다. 그런 경우를 해결하기 위해 사용하는 속성이 바로 z-index라는 속성이다. z-index의 기본값은 auto 이고 보통 1, 9, 100, -1, -100등의 숫자로 그 속성의 값을 지정한다. 1. z-index 특징 (position값과의 연관성) z-index의 가장 중요한 특징 중 하나는 아무 요소나 다 z-index를 넣는다고 해서 우선순위를 넣을 수 는 없다는 점이다. z-index 속성이 적용되기 위해서는 z-index를 적용한 영역이 position:static 값이 아니어야 한다. BOX1 BOX2 분명 .box1 영역이 z-index:10 으로 설정해놓았기 때문에 더 위쪽에 위치해야할 것 같지..

쉬운 중앙 정렬 1. position, transform 사용 position: absolute;는 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정할 수 있습니다.left와 top을 50%로 설정해 중앙에 정렬하게 합니다. 만약 이렇게만 설정하게 되면 대상 엘리먼트의 좌측 상단이 중앙에 오게 됩니다. 정중앙에 오는 게 목적이기 때문에 transform: translate(-50%, -50%);를 해서 맞춰주게 됩니다. transform은 대상의 형태를 변형하는 명령이며, translate는 위치를 조정하는 데 사용됩니다. tranlate의 첫 번째 값과 두 번째 값은 각각 x축, y 축입니다. 여기서 -50%라는 값은 대상 엘리먼트(h1)의 크기의 절반만큼을 빼서(-) 이동하라는 의미입니다. 2..

css에서 이미지를 중앙에 맞출때 방법들을 정리해보려고 한다! display / margin 속성으로 CSS에서 이미지 중앙에 배치 display 및 margin CSS 속성을 함께 사용하여 이미지를 중앙에 배치할 수 있습니다. 이미지의 display 속성은 처음에 inline입니다. 따라서 한 줄에 여러 이미지를 추가할 수 있습니다. 예를 들어, 다음 코드를 작성하면 두 개의 이미지를 연속으로 볼 수 있습니다. 따라서 한 줄에 하나의 이미지만 배치되도록 이미지의 display 속성을 block으로 변경해야 합니다. 그런 다음 0px auto의 margin 이미지를 중앙에 배치할 수 있습니다. 이미지는 상단과 하단에서 0px 여백을 갖습니다. 첫 번째 값은 임의의 숫자일 수 있지만 두 번째 값은 auto..

가상 요소와 가상 클래스 CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다. 가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다. 요소를 꾸미는 다양한 기능들을 제공하기 때문에 잘 사용하면 CSS만으로도 미려하고 고급스..