본문 바로가기

분류 전체보기

 (216)
CSS3 - 전체 선택자 HTML 문서 안에 있는 모든 태그를 선택할 때는 전체 선택자를 사용합니다. 선택자 형태 설명 * HTML 페이지 내부의 모든 태그를 선택합니다. 전체 선택자로 작성후 코드를 실행하면 아래 예시1의 결과를 알 수 있습니다. 일반적으로 전체 선택자를 사용하면 body 태그 내부에 있는 요소에만 스타일 속성이 적용되는 것처럼 보이지만 전체 선택자를 사용하면 html 태그를 포함해 head 태그, title 태그, style 태그까지 선택이 됩니다. 아래 예시2는 jQuery를 사용해 전체 선택자로 선택된 모든 태그에 스타일을 적용하는 코드입니다. html 태그도 전체 선택자의 적용 대상에 포함된다는 것을 꼭 기억해주세요.
CSS3 - 선택자 종류 개요 선택자 종류 선택자 형태 선택자 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 후손 선택자 선택자 선택자 header h1 자손 선택자 선택자 > 선택자 header > h1 속성 선택자 선택자[속성=값] input[type=text] 선택자[속성~=값] div[data-role~=row] 선택자[속성|=값] div[data-role|=row] 선택자[속성^=값] div[data-role^=row] 선택자[속성$=값] div[data-role$=row] 선택자[속성*=값] div[data-role*=row] 동위 선택자 선택자 + 선택자 h1 + div 선택자 ~ 선택자 h1 ~ div 구조 선택자 선택자:first-child li:..
CSS3 - CSS 선택자란? CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다. 선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있습니다. 스타일의 기본적인 모양은 아래와 같습니다. h1 { color: red; } 위는 선택자를 사용해 h1 태그를 선택하고 color 속성에 red 키워드를 적용한 예입니다. 이러한 코드를 CSS 블록이라고 부르고 이것을 style 태그 내부에 입력해 사용합니다. 이때 style 태그 내부에 입력되는 코드를 스타일시트라고 합니다. 위의 예시는 "h1 태그의 color 속성에 red 키워드를 적용하고 background-color 속성에 orange 키워드를 적용한 예시입니다. 또한 CSS3 선택자는 디자인할 때뿐만 아니라..
2019년 11월 12일 스터디 기록 이미지 태그 : https://miyakita.tistory.com/8 HTML5 - 이미지 태그 이미지를 생성할 때는 아래의 img 태그를 사용합니다. img 태그에는 여러가지 속성이 있지만 그중 가장 중요한 속성은 아래 표와 같습니다. 속성 이름 설명 src 이미지 경로 지정 alt 이.. miyakita.tistory.com 오디오 태그 : https://miyakita.tistory.com/9 HTML5 - 오디오 태그 오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그입니다. 이 기능은 HTML5에서 추가된 기능이므로 인터넷 익스프롤러 8 이하에서는 사용할 수 없습니다. 또한 i.. miyakita.tistory.com 비디오 태그 : https..
HTML5 - 공간 분할 태그 과거의 웹 페이즈는 공간 분할을 하지 않았습니다. 하지만 연대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 분할합니다. 가장 대표적인 공간 분할 태그는 div 태그이며, 공간 분할이 되어야 레이아웃을 구상 할 수 있기 때문입니다. div 태그 & span 태그 태그 이름 설명 div block 형식으로 공간을 분할합니다. span inline 형식으로 공간을 분할합니다. div 태그는 block 형식으로 차곡차곡 쌓아 올려지는 형식을 말합니다. 아래 예시1을 보면 알 수 있습니다. 반면 span 태그는 inline 형식으로 공간을 분할합니다. 예시2를 보면 알 수 있습니다. 스타일시트에서 중요한 부분을 차지하니 div 태그와 span 태그의 차이를 알고 block 형식과 inline 형식의 차이를..
HTML5 - 입력 양식 태그 입력 양식은 사용자에게 입력받는 공간을 의미합니다. 입력 양식 태그는 입력 양식을 만들 때 사용하는 태그입니다. 회원들의 정보를 입력 할 때 또는 웹 페이지에 가입을 할 때의 양식이 대표적입니다. 입력 양식 개요 입력 양식은 form 태그를 사용해 생성합니다. 추가로 입력 양식 안에 input 태그를 입력하면 예시1과 같은 양식이 만들어 집니다. 예시1 입력 양식에 데이터를 입력하고 전송을 위해서는 form 태그에 아래 표의 속성을 넣어야 합니다. 속성 이름 설명 action 입력 데이터의 전달 위치를 지정합니다. method 입력 데이터의 전닥 방식을 선택합니다. method 속성에는 get 방식과 post 방식이 있습니다. 가령 input 입력란에 rint를 입력을 하였을 때 get 방식으로 전송을 ..
HTML5 - 비디오 태그 Video 태그 윈도우에 기본으로 내장 되어 있는 동영상 파일은 WMV 형식인데 웹 브라우저는 WMV 형식을 지원하지 않습니다. 따라서 MP4(H.264+ACC) 형식과 WebM(VP80+Vorbis) 형식을 사용합니다. video 태그를 생성할 때는 아래의 표의 속성을 사용합니다. 속성 이름 설명 src 비디오 파일 경로 지정 poster 비디오 준비 중일 때의 이미지 파일 경로 지정 preload 비디오를 재생하기 전에 모두 불러올지 지정 autoplay 비디오를 자동 재생할지 지정 loop 비디오를 반복할지 지정 controls 비디오 재생 도구를 출력할지 지정 width 비디오 너비 지정 height 비디오 높이 지정 video 태그도 audio 태그 처럼 웹 브라우저마다 지원하는 비디오 형식이 ..
HTML5 - 오디오 태그 오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그입니다. 이 기능은 HTML5에서 추가된 기능이므로 인터넷 익스프롤러 8 이하에서는 사용할 수 없습니다. 또한 img 태그와 사용방법이 비슷해서 사용이 간편합니다. audio 태그 audio 태그의 기본 형태는 아래와 같습니다. audio 태그도 img 태그 처럼 다양한 속성을 가지고 있지만 이중에서도 audio 태그와 관련된 중요한 속성은 아래 표에 적혀 있습니다. 속성 이름 설명 src 음악 파일의 경로 지정 preload 음악을 재생하기 전에 모두 불러올지 지정 autoplay 음악을 자동 재생할지 지정 loop 음악을 반복할지 지정 controls 음악 재생 도구를 출력할지 지정 예시1 위의 속성을..

티스토리툴바