분류 전체보기
-
CSS 선택자(Selector), DIV, SPAN 태그Front-end/CSS 2019. 12. 19. 22:53
191219 수업 내용 정리 CSS 선택자 1. 전체 선택자(Universal Selector) * : 모든 태그(요소)에 영향을 미침, 형식) *{속성:값;~} 2. 태그 선택자(Type Selector) : 와 같은 모든 태그의 스타일을 조정, 형식) tag {속성:값;~} 3. 클래스 선택자(Class Selector) .class : .class 와 같은 값을 가진 모든 클래스에 영향을 줌, 형식) (tag).class {속성:값;~} 4. id 선택자(ID Selector) #id : 해당 id 값을 가진 태그에 스타일 적용, id는 전체 문서에서 하나의 값만을 가질 수 있음 형식) 태그명#선택자{속성:값;~} // id는 유일하기 때문에 태그명을 생략해도 스타일 적용 가능 div, span 태..
-
CSS(Cascading Style Sheets) 개요Front-end/CSS 2019. 12. 18. 23:54
191218 수업 내용 정리 CSS란? - Cascading Style Sheets의 약자로, HTML의 제약을 뛰어넘어, 문서를 보다 효율적이고 아름답게 꾸밀 수 있도록 도와주는 언어 CSS사용 방식 1. 인라인 방식(in-line style) : 해당 태그에 직접 쓰는 방식, style="속성명:값;속성명2:값2~" 동일한 태그에 스타일이 적용될 경우 -> 우선순위가 높음 (일반적으로는 동일한 태그에 서로 다른 스타일이 적용되면 마지막 것이 적용됨) 2. 임베디드 방식(embedded style) : 웹문서에서 공통으로 사용하는 색깔, 이미지, 글꼴 등을 영역에 선언해서 사용하는 방식 형식) 스타일 적용시킬 태그(또는 선택자, 동시에 여러 개 적용 가능) {속성명:값;~} 3. 링크 방식(link s..
-
HTML - Video, Audio 태그 정리Front-end/HTML 2019. 12. 18. 23:36
191218 수업 내용 정리 - 동영상 삽입 태그 ▷속성 width, height : 영상 넓이, 높이 지정 controls : 동영상화면에 컨트롤 막대 추가 autoplay : 동영상을 자동으로 재생 -> 모바일, 크롬에서 잘 적용 X (IE는 사용가능) poster : 동영상이 화면에 나오지 않을 때 대신 표시할 이미지 지정 : 동영상파일 경로 지정, 안에서 사용, 빈 태그 ▷속성 : src="동영상 경로" type="video/확장자" ※ 대신 안에 바로 src 속성으로 연결해도 됨 - 음악 삽입 태그 : poster를 제외하고는 video태그와 속성 및 활용이 거의 유사함 ※ video, audio 태그는 브라우저마다 다른 부분이 있기 때문에 꼭 확인하는 것이 필요합니다.
-
HTML - Form, Input 태그 정리Front-end/HTML 2019. 12. 18. 23:24
191218 수업 내용 정리 - 외부에서 값을 입력 받아 전송할 때 사용(->DB) ▷속성 - method : 데이터 전송 방식 지정 1) get : 데이터가 url창에 노출되면서 전송 ex) 사이트 접속, 검색어 입력 2) post : 전달되는 값이 url창에 노출되지 않음, 보안이 get방식보다 좋음 ex) 회원가입, 로그인, 파일 첨부된 메일 => 주로 post방식을 사용함, default = get - action : 누구에게 값을 전달해줄 것인가에 대한 속성 ※ - name : 할당된 이름으로 각각의 입력받은 값을 구분 => '변수'로 사용 - 특정 타입의 박스를 추가해주는 태그, form태그 안에 쓰임, 빈 태그 ▷속성 type = "text" : 텍스트를 입력할 수 있는 박스 "passwor..
-
HTML - Table 태그 정리Front-end/HTML 2019. 12. 18. 22:54
191218 수업 내용 정리 태그 : 표를 만들 때 사용함 ▷ 속성 : border: 테두리 선의 굵기, 픽셀 수로 지정 width, height : pixel/%(모니터의 n%로 분할됨)로 지정, cellspacing : 셀(cell)간 거리 (default = "0") cellpadding : 셀 - 입력된 문자 사이의 거리 (default = "0") ▷ 화면에서 표 정렬하는 법: 태그로 태그 전체를 묶어주기 : 행(가로줄)을 만들 때 사용 : 열(세로줄)을 만들 때 사용 : table heading, 표의 제목을 둘 때 사용, 문자가 가운데 정렬되며 진하게 표시됨 ▷ 속성 align : "left", "center", "right" 수평 정렬 valign : "top", "middle", "bot..
-
HTML 기본 태그 정리Front-end/HTML 2019. 12. 18. 00:11
191217 수업 내용 정리 기본 태그 : html문서임을 선언하는 태그 : html문서의 시작과 끝을 알리는 태그 - html의 거의 모든 태그는 여는 태그와 함께 닫는 태그를 동반함 - ex) .... - 위와 같이 닫는 태그 없이 독립적으로 사용되는 태그들은 '빈 태그'라고 함 : 현재문서의 타이틀(탭에 표시되는 문자열), 캐릭터셋 등이 포함됨 에 들어가는 내용은 페이지에 출력되지 않음 : 안에서 여러가지 값들을 설정하기 위해 사용되며 빈 태그임 ▷속성 - 1. charset : 문자의 인코딩을 지정함, "UTF-8"로 지정해줘야 한글이 깨지지 않음 2. http-equiv : refresh로 지정하면 새로고침하도록 할 수 있음 3. content : "시간(초 단위);url=이동할 페이지/사이트 ..