39일차 수업 정리(css - box model, 회원가입 페이지 작성)

1. box model

    => 태그로 표현되는 하나의 영역

  1) width : 컨텐츠의 너비

  2) height : 컨텐츠의 높이

  3) box-sizing : box의 크기를 설정하는 방법

    - 값으로는 content-box와 border-box

    - content-box를 설정하면 width와 geight가 컨텐츠의 크기로만 설정되고, border-box를 설정시 border의 너비 포함

  4) amx-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-image-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:nono | left | right | both

        - overflow:auto | hidden

        - float: left | right

    => float 속성을 이용해서 다단 문서나 메뉴 만들 때 많이 사용

 

8. position

    => 출력방식을 설정

    => 기본 값은 static인데 요소들을 순서대로 배치하는 모드. 요소의 시작위치 변경 불가

    => relative : 요소들을 다른 요소와의 관계를 이용하여 배치. 시작위치 변경 가능

    => absolute : 모든 요소들의 시작위치를 브라우저의 좌상단을 기준으로 지정 가능

    => fixed : 고정형태로 absolute와 유사. 문서 스크롤시 고정되어 구형 브라우저에서는 문제 발생

    => 시작위치 : left, right, top, bottom 속성을 이요하여 배치

 

9. transition animation

    => transition : 하나의 스타일에서 다른 스타일로 부드럽게 변경해 주는 것

        - transition-property : 애니메이션을 적용할 속성을 설정 - all지정시 모든 속성

        - transition-duration : 애니메이션 적용 시간

        - transition-timing-function : 인터폴레이션 설정 - ease(가속->감속), linear(균일), ease-in(가속), ease-out(감속)등

        - transition-timing-delay : 애니메이션을 딜레이시키는 시간(벤더 프리픽스 사용)

 

10. transform

    => 원본의 크기나 좌표 또는 각도를 변환

  1) 이동 :  transelate(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, translateX, translateY, translateZ, rotateX, rotateY, roatateZ

 

**회원가입 폼 디자인

    => id : 한줄입력 -> 오른쪽에 중복확인 버튼 배치

    => password : 한줄 입력

    => password check : password 확인

    => nickname : 한줄입력 -> 오른쪽에 중복확인 버튼 배치

    => email : 한줄 입력

    => 회원가입 버튼과 작성취소 버튼

 

    => form에는 id를 반드시 설정

    => 유효성 검사를 수행하려면 id를 설정

    => 서버에 전송해야 하는 데이터는 name을 설정