자기 계발 썸네일형 리스트형 CSS 속성 2 display - 각 요소의 박스 타입을 지정 div {display: inline;} ① Property Value : 속성값 inline : 박스 타입을 인라인 요소로 지정block : 박스 타입을 블록 요소로 지정inline-block : 박스 타입을 인라인 블록 요소로 지정, 컨텐츠는 블록 요소로 지정하고 요소 자체는 인라인 요소로 지정, width / height 속성 사용 가능 none : 요소를 전혀 표시하지 않음 background - 요소의 배경을 설정 background: color(색상) image(이미지 경로) position(위치) repeat(반복유무); div {background: #00ff00 url(.."img/image.jpg") no-repeat center top;}.. 더보기 FLOAT 플로트, POSITION 포지션 Float 블록 요소를 인라인 요소 처럼 사용하기 위해 사용 레이아웃 상의 오류 상속 해제해야함 div {float :left;} property value : 속성값 left : 좌측으로 float 1 2 3 4right : 우측으로 float 4 3 2 1none : 속성없음 상단부터 하단으로 정렬 Float 속성 해제 clear:both;overflow:hidden;clearfix - 가장 편안하게 플로트를 해지하는 방법으로 플로트가 들거간 속성의 부모요소에 적용 더보기 폰트속성 font:style(폰트스타일) weight(굵기) size(크기)/line-height(행간) family p { font:itally bold 16px/3 "open Sans", san-serif;} - font-style:normal:기본 Italic:이탤릭 - font-weight : 폰트 굵기 normal : 기본 bold : 두껍게 - line-height : 행간 normal number px % - font family : 글꼴 serif : 명조체, san-serif : 고딕체, monospace : 행간이 같은 서체, script : 캘리서체 font-color 폰트색상 - text-align : 텍스트 정렬방식 left : 좌측 정렬 right : 우측 정렬 center : 중앙정렬 .. 더보기 box model margin top right botton left (시계방향)div{margin:20px 40px 20px 40px;} padding- 안쪽 여백 컨텐츠 사이즈에 영향을 줌. 경계 영역에 사이즈가 증가함. padding 10px 20px 30px 40px padding top-bottomdiv{padding:20px 40px;} 위, 아래 좌,우 paddingBODER도 컨텐츠의 하나다. 마진 값도 보더 이후 잡는다. border borde r :1px solid #000000 (두께 종류 색상) border - 방향div { border-top : 1px solid #00000000; } border - 속성div { border-width:1px;border-style:solid;border-col.. 더보기 선택자 조합 1. 하위 선택자 선택자와 선택자 (공백문자로 구분)부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용하는 방법 .note p {color:"orange"} 2. 자식 선택자 선택자 > 선택자 (왼쪽 부등호로 구분)부모 요소 바로 뒤의 자식요소 (자식 요소 이하를 포함하지 않는다)를 대상으로 스타일을 적용하는 방법 .swag > p {border : 1px solid red;} 3. 인접형제 선택자 선택자 + 선택자 (플러스 기호로 구분)문서 트리 구조상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 먼저 등록한 요소를 형 요소, 나중에 등록한 요소를 동생 요소라고 하는데 이때 나중에 등록한 동생요소에 스타일을 적용하는 방법 h1 + h2 {color : gray ;backgroundc.. 더보기 CSS 선택자 CSS 선택자 1. 전체 선택자 (Universal Selector) *{color:red;} 2. 태그 선택자 li{color:red;} 3. 아이디 선택자 - 요소의 id를 속성값으로 선택 #id{color:red;} #dog{color:red;} * id는 고유의 값으로 한번밖에 못쓴다. 4. 클래스 선택자 .textt{color:blue;} * class는 다수로 사용 가능하다. - id 와 class 의 성격은 같다. - 헷갈린다면 class로 써도 무관함. id : header, footer, nav, article 선택자 조합 1. 태그+클래스 li.class{color:red;} 동해 백두산 div.test{color:red;} 2. 아이디+클래스 div.#test.test (아이디+클래스.. 더보기 퍼블리싱 주석 인라인요소 순수한 인라인요소 span 인라인 블록요소 인라인 요소에서 불가능한 width, height, margin, padding, bording 지정 가능 용어란? 블록요소 사용불가 용어에 대한 설명 - 블록 요소 및 인라인 요소 포함 input -type-text 하나만 있어도 사이트가 되는 컨텐츠, 구분이 명확하여 별도로 분리가 되어도 문제 없는 영역 독립적으로 쓰이기에는 좀 애매할 때 이미지와 이미지 아래 코멘트가 달린 형태 아무것도 의미가 없을 때 사용, 활용도 높음 절대경로와 상대경로 절대경로 : 특정 소스의 바뀌지 않는 고유의 경로 상대경로 1. 호출 문서를 기준으로 특정 소스의 경로를 인식 index.html → img 폴더 → minion02.jpg ; img 폴더 안에 mini.. 더보기 웹표준 퍼블리싱 이론 수업 첫째날 # 웹표준이란 - W3C 표준안을 지켜 웹사이트를 제작하는 것. # 웹 접근성 - 장애가 있는 사용자든 어떤 웹 환경을 가지고 있는 사용자든 모두 접근이 가능하도록 하는 것 # 크로스 브라우징 : 인터넷 익스플로러, 크롬, 파이워 웍스 등 모든 브라우저에 동일하게 표현이 되도록 설정을 해주는 것. # 버전 호환성 고려 : 하위 호환성 - 인터넷 익스플로러 # 엣지 브라우저 : 윈 10 부터 마이크로소프트사에서 인터넷 익스플로러의 기존 취약했던 호환성에 대한 단점을 극복하고자 만들어진 새로운 브라우저 # IE 기본 세팅 해야할 버전 : IE 8.0 , IE 9.0 , IE 10 # 인터넷 창을 열고 [도구] 창에서 F12 눌러 하단 Edge 에서 버전별 보기를 보면 어떤 버전에서 어떻게 나타나는지 알 수 .. 더보기 Flash 플래쉬 소개 Flash 플래쉬 소개 인터랙티브한 컨텐츠 제작도구 (사용자가 마우스를 갖다놓으면 반응이 일어나는 컨텐츠) PC, 모바일, 디바이스 등 각종 기기의 화면에 매력적인 컨텐츠를 일관성 있게 전달 - 네비게이션 제작 (웹에서 메뉴)- 배너(Banner) 제작- 게임/애니메이션 제작- 비디오 컨텐츠 제작 : *flv 형식의 파일로 변환- 각종 어플리케이션 제작 : 모바일 제품 및 웹 어플리케이션 (프로그램 제작) CS5의 새로운 주요기능 * 텍스트 엔진 : 새로운 Text Layout Framework 를 통해 인쇄 품질의 타이포그래피를 사용하여 텍스트를 제어*CODE Smippets: 프로젝프에 미리 작성된 코드를 삽입함으로써 ActionScrip 3.0 학습에 대한 부담을 덜 수 있으며보다 창의적인 컨텐츠 .. 더보기 Batch Capture Batch Capture 1. Batch Capture In-Out 캡쳐가 하나씩 클립을 캡쳐하는 방법이라면 Batch Capture 는 Tape에서 내가 원하는 부분을 선택하고 일괄적으로 한 번에 캡쳐받는 방법을 의미한다. Batch Capture 받는 순서 ① 캡쳐할 부분을 선택하고 In-Out 을 설정한다. ② Log Clip을 클릭해서 Off-line 클립을 만든다. ③ Off-line 클립을 선택하고 마우스 우클릭하여 Batch Capture 를 실행한다. ④ Tape 확인 후 캡쳐 창이 열리면서 타임코드 순서로 캡쳐 받는다. 2. Normal Capture 캠코더를 재생하고 Capture 버튼을 눌러서 즉시 Capture 하는 방식으로 초보자들이 선호한다. 3. Scene Detect 캠코더에.. 더보기 캠코더를 이용한 Video Capture 하기 프리미어 Capture 하기 1. 캠코더 PC에 연결 DV - 60 6mm Tape 아날로그 시절 DV 로 NTSC 포맷만 촬영 DV NTSC 오늘날은 HDV 포맷이 새롭게 등장함 1080i 30 (60) 포맷 사용 > HDV도 HDV 1080i 60(30) 선택 > 동일한 포맷의 Sequence 선택 캠코더와 PC를 IEEE 1394 케이블을 이용하여 연결한다. (캠코더는 Play 모드로 해놓는다.) 정상적으로 연결되면 디지털 비디오 장치 라는 창이 생성된다. > 아무작업 하지 않음 > 확인 2. Capture 방법 File > Capture 메뉴 실행한다. 단축키는 F5 Stopped 현재 연결된 캠코더가 멈춰있음 Played 현재 연결된 캠코더가 재생 중임 Capture Device Offline .. 더보기 프리미어의 주요기능 프리미어의 주요 기능 1. 프로젝트 생성 프리미어 CS4 실행시 프로젝트 생성 > 프로젝트 단위로 편집한다. > 새로운 영상 편집시 프로젝트부터 생성한다. 로케이션 (위치 지정) : 프로젝트는 D드라이브에 두는 것이 좋다. 2. 시퀀스의 생성 시퀀스란 실제로 Premiere에서 편집하는 클립으로 시퀀스를 제대로 만들려면 편집 포맷을 알아야한다. 보통 DV NTSC에서 48KHz를 선택 3. 프리미어의 주요 패널 및 패널 구조 프리미어는 크게 프로젝트 패널, 소스 모니터 패널, 프로그램 모니터 패널, 타임라인 패널로 구분된다. 프리미어는 패널 구조로 되어있어 이동시 원하는 윈도우로 손쉽게 이동 가능하다. 4. 아날로그 방송 방식과 디지털 방송 방식 1) 아날로그 방송 우리나라가 사용하는는 아날로그 방송 방.. 더보기 UCC 제작과정 UCC (USER CREATED CONTENTS) 사용자가 직접 제작한 콘텐츠 사용자가 상업적인 의도없이 제작한 콘텐츠를 온라인상으로 나타낸 것 UCC 제작과정 기획 → 동영상 촬영하기 → 동영상 편집하기 → 사운드 적용하기 → 동영상 올리기 * 프리미어 작업 진행 순서 환경설정 → 캡쳐 → 불러오기 (Import) → 편집 → 자막 입히기 → 트래지션 (장면전환 적용하기) → Effect (특수효과 적용하기) → 오디오 편집 → Export (내보내기) .avi 더보기 링크 지정 스타일 시트 링크 지정 스타일 시트 1. 링크관련 속성 의사 선택자 (psudo selector)를 이용하여 태그에 대해 여러가지 링크 관련 스타일을 지정 형식 : 항목명 (통상적으로 A 태그) : 태그 {속성:값} CSS 태그 기능 LINK 링크 설정시 필요 ACTIVE 설정된 영역을 마우스로 클릭했을 때 링크 설정 VISITED 방문했었던 링크를 설정 HOVER 마우스 커서가 현재 설정된 링크에 위치했을 때 설정 FOCUS 현재 설정된 영역에 포커스가 존재할 때 설정 예) A:VISIT {COLOR:VIOLET} 방문했던 곳의 링크 색상을 보라색으로 설정 A:HOVER {COLOR:YELLOW; TEXT_DECORATION:NONE} 현재 링크된 곳에 마우스 위치할 때 글꼴 색상은 노랑, 밑줄 보이지 않게 설정 .. 더보기 목록과 문단 스타일 시트 목록과 문단 스타일 시트 목록(list) STYLE HTML 관련 태그 - 순서 없는 목록 , 순서지정 목록 태그에 대한 다양한 서식 지정 가능 주요속성 속성 기능 예 List-style :값 목록과 관련한 모든 설정을 할 수 있음 List-style :inside circle List-style-image : url(주소) 목록의 값을 이미지로 표시 List-style-image : url(allow.gif) List-style-position : 값 목록에서 다음 줄로 이동시 시작 위치 설정 List-style-position : inside List-style-type : 목록유형 목록에서 사용할 머리표 유형 설정 List-style-type : circle 당분에 의한 와인의 분류 dry wine.. 더보기 FONT 스타일 시트 FONT 스타일 시트 FONT STYLE >>> HTML 에서 태그와 태그를 이용하여 글꼴 크기와 색상을 지정하였으나 다양한 효과를 주지는 못함 속성 기능 예 FONT-FAMILY:글꼴명; 글꼴 종류 지정 FONT-FAMILY:돋움체; COLOR:색상명 혹은 색상값 모든 태그에서 글꼴 색상 지정 COLOR : RED; 혹은 COLORl#FF0000; FONT-SIZE:글꼴크기 글꼴크기 지정 FONT-SIZE:9pt; 혹은 FONT-SIZE:20px FONT-WEIGHT:굵기 지정 글꼴의 굵기를 지정 FONT-WEIGHT : BOLD, 혹은 FONT-WEIGHT:700; FONT-STYLE:ITALIC혹은NORMAL 글꼴 기울임 지정 FONT-STYLE:ITALIC 선택자 (selector) 종류와 css.. 더보기 이전 1 2 다음
