01. 인터페이스 요구사항 확인(1) 내/외부 인터페이스 요구사항　1) 내/외부 인터페이스 요구사항 개념 : 시스템 접속 방법이나 규칙에 대한 필수 요구사항　2) 내/외부 인터페이스 요구사항 구성　 　- 구성요소 여동 방안에 대한 사전 협의 필요　 　- 인터페이스 이름, 연계 대상 시스템, 연계 범위 및 내용, 연계 방식, 송신 데이터, 인터페이스 주기 등　3) 내/외부 인터페이스 요구사항 분류　 　- 기능적 요구사항　 　- 비기능적 요구사항 : 성능, 보안성 등(2) 요구공학　1) 요구공학 개념 : 요구사항에 대한 도출, 분석, 명세, 확인 및 검증하는 활동　2) 요구공학 목적　 　- 효과적인 의사소통 수단 제공 (요구사항에 대한 공통 이해)　 　- 요구사항 누락 방지 및 이해 오류 비용 감소 (요구사..

column-count 요소를 몇 개의 열로 분할할 것인지 지정하는 속성 column은 분할한 열 1개를 뜻한다. column-width column의 최소 너비를 지정하는 속성 column-count 속성을 지정하지 않으면 부모 요소를 기준으로 지정한 최소 너비에 맞춰 최대 개수의 열을 만든다. columns column의 최소 너비와 최대 개수를 한 번에 지정하는 속성 columns : column-width column-count; column-gap column 사이의 간격(여백)을 지정하는 속성 column-rule column 사이에 선을 지정하는 속성 width와 style은 필수로 지정해주어야 하며, color는 지정하지 않을 경우 텍스트 색상으로 적용된다. width, style, col..

clip-path 요소의 클리핑 범위를 지정하는 속성 클리핑 범위 안의 부분은 보여주고, 바깥 부분은 숨겨준다. - 속성 값 inset(상 우 하 좌 round border-radius) : 사각형/입력한 값만 큼 사각형의 범위가 안으로 줄어든다. circle(반지름 at position) : 원/position값을 중심으로 반지름 값만큼 원의 범위가 생성된다. ellipse(x반지름 y반지름 at position) : 타원/position값을 중심으로 각각의 반지름 값만큼 타원의 범위가 생성된다. polygon(x1 y1, x2 y2, x3 y3…) : 다각형/각각의 위치 값에 꼭짓점을 찍어 다각형 범위가 생성된다. url(SVG경로) : SVG파일/SVG파일의 형태대로 범위가 생성된다. 더보기 ※ p..

content ::before와 ::after 가상 요소에 콘텐츠를 삽입하기 위한 속성 공백(space)으로 구분하여 여러 가지 값을 삽입할 수 있다. - 속성 값 "문자열" : 큰따옴표로 묶어 문자열을 삽입 attr(속성 이름) : 괄호 내에 속성 이름을 입력하여 해당 속성의 속성 값을 삽입 url(경로) : 괄호 내에 경로를 입력하여 미디어를 삽입 (미디어 크기 조절 불가능) counter(카운터 id) : 괄호 내에 생성한 카운터의 id를 입력하여 해당 카운터의 값을 삽입 open-quote, close-quote : 큰 따옴표를 삽입 (여는 따옴표 없이는 닫는 따옴표를 사용할 수 없다) no-open-quote, no-close-quote : 삽입했던 큰 따옴표를 제거 HTML CSS JavaSc..

counter-reset 카운터를 생성하거나 재설정하는 속성 카운터는 요소가 발생할 때마다 숫자가 일정하게 증가하거나 감소하는 변수를 뜻한다. 카운터의 id와 재설정값을 속성 값으로 사용한다. 재설정값의 기본값은 0이며, 카운트 시작 시 다음 숫자부터 시작한다. 재설정값은 정수만 사용할 수 있다. selector { counter-reset: counter-id reset-number; } counter-increment 카운터의 값을 지정한 값만큼 증가시키거나 감소시키는 속성 counter-reset 속성으로 생성한 카운터의 id와 증가 값을 속성 값으로 사용한다. 카운터 증가 값의 기본값은 1이다. 카운터 증가 값은 정수만 사용할 수 있다. selector { counter-increment: cou..

@keyframes css 애니메이션의 keyframe을 지정하는 규칙 선택자를 사용하지 않는다. keyframe의 지점은 from/to를 사용하거나, 해당 지점의 %를 지정하여 사용할 수 있다. 같은 지점의 keyframe이 중복되어 정의된 경우 마지막 선언 값만 적용된다. keyframe에서 !important 속성은 무시된다. @keyframes animation-name { from {property: value;} to {property: value;} } animation-name 애니메이션의 이름을 지정하는 속성 animation-duration 애니메이션의 1회 지속 시간을 지정하는 속성 s(초), ms(밀리초) 단위를 사용한다 (1s = 1000ms) animation-delay 애니메이..

transition-property 전환 효과를 적용할 css 속성을 지정하는 속성 콤마(,)로 구분하여 여러 가지 속성에 적용시킬 수 있다 - 속성 값 none all : 변경되는 모든 css 속성 property : width, margin, color 등 전환 효과를 줄 속성을 지정 transition-duration 전환 효과의 지속시간을 지정하는 속성 s(초), ms(밀리초) 단위를 사용한다 (1s = 1000ms) transition-timing-function 전환 효과의 가속도를 지정하는 속성 - 속성 값 ease : 중간으로 갈수록 속도가 증가하다 끝에서 느려진다 (default) linear : 처음부터 끝까지 균등한 속도 ease-in : 느리게 시작하여 속도가 점점 증가한다 ease..

transform 요소를 변형시키는 속성 공백(space)으로 구분하여 여러 가지 속성을 같이 줄 수 있다. translate와 scale은 % 단위 사용 시 해당 요소의 크기를 기준으로 변형된다. angle값은 deg단위를 사용한다. - 속성 값 translate(x, y) : 이동 scale(x, y) : 크기 변환 (양수 값만 사용할 수 있으며, 원본 크기의 배수를 나타낸다) rotate(angle) : 회전 skew(x-angle, y-angle) : 기울이기 translate scale rotate skew div { width: 100px; height: 100px; } .parent { float: left; margin: 25px; background-color: lightgray; bor..

text-shadow 글자에 그림자를 추가하는 속성 콤마(,)로 구분하여 여러 개의 그림자를 줄 수 있다. blur-radius와 color 속성은 생략 가능하며, 생략 시 기본값으로 적용된다. (blur-radius : 0, color : text color) text-shadow : offset-x offset-y blur-radius color; - 속성 값 offset-x : x 축 위치 offset-y : y 축 위치 blur-radius : 흐림 정도 (양수 값만 사용) color : 그림자 색상 text-shadow .text { width: 300px; height: 100px; border: 1px solid #000; color: blue; font-size: 30px; font-wei..