식초의 지식보관소

반응형 웹 디자인 -스마트폰, 태블릿, 스마트TV 등 브라우저 환경이 다양해짐 > 다양한 크기에 맞게 웹사이트 표시하는 방법 -화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현한다 ~장점 : 사이트 1개만 만들면 모든 기기에서 사용가능, 가로모드 가능, 사이트 유지 관리 편함 뷰포트 -뷰포트 = 스마트폰 화면에서 실제 내용이 표시되는 영역 -뷰포트 사용하면 접속한 기기 화면에 맞추어 확대, 축소해 표시하는 것이다 -pc화면과 모바일 화면의 픽셀 표현 방법이 다르다 -스마트폰 브라우저 : 웹키트 엔진을 기반으로 한다, 뷰포트 너비 980px 뷰포트 지정하기 ~가장 많이 사용하는 형태 content 속성 width : 뷰포트 너비 ~속성값: device-width | 크기 height : 뷰포..

연결 선택자 -선택자와 선택자를 연결해 적용 대상을 한정시킨다 하위 선택자(=자손 선택자) : 지정한 모든 하위 요소 -부모 요소에 포함된 하위 요소 모두에 스타일 적용 -자식, 손자까지 모두 적용 대상이 있으면 표시됨 -빈 칸 #container ul { } 자식 선택자 : 자식 요소만 -바로 아래 요소에만 스타일 적용 - > 부등호 #container > ul { } 인접 형제 선택자 : 가장 가까운 형제 요소 -먼저 나오는 것=형 요소, 나중에 나오는 것=동생 요소 -같은 레벨이면서 첫번째 요소에 스타일 적용 - + 더하기 h1 + ul { } 형제 선택자 : 형제 요소 -모든 형제 요소 - ~ 틸드 속성 선택자 -태그 안에 사용하는 속성들의 값에 따라 스타일 지정 -활용도 높다 [속성] 선택자 :..

웹에서 멀티미디어 사용하기 -과거 : 플러그인 프로그램= 특정 프로그램 설치 오디오 & 비디오 재생하기 태그 : 오디오 파일 삽입 ~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가 등록되지 않아 접근권한이 없어서 생..