분류 전체보기 썸네일형 리스트형 [Html] table 태그 정복하기 tabel 태그란? 정보를 행과 열로 나눠 보여주는 태그 caption : 표의 제목 태그 tr : 표의 행을 담당하는 태그 th : 표의 데이터 중 제목을 담당하는 셀태그 td : 표의 데이터 중 일반 데이터를 담당하는 셀태그 table 태그의 속성 (css로 대체할 수 있으므로 웹표준에는 맞지 않음) border : table과 cell태그틀의 테두리를 지정하는 속성 width : 표의 가로폭을 지정하는 속성 cellpadding : 셀 테두리의 안쪽 여백 cellspacing : 셀들간의 여백 조절 - 테두리 바깥쪽 여백 th, td { border: 1px solid black; } 셀들 사이 여백 없애기 (cellspacing 대체하는 css) table { border-spacing: 0; }.. 더보기 [JS] 숫자 카운트 애니메이션 숫자가 자동으로 카운트 되는 애니메이션 Html & CSS 0 먼저 숫자를 적을 html 요소를 불러온다. var numAnimation = document.querySelector('.num_animation'); var targetNum = numAnimation.getAttribute('data-rate'); 올라가는 카운팅을 할 변수도 선언한다 var num = 0; setInterval을 사용하여 숫자가 올라가는 함수를 작성한다. targetNum으로 data-rate를 가져와서 사용하는 이유는 유지보수에 용이하도록 하기 위함이다. 나중에 html만 수정해도 스크립트는 수정 안할 수 있게 변수로 사용해야 한다. var timer = setInterval(function(){ ++num; numA.. 더보기 [JS] 스크롤 애니메이션 쉽게 구현하기 IntersectionObserver()를 통해서 스크롤 애니메이션을 쉽게 구현할 수 있다. Html & CSS iphone 15 출시 충전포트 어쩌구 그래서 제거 어쩌구 먼저 스크립트에 IntersectionObserver를 불러와서 변수에 저장하기 var observer = new IntersectionObserver(()=>{}) observer.observe()를 사용해서 html 요소가 화면에 등장하는지 감시할 수 있다. 원하는 Html 요소를 불러와서 ()안에 넣어준다. var div = document.querySelectorAll('div') observer.observe(div[0]) observer.observe(div[1]) observer.observe(div[2]) observer.. 더보기 [CSS] font 단위 pt와 px의 차이점 폰트 크기의 단위 중에서 pt(point)와 px(pixel)이 있다. pt는 절대적인 값이고 px은 상대적인 값이다. 1pt : 1/72인치 1px : 1픽셀. 모니터의 해상도이므로 모니터마다 다르다 Window에서는 9pt가 12px 정도 되지만 Mac에서는 9pt가 9px이다 (Window에서의 해상도는 96dpi이고 Mac은 72dpi이기 때문) pt px 6 pt 8 px 7 pt 9 px 7.5 pt 10 px 8 pt 11 px 9 pt 12 px 10 pt 13 px 10.5 pt 14 px 11 pt 15 px 12 pt 16 px 13 pt 17 px 13.5 pt 18 px 14 pt 19 px 14.5 pt 20 px 15 pt 21 px 16 pt 22 px 더보기 [웹디자인기능사] 필기 55 웹 그래픽 제작 기법의 정의 ~ 60 애니메이션의 효과 및 활용 55. 웹 그래픽 제작 기법의 정의 1. 웹 그래픽 제작 기법의 정의 웹 그래픽 디자인은 효과적으로 웹 사용자에게 정보 전달을 돕는 도구 정보 전달 역할 : 정보 접근의 편의성 제공, 정보에 대한 빠른 이해력 증대, 시각적ㆍ청각적인 친근감을 확대함 2. 웹 그래픽 편집 프로그램 컴퓨터상에 그림이나 문자, 도형 등을 편집 할 수 있는 프로그램 도안, 작업, 페인팅, 리터칭을 가하여 합성을 하는 프로그램 (포토샵, 페인터, 일러스트레이터, 코렐드로우 등) 3. 이미지를 표현하는 단계 이미지 구상 단계 → 도구 선택 단계 → 색상 선택 단계 → 이미지 표현 단계 4. 웹 그래픽 이미지 디자인 시 고려할 사항 파일 크기 이미지의 색상 파일포맷 형식 5. 웹 사이트에서 사용할 이미지 소스를 얻는 방법 사이트의 콘.. 더보기 [웹디자인기능사] 필기 51 웹 접근성 이해 ~ 54 파일 포맷의 특징 및 활용 51. 웹 접근성 이해 1. 웹 사용성(Web Usability) 사용자 개개인의 선호도나 사용 수준에 맞춰 누구라도 쉽게 사용할 수 있도록 디자인함 사용자가 우연한 또는 의도하지 않은 선택의 결과로 어려움에 빠지는 경우를 최소화하도록 디자인함 사용자에게 필요한 정보를 효과적으로 전달하도록 디자인함 사용자가 사용하기 편리한 환경을 제공하기 위해 내용과 기능을 단순화 일관성 있는 디자인 유지, 일관성 있는 레이아웃으로 배치 웹 사이트의 주제를 쉽게 파악할 수 있도록 정보의 우선순위 고려 2. GUI 방식 사용자가 컴퓨터와 정보를 교환할 때 그래픽을 통해 작업할 수 있는 환경 그래픽 사용자 중심의 환경으로 아이콘, 내비게이션 툴바 등으로 컴퓨터 사용을 손쉽게 해줌 제5세대인 1990년도 이후부터 본격적으로 .. 더보기 [웹디자인기능사] 필기 46 웹 페이지 디자인 ~ 50 사용자 인터페이스 46. 웹 페이지 디자인 1. 웹 디자인(Web Design) 웹 디자인이란? 웹 페이지를 디자인하고 제작하는 것 웹과 디자인이라는 두 가지 개념이 결합된 것 웹 디자인은 개인용 홈페이지 외 기업용, 상업용 등 매우 다양함 웹 디자인을 위한 조건 일관성을 유지하며 현재 위치를 알 수 있도록 함 웹 사이트의 주제를 쉽게 파악할 수 있도록 구성 내비게이션 최적화 웹 디자인 기획 시 고려해야 할 사항 사이트의 목적과 필요성을 충분히 인식하였는가? 벤치마킹 : 유사, 경쟁 사이트의 디자인 분석은 완료했는가? 통일성 확보를 위한 컬러, 톤, 폰트, 레이아웃의 원칙들은 수립되었는가? 웹 디자인 발상의 전개과정 발의 → 연구/조사 → 분석 → 평가 → 개발 → 전달 발의 : 어떤 사이트를 어떻게 만들 것인가에 대한 .. 더보기 [웹디자인기능사] 필기 41 컴퓨터 그래픽스 개념 및 정의 ~ 45 웹 페이지 기획 3과목 웹 그래픽스 디자인 41. 컴퓨터 그래픽스 개념 및 정의 1. 컴퓨터 그래픽스(Computer Graphics)의 개념 넓은 의미로 컴퓨터를 이용한 모든 이미지와 영상을 의미함 컴퓨터를 이용한 도형이나 화상을 작성하는 기술 유망한 첨단 분야가 되고 있음 인간의 상상력을 무한히 표현 가능하게 하는 방법 중 하나 컴퓨터의 하드웨어와 소프트워어를 이용하여 도형, 그림, 사진 이미지 등의 시각적 이미지를 만들어 내고 디지털화(Disitalize) 시키는 것 컴퓨터 그래픽스는 크게 2D 그래픽스와 3D 그래픽스로 나눌 수 있음 영화나 영상물 등의 멀티미디어 분야에서 가장 효과적으로 활용되고 있음 디자인과 순수예술, 영상산업 등 광범위한 활용영역을 가짐 단순ㆍ반복 작업을 편리하게 할 수 있음 사용자가 그래픽.. 더보기 이전 1 2 3 4 ··· 11 다음
