1. box model
2. border : 경계선
3. resize
4. box-shadow
5. display
6. table을 출력 시 고려 사항
7. floating
8. position
9. transition animation
10. transform
11. Keyframe Animation
12. 3D 변환 가능
** 회원가입 폼 디자인
1. box model
- 태그로 표현되는 하나의 영역
1) width : 콘텐츠의 너비
2) height : 콘텐츠의 높이
3) box-sizing : box의 크기를 설정하는 방법
- 값으로는 content-box와 border-box
- content-box를 설정하면 width와 height가 콘텐츠의 크기로만 설정되고 border-box를 설정하면 border의 너비까지 포함
4) max-height, max-width, min-height, min-width
- 콘텐츠의 최대 최소 크기를 설정
- 반응형 웹 디자인에서 너비가 너무 작아지면 콘텐츠를 제대로 표시할 수 없어서 min-width를 설정해서 일정 크기 이하로는 작아지지 않도록 설정
5) overflow
- 영역의 크기에 비해서 콘텐츠의 크기가 더 클 때 어떻게 할 것인지 설정
- visible, hidden, scroll, auto
- 최근에는 많은 양의 텍스트의 경우 일부분만 보여주고 더 보기 버튼을 만들어서 나머지 부분을 출력할 수 있도록 하는 편이다.
6) padding
- 경계선과 콘텐츠 사이의 여백
- padding하고 값을 설정하면 상하좌우 동일하게 설정
- padding-right, padding-left, padding-top, padding-bottom을 이용해서 한쪽 방향의 여백을 설정할 수 있다.
7) margin
- 경계선과 경계선 사이의 여백
- 설정 방법은 padding과 같음
- margin은 중첩되는 경우 큰 값 하나만 적용
8) 스타일시트를 보다 보면
*{
padding:0;
margin:0;
}
- 브라우저 간의 호환성 문제 때문에 설정
호환 모드 : width나 height에 border + padding + margin의 크기를 포함
표준 모드 : width나 height에 border, padding, margin의 크기를 포함하지 않음
2. border : 경계선
1) border-style : 선 모양
- none, dotted, dashed, solid, double, groove, ridge, inset, outset
- 각 방향에 따라 다르게 설정하고자 하면 border-left-style, border-right-style, border-top-style, border-bottom-style로 설정
- 이 설정을 하지 않으면 다른 설정을 무시
2) border-width : 선 두께
- 방향에 따라 다르게 설정 가능
3) border-color : 선 색상
- 투명(transparent) 가능
- 방향에 따라 다르게 설정 가능
4) border : 선 두께 선 스타일 선 색상으로 한번에 설정하는 것도 가능
5) border-radius
- 경계선에 라운드 효과를 설정할 수 있음
- 4개 방향으로 각각의 값을 설정
- 원 모양이나 반원 모양으로
6) border-imager-source
- 경계선에 이미지를 설정
- url(파일 경로)
- img 태그나 배경으로 설정되는 경우 이미지의 크기를 조절할 수 있지만 list나 border에 이미지를 설정하면 크기 조절이 안된다.
- 이미지를 만들 때 적절한 크기로 만들어 주어야 한다.
7) border-image-slice
- 시계 방향으로 4개의 값을 설정해서 이미지를 잘라내는 옵션
8) border-image-repeat
- 반복 여부를 설정하는 것으로 stretch, repeat, round, space
9) border-image-width
10) border-image-outset
- 경계선 바깥으로 나올 이미지의 거리
3. resize
- 크기 조절 여부를 설정하는 것으로 horizontal(수평), vertical(수직), both
4. box-shadow
- 2개의 값과 색상을 설정
- 첫 번째 값은 x offset
- 두 번째 값은 y offset
5. display
- 요소의 성격을변경해주는 속성
1) block : 블록 요소가 된다. - 주위에 다른 콘텐츠가 배치될 수 없다.
2) inline : 인라인 요소가 된다. - 주위에 다른 콘텐츠가 배치될 수 있다.
3) inline-block : 박스를 인라인 요소로 변경하고 줄 바꿈이 일어나지 않도록 해주는 설정
4) none : 박스가 보여지지 않음
6. table을 출력 시 고려 사항
- table에서 많은 행을 출력해야 하는 경우 세로 방향 역역의 크기를 설저앟고 스크롤 바를 같이 출력하는 것이 좋다.
- table 아래에 다른 콘텐츠가 있다면 하단으로 많이 내려가야 콘텐츠를 확인할 수 있기 때문이다.
- 타이틀은 고정해서 출력하는 것이 좋다.
- 하단으로 이동하게 되면 값은 보이지만 타이틀이 보이지 않아서 다시 위로 올라가야 하는 불편함이 발생할 수 있다.
7. floating
- 박스를 화면에 떠 있는 형태로 만드는 것
- 영역만 차지하고 다른 콘텐츠들은 없는 것처럼 배치가 된다.
- left, right, none, inherit
- 블록 요소를 인라인 형태로 배치할 때 display 속성을 이용하기도 하지만 float:left 이런 식으로 적용해서 배치하기도 한다.
- left로 설정하면 뒤에 나오는 내용은 블록의 윗변의 오른쪽에서 부터 시작하고 right로 설정하면 윗변의 왼쪽에서부터 시작한다.
- float 해제
clear : none | left | right | both
overflow : auto | hidden
float : left | right
- float 속성을 이용해서 다단 문서나 메뉴를 만들 때 많이 사용
8. position
- 출력 방식을 설정
- 기본값은 static인데 요소들을 순서대로 배치하는 모드로 이 때는 요소의 시작위치를 변경할 수 없음
- relative를 설정하면 요소들을 다른 요소와의 관계를 이용해서 배치하는데 시작위치를 변경할 수 있음
- absolute를 설정하면 모든 요소들의 시작위치를 브라우저의 좌상단을 기준으로 지정할 수 있음
- fixed는 고정형태로 absolute와 유사한데 문서가 스크롤되면 고정이 되서 구형 브라우저에서는 문제가 발생
- 시작위치는 left, top, right, bottom 속성을 이용해서 배치 가능
9. transition animation
- transition : 하나의 스타일에서 다른 스타일로 부드럽게 변경해주는 것
- transition-property : 애니메이션을 적용할 속성을 설정 - all을 지정하면 모든 속성
- trasition-duration : 애니메이션 적용 시간
- transition-timing-function : 인터폴레이션 효과 설정 - ease, linear, ease-in, ease-out 등
- transition-timing-delay : 애니메이션을 딜레이시키는 시간을 설정
- 벤더 프리픽스 이용
10. transform
- 원본의 크기나 좌표 또는 각도를 변환
1) 이동
- translate(x축 이동값, y축 이동값)
2) 크기변화
- scale(가로 크기 변화 배수, 세로 크기 변화 배수)
3) 회전
- rotate(각도deg)
4) 비틀기
- skew(x축, y축)
11. Keyframe Animation
- transition은 시작과 마지막 2가지 값만 설정
- keyframe Animation은 중간 값 설정이 가능
@-webkit-keyframes 애니메이션이름{
from{시작값}
to{종료값}
}
- 중간 중간에 백분율로 다른 값 설정하는 것이 가능
-webkit-animation-name : 이름
-webkit-animation-timing-function : 인터폴레이션 효과
-webkit-animation-iteration-count : 반복횟수(infinite를 설정하면 무한반복)
-webkit-animation-duration : 시간
-webkit-animation-direction : alternate(반대방향으로도 애니메이션이 설정됨)
12. 3D 변환 가능
- scaleX, scaleY, scaleZ, translateY, translateZ, rotateX, rotateY, rotateZ
** 회원가입 폼 디자인
- EMAIL : 한 줄 입력 -> 오른쪽에 중복확인 버튼 배치
- PASSWORD : 한 줄 입력
- 하고 싶은 이야기 : 어러 줄 입력
- 학력 : 중졸, 고졸, 대졸, 대학원졸이상, 기타 중 선택 : 필수
- 성별 : 남자 아니면 여자 : 필수
- 메시지 수신 설정 : 메일 수신과 SMS 수신 : 선택
- 회원가입 버튼과 작성 취소 버튼
- form에는 id를 받드시 설정
- 유효성 검사를 수행하려면 id를 설정
- 서버에게 전송해야 하는 데이터는 name을 설정
