가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요소에만 적용) : first-letter = 블록 요소의 첫 번째 줄의 첫 번째 문자 선택 : first-of-type = 형제 관계에 있는 요소 중 첫 번째 요소에 적용 : last = 마지막 요소 : last-child = 부모 요소의 마지막..
HTML, CSS
일치 선택자(Basic Combinator) html 적용O 적용X css li.green { color : green; } A와 B를 동시에 만족하는 요소를 선택 자식 선택자(Child Combinator) html 적용X 적용O css div > .green { color : green; } A의 자식 요소 B를 선택 자식은 부모 바로 밑에 있는 요소 ‘>'는 자식 선택자의 기호 후손(하위) 선택자(Descendant Combinator) html 적용O 적용O css div .green { color : green; } A의 후손 요소 B를 선택 후손은 부모 하위에 있는 모든 요소 ‘띄어쓰기'는 후손 선택자의 기호 일반형제 선택자(General Sibling Combinator) html 적용X 적..
css 선택자(Selector) 란 ? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. 태그 선택자(Tag Selector) /* 사용법 */ tag명{속성 : 속성값;} tag명1, tag명2{속성 : 속성값;}..
CSS를 적용하는 3가지 방법 인라인 스타일(Inline Style) 내부 스타일 시트(Internal Style Sheet) 외부 스타일 시트(External Style Sheet) 웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다. ※ 우선순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 인라인 스타일(Inline Style) 인라인 스타일(Inline Style) 인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유지보수에 어려움을 겪고 HTML문서의 크기가 커져 웹 로딩속도를..
iframe 태그란? iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다. 예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다. ifram 태그 사용법 사용 중인 브라우저는 iframe을 지원하지 않습니다..
mark태그(하이라이터 효과) 강조할 텍스트 강조할 텍스트를 위와 같이 태그로 감싸주면 하이라이터 표시가 됩니다. 색상과 mark태그의 배경색을 바꾸고 싶다면 background-color, 글자색을 바꾸고 싶다면 color로 바꾸시면 됩니다. CSS가 아니라 아래처럼 mark 태그에 직접 style을 주셔도 똑같이 동작합니다.
track 태그 사용법 kind 속성 (자막 종류) 속성 값 설명 subtitles 자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다. captions 캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용하며 비디오 화면에 됩니다. descriptions 비디오 콘텐츠에 대한 설명을 의미하며 비디오 화면에는 표시되지 않습니다. chapters 비디오 탐색을 위한 제목을 의미하며 비디오 화면에는 표시되지 않습니다. metadata 비디오 콘텐츠 정보입니다. 비디오 화면에는 표시되지 않습니다. 다른 속성들 src : 자막의 경로를 지정해주는 속성입니다. srclang : 사용할 언어를 지정..
video 태그 사용법 HTML5에서 웹 문서에 영상을 첨부하고 싶다면 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다. controls 속성을 사용하지 않으면 비디오를 재생시키거나 일시 정지할 수 없기 때문에 매우 불편합니다. video 태그에서 사용할 수 있는 속성 속성 설명 controls 영상 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있습니다. width, height 화면에 표시되는 영상의 크기를 조절합니다. autoplay 영상을 자동 재생합니다. loop 영상을 반복해서 재생..
