본문 바로가기

전체 글

[HTML/CSS 기초 강의] ⑳ 이미지 정렬3(#div) 이미지 정렬3(#div)하는 방법에 대해 알아보려고 한다. 1. 태그 이미지 수직 정렬은 CSS의 vertical-align 속성 이용, 수평 정렬은 CSS의 float 속성 이용 수평 방향으로 가운데 정렬 불가능-이미지는 텍스트와 같은 inline 요소이기 때문 ​그러면 이미지를 가운데 정렬할 수 있는 방법은 없을까? ​ 이미지를 가운데 정렬하기 위해서는 먼저 이미지를 블록 레벨 요소처럼 만들어야 함 정렬하려는 이미지가 있는 줄에는 다른 텍스트 없이 이미지만 있어야 한다는 뜻 이때! 사용할 수 있는 것이 태그 ​ 태그는 HTML 요소들을 블록 레벨 요소로 묶는 역할함 인라인 요소인 이미지를 태그로 감싸고, text-align 속성을 쓰면 이미지를 왼쪽/오른쪽/가운데 정렬할 수 있음 text-align .. 더보기
[HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) 이미지 정렬1(#align)하는 방법을 알아보려고 한다. 1.align 속성 align 속성-이미지를 나타내는 태그는 인라인 요소임 그래서 이미지 앞뒤로 줄 바꿈이 되지 않고 주변 텍스트에 이어져서 같은 줄에 보임 결국 이미지는 주변 텍스트 기준으로 정렬 됨 예) {이미지정렬+이미지+이미지정렬} 순서로 코드 짜려고 함 2.수직 방향(vertical align) ​수직 방향(vertical align)은 위(top) ,아래(bottom), 중간(middle) 가능 디폴트는 아래 이고 수평 방향 순서는 코드 순서대로 이미지정렬(글) 다음에 이미지가 나오고, 이미지 다음에 이미지정렬(글)이어짐 3.수평 방향(horizontal align) 수평 정렬과 수직 정렬의 차이점 - 제한 사항이 있음 예) {이미지정렬.. 더보기
[디지털] 온라인 강의제작방법 (#오캠#줌잇#온라인강의) 온라인 강의제작방법을 알아보려고 한다. 요즘 코로나 거리두기로 인해 온라인 동영상 강의를 많이 듣는 상황에서 유투버, 강사, 교수님 등이 아래 #오캠#줌잇#곰캠#반디캠 등 프로그램을 활용하여 ppt 나 컴퓨터 화면을 보여주면서 효율적으로 강의 함 [ 오캠 프로그램 ] 장점: 무료, 핵심 기능, 사용하기 편리 1) 오캠 다운로드 방법 검색(오캠)/오소프트/오캠 무료 다운로드 클릭/ 2) 오캠 실행 방법 화면 녹화 ,게임 녹화, 소리 녹음 강의를 할 때는 화면 녹화 또는 소리 녹음 주로 사용 크기 조절에서 내가 원하는 크기를 조절-초록 가이드선 드래그해서 조절-내가 원하는 부분만 녹화 가능 예) 블로그를 바탕으로 한 번 녹화 3) 소리 목소리까지 같이 들어가 있음 -목소리가 추출되지 않으면 소리 마이크 아이.. 더보기
[HTML/CSS 기초 강의] ⑲ 이미지 정렬2(#vertical-ailgn#float) 이미지 정렬2(#vertical-ailgn#float)하는 방법을 알아보려고 한다. CSS를 이용하여 이미지 수직/수평 정렬 방법 이미지의 align은 수직과 수평을 통틀어서 하나의 속성명 'align'을 사용 CSS에서는 수직 정렬과 수평 정렬할 때 사용하는 속성명이 다름 ​ 1. 수직 정렬 속성명: vertical-align vertical-align의 속성 값- top위쪽 맞춤/middle중간 맞춤/bottom아래쪽 맞춤 vertical-align의 디폴트 값-baseline 아래쪽 맞춤과 비슷 2. 수평 정렬 속성명: float float의 의미: '떠다니다'라는 뜻-텍스트 사이에서 이미지를 왼쪽이나 오른쪽으로 보냄 속성 값은 left/right/ 가운데 정렬 없음 3. 이미지 수직 정렬 연습 메.. 더보기
[HTML/CSS 기초 강의] ㉑ 이미지 가운데 정렬 방법들 이미지 가운데 정렬 방법을 알아보려고 한다. 이미지 가운데 정렬 방법 1. 태그 사용 태그 앞뒤에 , 태그 사용 후 text-align 속성값을 center로 주면 div 안의 인라인 요소 이미지가 가운데 정렬됨 태그 안에 div 선택자도 가능 2. display, margin 사용 display 속성을 사용하여 속성값을 block으로 정하면 이미지를 블록 레벨 요소로 바꿀 수 있음 그 후에 margin을 auto로 주면 이미지가 가운데 정렬 margin:요소를 감싸고 있는 여백 /auto 값: 좌우 여백을 똑같이 주는 것으로 정해져 있음 3. 태그 사용 태그는 블록레벨 요소로, 그 안의 인라인 요소를 가운데 정렬하는 기능 있음 HTML5에서는 지원하지 않는 태그-사용하지 않는 것이 좋음 , 태그는 블록.. 더보기
[시 사] 아프가니스탄의 비극(#아프카니스탄#탈레반) 아프가니스탄의 비극 1. 아프가니스탄과 미국 국제뉴스는 온통 “탈레반”이 아프가니스탄을 장악한 것에 관한 내용이다. 이 이야기는 모두가 잘 아는 2001년 9.11 테러 이전까지 거슬러 올라간다. 9.11 테러가 터지자 미국은 탈레반에 테러의 배후인 알카에다의 수장인 오사마 빈 라덴을 넘기라는 요구를 하였지만, 탈레반은 미국의 요구를 이행하지 않았고, 그래서 미국은 아프가니스탄을 침공했다. 그리고 10년동안의 수색과 작전 끝에 2011년 빈 라덴을 사살하는 데 성공한다. 미국의 주요 도시인 뉴욕을 공격하여 많은 사람을 희생시켰던 빈 라덴을 사살 시키며 미군도 더 이상 아프간에 주둔할 명분이 없어 졌다. 2014년 오바마 정부는 미군을 아프가니스탄에서 철군시키려 시도했다. 희생의 계속된 반복과 급속하게 불.. 더보기
[프리미어 기초] ④ 타이핑 자막효과(#타이핑#프리미어자막) 타이핑 자막효과를 적용해보려고 한다. (#타이핑#프리미어 자막) - 프리미어 프로에서 타이핑 효과- 1. 시퀀스에 자막 준비 1) 프리미어에 아무것도 없는 시퀀스 만들기/파일/새로 만들기/시퀀스 만들기 2) 전체 텍스트 입력/ 3) 폰트, 폰트 사이즈, 모양에서 색지 정/ 그리고 이제 타이핑하는 것 같아 보이려면 중앙 정렬이 아니라 이렇게 맨 앞 정렬 4) 프로젝트 화면에서도 중앙에 올 수 있게 타임 옆 무브 툴로 위치 옮기기 2. 이펙트 컨트롤 소스 텍스트 1) 스톱워치 클릭(청색으로 바뀜)- 내가 입력한 텍스트 안 스톱워치를 클릭해야 적용됨(중요!!) 2)) 텍스트 없애기(더블클릭/딜리트) 3. 이펙트 컨트롤 소스 텍스트 준비 1) 이펙트 컨트롤 창 클릭 2) 앞으로 화살표(-->) 2번 3) 프로그.. 더보기
[프리미어 기초] ③ 무료오디오 가져오기 (#사운드클라우드#스튜디오) 무료 오디오 가져오는 방법을 알아보려고 한다. (#사운드클라우드#스튜디오) 1. 무료오디오 가져오기 studio 1) 유투브 오디오 라이브러리 주소로 접속한 후(https://www.youtube.com/audiolibrary)에 접속한 후/ 필터를 클릭/ 목록이 나타나면 "분위기"를 선택한 후 밝음에 체크 /적용 클릭 2) 같은 방법으로 이번에는 "장르"를 선택해 필터를 추가/ 원하는 장르 체크 후 적용 클릭 3) "장르" 와 "분위기"에 각각 선택한 필터가 적용/ 마음에 드는 음악을 찾아서 미리 듣거나 다운로드 2. 무료오디오 가져오기 sound cloud https://soundcloud.com/ Stream and listen to music online for free with SoundClou.. 더보기

티스토리툴바