• grid layout
  • 인라인, 인라인 블록, 블록


    1.나는
    div(none)
    입니다.

    2.나는
    div(inline)
    입니다.

    3.나는
    div(inline-block)
    입니다.

    4.나는
    div span(block) 입니다.

    Position: relative

    T
    h
    a
    n
    k
    s
    오늘은 개교기념일입니다.

    중간고사 공지사항 / 학기말 공지


    학기말 공지

    공지사항
    이번학기 중간고사는 4.18일 수업시간에 필기시험 및 홈페이지 점검을 하겠습니다.


    이제 곧 여름 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다. 인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio eligendi perferendis magni asperiores rerum minima incidunt nulla error quisquam ab, dolorum hic nemo commodi sint officiis! Provident velit incidunt labore!


    overflow 프로퍼티



    overflow에 visible 값을 적용하면 콘텐트가 박스를 넘어가서도 출력됩니다


    overflow에 scroll 값을 적용하면 박스에 스크롤바를 붙여 출력합니다.

    Table 꾸미기

    이름 Html5 CSS3 Javascript
    허송이 100 95 68
    안수빈 90 85 98
    범채윤 80 90 90
    양재희 85 80 78
    심효진 75 75 86
    합계 310 230 300

    Form 꾸미기


    꽝!


    꽝! 글자가 3초동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다. 무한 반복합니다.

    다양한 Transform

    아래는 회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)가 적용된 사례이다. 또한 마우스를 올리면 추가적 변환이 일어난다.
    rotate(20deg)
    skew(0,-20deg)
    translateY(100px)
    scale(3,1)