언어/HTML & CSS35 응용) HTML 과 CSS (flex 속성) flex :엘리먼트들의 간격을 나눌때 사용한다. 1.부모 > 자식 = 반드시 부모 에게 flex를 적용시켜준다. 2.자식에게 float:left; 를 적용시킨 것 처럼 왼쪽정렬된다. display: flex; flex-direction: row; justify-content: center; align-items: center; [F12]로 정렬 예시를 찾아 볼 수 있음. 아래 그림처럼 로고+메뉴가 있는 헤더를 만들어 보자. DOCTYPE html> flex * { margin: 0; padding: 0; } .con_wrap { width: 600px; height: 600px; border: 10px solid gray; display: flex; /* =>요소를 flex속성으로 변경 =>반드시 부모에.. 2023. 11. 15. 응용) HTML 과 CSS (애니메이션 속성) CSS에서 애니메이션 효과를 줄 수 있다. css에서 작성. 1.애니메이션 속성을 하나 만들어준다. @keyframes 애니메이션이름 { from(=0%) { margin-left: 0; 마지막은from에서 멈춘다. } 50% { } to =100%) { margin-left: 400px; } 2. 적용시킬 엘리먼트에 애니메이션을 불러온다. animation-name: box_ani; => 애니메이션 이름 부여 (keyframes에 적용시킨 이름) 3. 애니메이션 속성을 각각 부여한다. (축약형 사용가능) animation: moving 1s 3s forwards alternate 3; /* =>에니메이션 축약형 =>순서 상관없이 띄어쓰기로 구분된다, => 단, duration은 앞에 delay값은 뒤에.. 2023. 11. 15. 입문) HTML 과 CSS (반응형 12칼럼 그리드 만들기) 그리드 프레임워크 만들기 12칼럼의 단점: 5분의1을 불가함 . 기본1 (col col-xs-1 로 12칼럼으로 일괄 적고나서 숫자 부여하기 ) HTML 12칼럼 반응형 그리드 123 CSS div.container { margin:0 auto; max-width:980; } div.row { margin:0 -15px; } div.row::after { content: ""; display:block; clear:both; } div.row > div.col { float:left; box-sizing:border-box; width:100%; padding:15px; } /*테스트용 코드*/ div.row > div.col::after { content: ""; display:block; height.. 2023. 6. 29. 입문) HTML 과 CSS (반응형 그리드 , 범용클래스 ) 범용 클래스 : 엘리먼트의 맞춤 . 기존 클래스명에 추가 가능. ex) 레이아웃 : 한줄 한줄 공간 % 로 만든다 프레임워크 : 사이트를 여러개 만들 때 중복적으로 사용되는 CSS 틀 HTML 레이아웃 CSS div.container { max-width:980px; margin:0 auto; background-color:blue; /*마무리에서 삭제하기*/ border:10px solid gray; } div.row::after { content:""; display:block; clear:both; } div.row { margin-left:-10px; margin-right:-10px; } div.row > div.col { float:left; width:25%; /*화면에서 4등분되어 나옴. .. 2023. 6. 28. 이전 1 ··· 4 5 6 7 8 9 다음
