식초의 지식보관소

웹에서 멀티미디어 사용하기 -과거 : 플러그인 프로그램= 특정 프로그램 설치 오디오 & 비디오 재생하기 태그 : 오디오 파일 삽입 ~src : 오디오 파일 경로 ~autoplay : 자동 재생 ~controls : 컨트롤 막대, 재생/멈춤, 진행 바, 볼륨 ~loop : 반복 재생 ~muted : 소리 끄기 ~preload : 재생 전에 다운로드해서 준비 태그 : 비디오 파일 삽입 ~컨트롤 막대 없으면 오른쪽 버튼 > 컨트롤 표시 태그 : 여러 미디어 파일 한꺼번에 지정 ~브라우저 마다 지원하는 오디오, 비디오 코덱이 다르기 때문에 여러개 파일을 지정 ~src : 파일 경로 ~type : 미디어 파일의 유형 ~codecs : 비디오 코덱 이전 브라우저용 대체 텍스트 ~태그 지원 안하는 브라우저 위해 ~이..

시멘틱 태그란? -의미가 통하는 태그 -태그 이름만 봐도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있다 -종류 : 헤더, 콘텐츠, 사이드바, 푸터 -사이트 검색할 때 필요한 내용을 정확히 찾을 수 있다 (검색할 태그 부분을 알 수 있다) -어떤 장치에서든 문서를 똑같이 해석할 수 있다 태그 : 머릿말 지정 ~맨 위쪽이나 왼쪽 ~태그로 검색창, 태그로 메뉴 ~본문 중에 사용해 해당 부분의 머리말로 사용 가능 태그 : 문서를 연결하는 네비게이션 ~동일한 사이트 안의 문서, 다른 사이트의 문서로 연결하는 링크 모음 ~사용하는 위치 영향 없다 , , 에 포함 가능, 독립 사용 가능 ~여러 가 있을 경우 id를 따로 지정한다 태그 : 주제별로 콘텐츠 영역 ~콘텐츠 영역을 나타낸다 ~등 제목태그 함께 사용..

