목록전체 글 (163)
불로구
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/s5Rj9/btqEP3KT2th/R7DsS2qAkblRH8Z5H7bEXk/img.png)
셀렉터란? - HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능! 셀렉터의 유형 - 셀렉터에는 여러 가지 유형이 있다 태그의 이름이나, id, class 속성의 값을 셀렉터로 사용한다! - 여러 가지 셀렉터를 조합도 할 수 있다. style 안에 있는 h1, #list, .java, .python이 셀렉터이다! #은 id를 나타내며, .(점)은 class를 나타낸다 결과를 예측해 보세요! . . . . . . 예측했던 결과가 나왔나요? - 셀렉터를 이용해 h1의 글자색을 파란색, 글자 크기는 2em으로 주었다 - 우선 ol 태그에 id 값을 list로 주고 글자색을 빨강, 글자 크기는 1em으로 주었다 - ol 태그 안에 li 태그의 java, python을 class로 각각..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1kxHX/btqEOZpm1Gx/Fwt4WdYz8wXm4GiJ5iq7Ek/img.png)
CSS란? (Cascading Style Sheet)의 줄림말로써, HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다. CSS로 작성된 코드를 스타일 시트라고 부르며 색상, 배경, 텍스트, 폰트 등 여러가지 요소들의 옷을 입힐 수 있다. 8강에서는 기본적인 속성만 알아보도록 하겠습니다! CSS는 HTML의 head태그안에 style란 태그를 만들어 지정한다! body{background-color : blue} - body 즉, 몸체의 배경색을 background-color 를 이용해서 파란색으로 바꾼다! h1{color:green;} - h1의 의미는 다들 아시죠? h1태그로 만들어진 "안녕하세요"의 글자색을 초록색으로 변경한다! hr{border :3px solid..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cPbFJt/btqEQt3Cnag/t14pcTXkD9WuVvQLMIS23k/img.png)
시멘틱태그 - 의미가 있는 태그, HTML5 문서를 구조화하는데 사용 1) - 페이지나 섹션의 머리말을 표현 2) - 하이퍼링크등을 모아 놓은 특별한 섹션, 목차를 만들기 위해 주로 사용 3) - 문서의 장, 절을 구성하는 역할 4) - 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역 5) - 중요 부분을 벗어난 내용을 담음, 페이지의 오른쪽 or 왼쪽 6) - 꼬리말 위치나 모양은 브라우저가 자동으로 정하지 않으므로 CSS3를 이용하여 직접 구현하여야 한다. css3를 적용하면 이런 모양을 만들수 있습니다! - CSS3는 따로 포스팅하겠습니다 ^_^ 혹시나 궁금한 점은 댓글로 남겨주세요!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/euuJ8W/btqEPf6BCHw/4bLFiAW8I0jwaOrCZBnKx1/img.png)
비디오태그 - - 웹 페이지가 출력될 때 자동으로 비디오을 재생하고 제어할 수 있는 태그이다. controls = 제어버튼 ( 이것을 생략하면 브라우저 화면에는 아무것도 나타나지 않고 음악만 재생!) autoplay = 비디오 로딩 즉시 재생 loop : 반복 재생 width, height : 비디이가 재생될 브라우저 공간의 폭관 높이 지정 , 생략시 비디오의 원본 크기로 설정 muted : 오디오 끌때 사용 - HTML5에서 재생 가능한 비디오 타입 비디오 마임타입 MP4 video/mp4 WebM video/webm Ogg video/ogg 혹시나 궁금한 점은 댓글로 남겨주세요!