본문 바로가기

Frontend

 (37)
[HTML] 미디어 삽입 (비디오, 오디오) 비디오 삽입 이 태그를 지원하지 않는 브라우저가 출력하는 메세지 - width, height : 비디오가 재생될 브라우저 공간의 높이와 폭 지정. 생략되면 비디오 원본 크기로 지정 - controls : 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력 - autoplay : 이 속성이 설정되면 비디오 로딩 즉시 재생 - loop : 이 속성이 설정되면 반복 재생 - muted : 오디오를 끌 때 사용 * HTML5에서 재생 가능한 비디오 타입 video/mp4, video/webm, video/ogg 브라우저가 video 태그를 지원하지 않습니다. 비디오 소스는 태그를 이용하여 별도로 지정할 수도 있다. 브라우저가 video 태그를 지원하지 않습니다. 비디오 소스는 태그를 이용하..
[CSS] 박스 모델 구성 속성 - padding, border, margin CSS의 박스 모델 각 HTML 태그 요소를 하나의 박스로 다룬다. 예) DIVDIVDIV → div 영역의 박스 구성이 보이지 않지만, 사실 박스로 구성되어 있음 박스 모델을 구성하는 프로퍼티 박스 모델의 색, 테두리, 단축프로퍼티 border : 3px dotted blue; * 테두리 종류 둥근 모서리 테두리 만들기 : border-radius 배경 다루기 background-color background-image background-position background-position : center center; /* 박스 중간에 이미지 출력 */ background-repeat background-repeat : repeat-y; /* 위에서 아래로 이미지 반복 출력 */
[CSS] 텍스트 꾸미기 속성, 폰트 제어 속성 텍스트 꾸미기 속성 들여쓰기 (text-indent) text-indent : | ; 정렬 (text-align) text-align : left | right | center | justify; 텍스트 꾸미기 (text-decoration) text-decoration : none | underline | overline | line-through; ex) text-decoration 프로퍼티로 하이퍼링크에 밑줄 제거 네이버 ex) 3글자 들여쓰기 text-indent : 3em; 폰트 제어 속성 폰트 종류 (font-family) font-family : Arial, "Times New Roman", Serif; 폰트 이름에 공백이 낀 경우 " "로 묶어야 함 Arial 폰트가 없는 경우 "Times..
[CSS] 선택자(selector) 정리 선택자란? 어떤 요소에 스타일을 정의할 것인지에 대한 정보 기본 선택자 1. 전체 선택자 : 모든 요소 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다. * { color:blue; } → 문서 내 모든 요소의 글자 색을 파란색으로 정한다! 2. 태그 선택자 (유형 선택자) : 주어진 이름을 가진 요소를 선택한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다. p { color:blue; } → 문서 내 모든 p태그 요소의 글자 색을 파란색으로 정한다! 3. 클래스 선택자 : 주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다. .text { color:blue; } → 문서..
[HTML] 자주 쓰이는 태그 정리 텍스트 태그 - 문단 - 제목 , , ... , - 숫자 1일 때 가장 크고 6일 때 가장 작다. - 수평선 - 줄바꿈 텍스트 꾸미기 진하게 중요한 강조 이탤릭으로 강조 진하게 이탤릭으로 강조 삭제 추가 보통문자의 윗첨자 보통문자의 아래첨자 하이라이팅 태그의 구분 - 블록 레벨 요소: 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성한다. - , , , ... - 인라인 요소: 자기가 필요한 만큼의 공간만 차지한다. - , , , ... 이미지 표시하기 - 단일 태그 - alt는 alternative의 약자로 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다. alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 ..

티스토리툴바