개발입문뉴비 - 국비지원 ( Front End )/css

    [2022/02/04]국비지원 CSS3 13 @mediaquery

    [2022/02/04]국비지원 CSS3 13 @mediaquery

    flex, grid는 안 하고 끝나버린 css3 그 부분은 독학해야 하고 사실 나 스스로는 @mediaquery도 다시 해 봐야 한다. 더보기 이 날은 컨디션이 달마다 찾아오는 대자연현상으로 심한 난조를 보여, 파일은 같은 팀원께서 제공해주신 부분에 해당하기 때문임 압도적 감사!!!! css3에서 반응형 웹에 필요한 것 1. flex 2. @mediaquery 공통점 하나만 이용한 반응형 웹 가능 사용 비추 단위 px : 사이즈 고정 단위라서 사용 추천 단위 ( v = viewport ) 해상도 : vw, vh, vmin, vmax, % font사이즈 : rem, em 단점은, flex와 @mediaquery를 둘 다 쓸 수는 있어도 javascript까지 적용하게 되면 같은 해상도일지라도 mediaqu..

    [2022/01/03]국비지원 CSS3 12 animation

    [2022/01/03]국비지원 CSS3 12 animation

    animation : name duration timing-function delay interation-count direction fill-mode play-state steps name : 모션 이름 duration : /s, /ms timing-function : 모션 중 가속도 delay : 지연시간 interation-count : 반복횟수 0% ~ 100% infinite direction : 방향 normal alternate revers fill-mode : 시작 전 후 효과 forwards backwards both none play-state : 실행 상태 paused play steps : frame 수 입력 방식 ex @keyframes ani { 0%{left: 0;border:..

    [2021/12/31]국비지원 CSS3 11-(6) 클론코딩 예제: html5헤럴드

    [2021/12/31]국비지원 CSS3 11-(6) 클론코딩 예제: html5헤럴드

    원본 작업내용 html HTML5 헤럴드 HTML5 & CSS3를 이용해 옛 신문 스타일을 재현하다 주메뉴 홈 등록 Vol.MMXI June 4, 1904 마지막 미개척지 비디오, 드디어 정복하다! Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nun..

    [2021/12/31]국비지원 CSS3 11-(5) form appearance, outline

    [2021/12/31]국비지원 CSS3 11-(5) form appearance, outline

    ★★★★★ 브라우저 식별 접두사 필요한 속성 ★★★★★ appearance : none )) 폼 외관 초기화 브라우저 식별 접두사 없어도 되는 property outline-offset : 외곽선과 border 간격 outline : 외곽선 회원가입양식 form 속성의 고유한 디자인을 초기화 해서 모든 웹브라우저에서 동일하게 보이도록 하는 속성 010 outline은 border영역 외곽에 테두리 치는 속성 결과물

    [2021/12/31]국비지원 CSS3 11-(4) 텍스트 설정 etc

    [2021/12/31]국비지원 CSS3 11-(4) 텍스트 설정 etc

    text-overflow ellipsis : ... clip : 컷! word-wrap break-word : 길이가 긴 알파벳 단어의 줄바꿈 용도 word-break break-all : 단어 끊기 keep-all : 단어 유지 white-space normal : default 자동 enter nowrap : enter none pre : 연속 공백 유지. 줄바꿈은 수동 입력 pre-wrap : 모든 연속 공백 유지. 한 줄이 너무 길어지면 자동 enter pre-line : 모든 연속되는 공백을 합치며, 한 줄이 너무 길어지면 자동 enter break-spaces pre-wrap과의 차이점 줄 끝에 연속 공백 있는 경우 공간 인정 연속 공백이 있어도 중간, 끝 어디서든 자동 enter elemen..