IT Study/HTML & CSS23 CSS - 애니메이션/폰트 적용 | transition css스타일에 시간, 전환효과, 지속시간 등을 설정할 때 사용 결과 영상 확인 : https://blog.naver.com/jun950617/222824528860 Web - 애니메이션/폰트 적용 | transition css스타일에 시간, 전환효과, 지속시간 등을 설정할 때 사용 | animation 구조 @keyframes 애... blog.naver.com | animation 구조 @keyframes 애니메이션 명{ 0%{적용할 css} 처음 시작할 때 50%{적용할 css} %는 본인이 원하는 부분에서 css를 적용할 수 있음 100%{적용할 css} 끝날 떄 } 결과 영상 확인 : https://blog.naver.com/jun950617/222824528860 .. 2022. 12. 31. CSS - hover/after/before | css style hover : 마우스가 해당 부분에 올라갔을 때 after : 해당 요소 뒤에 before : 해당 요소 앞에 list-style : none li 요소 앞 ●을 생략 text-decoration: none 문자열 밑줄 생략 text-decoration: underline 문자열 밑줄 표시 overflow : 본인이 지정한 범위 이상으로 요소의 내용이 초과했을 때 사용 overflow : hidden 초과된 부분 생략 overflow-y : scroll 세로로 스크롤 이벤트 2022. 12. 31. CSS - 내부/외부스타일, 선택자 | CSS 내부스타일 html 파일 내부에서 css를 적용시킨다. 외부 스타일 link를 이용하여 외부 css파일을 연동하여 css를 적용시킨다. | id, class명 id명 하나의 특정 요소에 css를 적용시킬 때 사용 사용방법 #id명{ css } class명 여러개의 요소에 css를 적용시킬 때 사용 사용방법 .class명 | 선택자 * : 전체선택자. 모든요소에 css를 적용시킨다. > : 자식 선택자. 부모 바로 밑 요소에 css를 적용시킨다 , : 그룹 선택자. 동일한 css를 적용할 경우에 사용한다. 2022. 12. 31. HTML - 시멘틱 태그/ 웹 템플릿 | 시멘틱 태그 웹 접근성을 위해 사용한다. header 보통 웹페이지의 메뉴, 로고 등 위쪽 부분에 사용한다, section 웹 페이지의 중앙 부분을 담당한다. footer 웹 페이지의 맨 아래 부분. 회사정보, 정보처리방침 등 부분에 사용한다. practice 웹 템플릿 사용하기 https://html5up.net/ HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net 원하는 템플릿 선택 후 다운로드 압축파일 압축 해제 txt파일을 제외한 파일들을 드래그하여 webapp 폴더로 이동 본인의 스타일에 맞게 편.. 2022. 12. 31. HTML - 태그(ol/ul/table/input & 속성) | ol/ul ol(오더리스트) 목록에 넘버가 있다. ul(언 오더리스트) 목록에 넘버가 없다. ul태그가 실무에서 더 많이 사용된다. practice ul태그 중첩사용 | table 표를 만들 때 사용하는 태그 practice 내부 스타일을 이용하여 크기 지정 practice2 태그 - 텍스트 중앙정렬, 텍스트 강조 style 속성 border-collapse : collapse - 라인 겹치기 text-align - 문자 정렬(left, center, right) 태그의 href 경로로 파일경로 설정 >> 다른 html 파일 페이지로 이동이 가능 교과목 점수 HTML 93 css 92 평균 92.5 다음페이지 1 2 3 4 1 2 3 4 5 이전페이지 | form 사용자의 입력을 받아들.. 2022. 12. 31. HTML - 태그(br/a/img/img-속성) | HTML 구조 태그하나를 요소_element) 라고 한다. 요소는 블록요소와 인라인 요소가 있다. 블록 요소 인라인 요소 ● br 태그 - 줄바꿈(개행) 태그 ● a태그 - 페이지 링크 이동 및 위치 이동에 사용하는 태그 ● img태그 href - #id명을 통해 해당 태그부분으로 이동 해당 id의 태그로 이동 ● img태그의 속성 target "_blank" : 새 탭으로 이동한다. "_self" : 현재 창에서 링크 오픈(default값) ● img태그 - 이미지 태그 사용할 이미지 파일을 images 폴더를 만들어 드래그 삽입 alt - 이미지에 대한 설명이 들어가는 부분 >> 웹 접근성을 위해 사용(필수) src - 이미지 파일의 경로 나머지 사진 생략- 2022. 12. 31. HTML - web | 웹 요청과 응답이 일어나는 장소 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미 | 클라이언트 사용자, 브라우저, 고객 서버에게 요청을 함 웹 브라우저 응답해주는 페이지를 보여주는 View 공간 뷰 파트가 console에서 GUI형식으로 변한다. 구조 : HTML 스타일 : CSS 동작 : JS | 서버 (클라이언트가 수행한) 요청에 대한 응답 요청받은 서비스를 응답 | URL(Uniform Resource Locator) 인터넷 자원위치(요청에 대한 페이지 위치정보) | 프로토콜(protocol) 약속, 통신규약 HTTP(HyperText Transfer Protocol) 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 요청한 사람과 응답을.. 2022. 12. 31. CSS - Animation css 애니메이션 요소의 현재 스타일을 다른 스타일로 변화. 적용할 스타일은 이전 프레임에 적용하는 것이 아니라 초기 스타일에 적용 구조 @keyframes 애니메이션{ from 혹은 0%{ 처음에 적용할 스타일} 정수%(50%, 70%...){ 중간 지점마다 적용할 스타일} to 혹은 100%{ 마지막에 적용할 스타일} } CSS Style -> Animatione 속성 name : 애니메이션 이름 duration : 재생 시간 count : 몇 회 반복 direction : alternate(왕복과 편도) normal : 완료 후 초기상태로 alternate : 한번 끝까지 진행 후 반대로 진행 reverse : 프레임을 거꾸로 진행 1) Practice 결과 영상 확인 : https://.. 2022. 12. 30. CSS - transform/transition CSS 2D 1. transform 이차원 좌표에서 요소를 변형시키는 속성. 이동, 확대/축소, 회전, 경사 등을 만들 수 있음 translate : x축과 y축 이동 scale : x축과 y축으로 배수만큼 커진다 rotate : 각도만큼 회전 skew : x축과 y축의 각도만큼 기울어짐 linear-gradient (그라데이션 효과) background : linear-gradient(방향, 색상1, 색상2) 방향은 생략이 가능하며 생략 시에는 벤더 프리픽스도 생략가능 방향에 가로방향 (left, right)을 작성시에는 벤더 프리픽스를 반드시 작성해 주어야함 벤더 프리픽스(vendor prefix) 주요 웹 브라우저 공급자가(safari, ie, chrome...)새로운 실험적인 기능을 제공할.. 2022. 12. 30. 이전 1 2 3 다음