CSS 포지셔닝 ~검색창, 로그인창, 광고, 뉴스, 실시간 검색 순위 등을 적절히 배치 ~각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것= float속성, position속성 box-sizing 속성 : 박스 너비 기준 정하기 ~웹문서에 요소 배치하려면 각 요소의 너비를 계산해야 한다 ~콘텐츠 영역(width)값을 계산하기 어렵다면 border-box 지정해 박스모델 너비 계산 border-box: width값=콘텐츠+패딩+테두리 너비 .box1{ box-sizing: border-box; width:300px; height:150px; padding:30px; border: 2px solid red; margin:10px; } content-box: width값=콘텐츠 너비 .box2{ box-sizi..

박스 모델이란? 웹 문서의 내용을 박스 형태로 정의하는 방법. 마진, 패딩, 테두리 등 여러 겹의 박스가 있다. 블록 레벨(block-level)요소 -혼자 한 줄 차지하는 요소 -너비, 마진, 패딩을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. -종류: ,,,,,,,,,, 인라인 레벨(inline-level)요소 -콘텐츠 만큼만 영역을 차지, 나머지 공간에는 다른 요소 올 수 있다. -종류: ,,,,, ,,, 박스모델 - 구글>검사>element>computed width, height 속성 : 콘텐츠 영역의 크기 width - 콘텐츠의 너비 height - 콘텐츠의 높이 .box { width: 50%; height: 100px; } ~px, cm, %, auto 속성값 ~%는 부모요소..

글꼴 관련 스타일 : 글자의 모양새, 글꼴, 크기, 굵기 등 font-family 속성 : 글꼴 지정 p{ font-family : "맑은 고딕", 굴림, 돋움 } ~텍스트를 사용하는 요소에서 사용 - ,, 등 ~지정한 글꼴이 없을 경우 대비, 2번째, 3번째 글꼴까지 지정 ~두단어 이상으로 된 글꼴이름은 ""로 묶어준다 ~기본 글꼴, 스타일 속성을 이용해 다른 글꼴 정의 가능 @font-face 속성 : 웹 폰트 사용 ~웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 *구글 웹 폰트 사용 ~https://fonts.google.com 에 접속해서 글꼴 선택 > [Select this style] 클릭 > [Emb..

스타일 시트 : 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것 스타일 : 글꼴, 색상, 정렬, 배치방법 등 겉모습을 결정하는 내용 장점1 - 내용과 디자인이 구분되어 있기 때문에-> 웹 문서 내용과 상관 없이 디자인만 바꿀 수 있다. http://www.csszengarden.com/ CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in th..

폼 만들기 form이란? -사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소들을 폼이라고 한다 ex.로그인 폼, 회원가입 폼, 쇼핑몰 주문서 폼 -종류 : 사용자가 입력하는 부분/ 서버로 보내는 버튼 부분 form 태그 기본형 여러 폼 요소 form 태그의 속성 -method : 서버로 어떻게 넘겨 줄지 지정 ---"get" / "post" : 사용자가 입력한 내용이 드러나지 않는다 -name : 폼의 이름, 폼을 구분하기 위해 사용 -action : form을 처리해줄 서버 프로그램 -target : action에서 지정한 파일을 다른 위치에 열도록 지정 -autocomplete : 자동 완성 기능 label 태그 : 이름표 같은 텍스트 레이블 or 레이블 : id속성을 통해 서로 연결한다 labe..

혼자 작업하기 git init a : a라는 디렉토리를 만든다 cd a : a 디렉토리 안에서 A라는 사람이 혼자 작업한다 nano work.txt > 1이라는 내용을 적는다 git add work.txt : stage area로 올린다 git commit -m "work 1" : 버전을 생성한다 백업을 하기 위해 원격저장소를 만든다 깃허브 > 저장소를 만든다> 주소 복사 git remote add origin 주소 : 지역 저장소에 원격저장소를 origin이라는 별명으로 추가한다 git push -u origin master : 지역 저장소의 master와 원격 저장소의 master를 직접 페어링(연결) 시켜준다.+ 업로드 여기서 오류가 뜬다 찾아보니 유저의 SSH가 등록되지 않아 접근권한이 없어서 생..

block 태그 -한줄 다 사용 제목 단락 : 내용 한줄로 표시 줄바꿈 수평줄 인용문 : 안으로 들여써짐 : 입력한 그대로 화면에 표시 : 묶기 : 의미x, 줄바꿈. 블록단위 inline 태그 굵게 의미적 강조 단순 굵게 중요 내용 이텔릭체 단순 이텔릭체 인용 : 따옴표 자동, 줄바꿈 없이. 다른 내용과 함께 -cite 속성 형광펜 묶기 : 의미x, 줄바꿈 없이. 다른 내용과 함께 -style 속성 밑줄 목록 태그 (부모)순서x 목록 (부모)순서o 목록 -type 속성 ~"1", "a", "A", "i", "I" 속성값 -start 속성 : 중간 번호 부터 시작 가능 -reversed 속성 : 역순 표시 (자식) 목록 (부모)설명 목록 : 단어/정의, 질문/답 (자식)제목 (자식)설명 HTML 주석, 사..

local repository : 지역 저장소 remote repository : 원격 저장소 push : (local ->remote) 정보를 업로드한다. 백업을 한다. clone : (remote ->회사local) 같은 상태가 된다. pull : (remote ->집local) 다운로드 GitHub : 유명 GitLab : 가격적으로 장점 원격 저장소와 연결 git remote add origin 주소.git : 원격 저장소를 추가한다(깃허브 HTTPS주소), add 뒤에 별명도 추가한다 git remote : 원격 저장소 저장된 것이 나온다 git remote -v : 원격 저장소 주소 나온다 git push git : git에 대한 설명이 나온다 git push : 업로드가 시작된다 >에러뜨면(..