식초의 지식보관소

플렉스 박스 레이아웃 이란? -그리드 레이아웃을 기본으로 한다 -플렉스 박스를 원하는 위치에 배치한다 (미디어 쿼리보다 쉬움) -여유 공간에 따라 너비, 높이, 위치 자유롭게 변형 가능하다 1. 플렉스 컨테이너 : 웹요소 전부 묶어준다. 2. 플렉스 항목 : 담기는 웹 요소, 1~6 모두 3. 주축 : 배치하는 기본 방향, 왼>오, 시작점 | 끝점 4. 교차축 : 주축과 교차되는 방향, 위>아래, 시작점 | 끝점 display 속성 : 플렉스 컨테이너 지정 ~묶어주려는 요소들의 부모 요소를 > 플렉스 컨테이너로 만듦 ~display 속성을 이용해 플렉스 박스 형태를 지정한다 ~flex 속성값 : 박스 레벨 요소 ~inline-flex 속성값 : 인라인 레벨 요소 {display : flex; } disp..

미디어 쿼리란? -사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다 -접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다 미디어 쿼리 구문 @media |not |only| screen |and (min-width: 200px)| { } 연산자 and : 조건을 추가한다 only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not : 다음에 나오는 미디어 유형 제외 , : 동일한 스타일 유형을 사용할 때 쉼표 사용 미디어 유형 all : 모든 미디어 print : 인쇄 장치 screen : 컴퓨터, 스마트폰 tv aural : 화면을 읽어 소리로 출력 braille : 점자 tty embossed 미디어 쿼리 조건 1. 웹 문서의 가로 너비, 세로 높..

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

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

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

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

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

마크업 - tag를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것이다 웹표준 - 웹사이트를 만들 때 지켜야 하는 약속들을 정리한 것/ 웹표준으로 문서 만들면 어느 기기에서나 볼 수 있다 네이티브 앱 - ios, 안드로이드 같은 운영체제별 모바일 앱 웹 앱 - HTML의 API 이용해서 모바일 운영체제와 상관 없이 실행하는 앱 태그 - 마크업을 할 때 사용, 약속된 표기법 태그, 속성, 속성값 ! + tab키 = HTML 기본 구조 자동 tab키 = 들여쓰기 한다 = 한국어로 표시된다 : 웹 브라우저가 알아야 할 정보들 입력한다 : 웹 브라우저에는 보이지 않음, 웹 문서와 관련된 정보 지정 검색엔진에서 사이트를 검색할 때 참조하는 정보 : 해당 문서의 키워드 :..

현업 개발자 엘리의 팁 뭐든지 나누어 보자. 프론트/백엔드 모두 박스화 생각하면서 만들자, 클레스, 함수를 만들 때도 세분화와 박스화를 할 수 있을지 생각하자. 큰 그림을 먼저 보자. 박스 태그/ 아이템 태그 -- 태그는 둘 중 하나 box - 섹션이 나눠지는 태그들 - 아무곳에서나 쓰일 수 있는 태그 - 반복된 재사용 가능한 형식이 묶여져 있는 태그 -문단을 정의하는 태그 구성할 때 섹션 태그를 이용해서 나누어준다 -- div로 무작위로 나누지 않는다. block - 한줄에 하나. - bolck 태그이다. inline - 공간이 허용하면 바로 옆에 배치 가능. - inline 태그이다. 부르는 이름 정리 element=node라고도 불린다. 태그 한쌍+ 내용이 element가 된다. attribute ..

JS Bin - 설치하지 않아도 동작하는 것을 볼 수 있는 사이트 -관습적으로 적는 것 - 가장 상위에 적음 - 구글에서 검색할 때 나오는 타이틀, 부가 설명/ 북마크 추가 할 때 나오는 제목이나 아이콘들/ CSS 파일을 연결하기도함/ 메타 데이터만 있다 - 사용자에게 보여진다. W3C라는 곳에서 만든 태그가 모든 브라우저에서 같은 기능으로 쓰인다. HTML은 브라우저에서 사용 가능한 가장 기본적인 파일이다. HTML에는 태그 크게 2가지가 있다. 에는 상세설명이 들어있고 에는 사용자에게 보여지는 태그들로 이루어져 있다. MDN 업데이트도 빠르다. 전세계인이 사용하는 페이지. --HTML element page --브라우저 호환 가능성 확인(중요) :모든 태그에서 지원되는지 잘못된 코드를 쓰면 ? - 브..