김방울

[css] 트랜스폼 속성HTML에서 축 중심에 따라 요소의 위치를 이동시키거나 사이즈 조절 및 회전을 시킬 수 있는 속성2D 혹은 3D변형 가능 2차원 변환함수 속성 1. translate(translateX, translateY) : 특정 크기만큼 이동합니다.2. translateX(translateX) : X축으로 특정 크기만큼 이동합니다.3. translateY(translateY): Y축으로 특정 크기만큼 이동합니다.4. scale(scaleX, scaleY): 특정 크기만큼 확대 및 축소합니다.5. scaleX(scaleX): X축으로 특정 크기만큼 확대 및 축소합니다.6. scaleY(scaleY): Y축으로 특정 크기만큼 확대 및 축소합니다.7. skew(angleX, angleY): 특정 ..

[css] 트랜지션 속성 객체에 동작이 일어날 때 속도를 조절 가능케 하는 속성 [함께 사용 가능한 스타일 속성]위치 속성 -top, left, bottom, right크기 속성 - width, height박스 속성 - margin, padding테두리 속성: border-width, border-radius, border- color색상 속성: color, background-color투명도 속성: opacity변환 속성: transform 트랜지션 속성transition: 모든 트랜지션 속성을 한 번에 사용합니다.transition-delay: 이벤트 발생 후 몇 초 후에 재생할 지 지정합니다.transition-duration: 몇 초 동안 재생할지 지정합니다.transition-property: ..

[css] 선택자의 형태 css에서의 선택자는 특정한 html 내부의 요소를 선택할때 사용하는 기능 상황에 맞는 선택자를 사용하면 코드가 간결 주석 단축키: ctrl + / 1. 전체 선택자 html 내부에 존재하는 모든 선택자를 선택 형태: * *{ padding: 0; margin: 0; color: rgb(126, 107, 107); } 2. 태그 선택자 특정한 태그를 선택 형태: 태그 h1, h2, h3, p ,span ... /* h1,h2,h3{ border: 2px solid gray; } */ 3. 후손 선택자와 자손 선택자 후손: 선택자 하위에 존재하는 모든 자손을 선택, 후손은 자손을 포함함 자손: 바로 아래에 오는 자식 요소만 선택 후손 표현 방법: 띄어쓰기(공백) 자손 표현 방법: ..

[CSS] 위치 속성 화면 상 어디에 위치시킬 것인가 지정하는 속성 절대위치 좌표: HTML 기준 X,Y 좌표를 설정해 위치 지정 > top, left, right, bottom 존재 1.static 다른 요소와의 관계를 가지며 자동으로 배치되어 위치 지정 불가 기본값 - top, left, right, bottom 불가 박스의 기본 성격 2.relative 다른 요소와의 관계를 가지며 자동으로 원래 있던 위치를 기준으로 좌표를 지정 /* 상대위치좌표: 요소를 입력한 순서를 통해 위치 지정 */ top, left만 표현 가능 바깥의 부모 속성으로 사용 가능함. .box{ width: 300px; height: 300px; background-color: #8fdce6; text-align: center;..

[CSS] 배경이미지 & 색상 css에서 background image 불러오기 background-image: url(img0/cat_bg.png); 배경이미지는 부모속성보다 이미지가 작을 경우, 반복되는 성격 background-image: url(image/cat_bg.png),url(image/land_bg.png); /*배경이미지를 반복하여 불러올 때 쉼표로 표현, 앞쪽에 불러온 이미지가 위에 표현*/ 배경이미지 반복 제거 body{ background-image: url(image/web.jpg); background-repeat: no-repeat; /*반복하지 않겠다*/ } 가로, 세로축만 반복 background-repeat: repeat-x; 가로 반복 background-repeat:..

레이아웃의 이해 - inline & block 블럭구조: 사각형, 덩어리 블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 형태가 상위 영역의 전체 너비만큼 만들어지는 형태 ex) div, p, h1~6, ul, li, ol, di, dt, table, form, section, figure, footer 인라인구조: 글자, 일직선 인라인 요소는 글자와 같이 옆으로 나열되는 형태 줄 바꿈이 일어나지 않는 요소들 span, a, em, i, stron, b, del, ins, sub, sup, textarea 블럭 구조는 스타일 요소(width, height, padding) 등이 다 적용이 되나 인라인구조는 박스 사이즈에 영향을 주는 요소가 적용 x 구조의 포함관계 블럭 요소에는 일부를 제외..

분할태그와 CSS응용 블럭형식 태그, 위에서 아래로 쌓이는 성격 inline 형식: 글자처럼 옆으로 나열되는 성격 속성값에 대하여 표현을 할 때 1.픽셀 2. 백분율 -> 부모 박스 기준으로 퍼센테이지 표현. 반응형 웹 디자인을 할 때 많이 표현된다. .box1{ width: 300px; height: 100px; background-color: coral; } .box2{ width: 50%; /* 박스의 창 넓이를 50% 유지*/ > 박스 사이즈에 영향을 주는 속성들, 계산 시 /*width: 200 + (border: 10+10)+(p: 30+30)_(m:30+30)= 340*/ /*height: 150+(b:10+10)+(p:30+30)+(m:30+30)=290*/ border와 padding은 ..

CSS의 이해 css: html문서에 디자인 요소를 담당하는 부분 = 디자인 및 배치의 역할 css 기술방식 -내부 css- 01. 속성 스타일 (인라인 스타일시트) > body 태그를 포함해서 전체 선택 태그 선택자: h1, p, a html내에 존재하는 특정한 태그를 선택하는 선택자 아이디 선택자: #id, 특정한 이름 표현, 한번 사용가능한 선택자 클래스 선택자: .class 특정한 이름 표현, 여러번 사용가능한 선택자 웹 사이트가 구현이 되는 공간 기본적으로 태그는 자기가 가지고 있는 padding 값과 margin 값이 있음. 그래서 처음 시작할 때 존재하는 모든 선택자들의 패딩과 마진 값을 안 주고 시작해야 한다고 언급을 해야 함. 태그 내에서 주석을 주고 싶을 때는 /* */ 사용 클래스, ..