seop's study seop's study

transform - CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 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() transfo..

animation 속성에 대한 설명 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 anim..

grid란 ? Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다. 속성 설명 grid grid 속성은 그리드 레이아웃 속성을 설정합니다. grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성입니다. grid-auto-columns 암시적인 열(Track)의 크기를 자동으로 설정합니다. grid-auto-flow 자동 배치 알고리즘 방식을 정의합니다. grid-auto-rows 암시적인 행(Track)의 크기를 자동으로 설정합니다. grid-column grid-column-xxx의 단축 속성(열 시..

flex란? Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order..

IR 기법(Image Replacement) 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..

기본 선택자 속성 예시 설명 전체 선택자 * { color: #fff} 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 태그 선택자 div { color: #fff} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 .class { color: #fff} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id { color: #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 div, p { color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 계층 선택자 속성 예시 설명 하위 선택자 (Descendant Selector) div p {color: #fff} div 태그의 하위 p ..

float float란? float 속성은 블록요소의 정렬 상태를 설정합니다. 문법 float: none | left | right 속성 속성값 설명 inherit 부모 요소에서 상속 none float의 성질을 적용하지 않습니다. left 블록요소를 왼쪽으로 정렬합니다. right 블록요소를 오른쪽으로 정렬합니다. 예제 float 속성 사용시 영역이 깨지는 버그 float 시 해당 객체는 높이, 넓이 값을 잃어버립니다. 그렇기때문에 .clearfix라는 클래스를 만들어 쓰는 것이 일반적입니다. clearfix 설정방법 /*float_clear*/ .clearfix {*zoom: 1} .clearfix:before, .clearfix:after {display:table; content:""; line-..

CSS 색상 표현 방법 색상 이름으로 표현 색상의 이름을 바로 입력하여 사용이 가능합니다. p { color: red; } RGB 색상값으로 표현 RGB 색상표기법은 rgb(red, green, blue)형식으로 색상을 표현하는데, 각 요소에는 0에서 255사이의 숫자를 입력합니다. 여기에 투명도를 더하고 싶다면 rgba(red, green, blue, alpha)형식으로 네번째 자리에 불투명도를 표기해주면 됩니다. 투명도 표기법은 0~1까지 사용할 수 있고, 숫자가 적을수록 투명해 집니다. p { color: rgba(0, 0, 0, 0.5); //투명도 50% 검정색 } 16진수 색상값으로 표현(HEX) RGB 순서대로 16진수로 변환하여 00~ff까지 두자리씩 표기합니다. 여섯자리의 색상코드 앞에는..

Block구조 와 Inline구조 블록 구조(block) 블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다. block 요소 div, p, h1~h6, ul, li, ol, table, form, section, footer, address, article, aside, blockgquote, canvas, dd, dl, hr, header, pre, video등 block은 height와 width값을 지정 할 수 있다. block은 margin과 padding을 지정 할 수 있다. 인라인 구조(inline) 인라인 구조는 주로 텍스트를 주입 할 때 ..

CSS란? HTML이 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어입니다. CSS 주석 표시 한 줄 주석 //(슬래시 두 개)로 처리합니다. 여러 줄 주석 /* CSS 주석 */로 처리합니다. CSS 선언 방법 내부 스타일 Embed Style Sheet 외부 스타일 가장 권장되고 일반적인 방법으로 CSS 파일을 별도로 관리하는 형태입니다. Embed Style Sheet 인라인 스타일 한 줄(라인)으로 요소 내부에 스타일 속성을 이용하여 CSS 코드를 작성하는 것을 인라인 스타일 이라고 합니다. 속성,값이 동적으로 변경되어야 하는 경우에 사용. Embed Style Sheet