본문 바로가기
반응형

IT944

CSS3 - CSS 단위와 url, display, visibility, opacity 속성 단위 em, px, % em은 배수, px는 픽셀, %는 100%를 기준으로 설정 font-size 를 통해 변경한다. (간단한 것이라 예제는 생략) url() 배경화면 설정하기 url 속성은 일반적으로 background-img 속성 값으로 많이 사용된다. 배경 이미지의 경로를 나타낸다. Nye 우진아빠 backgroud-imge:url(' ... '); 로 배경 이미지 지정 backgroud-repeat:no-repeat; 로 이미지 반복 해제 // 선언하지 않을 경우 아래 사진과 같이 height 만큼 이미지가 반복적으로 나온다 backgound-size: contain; 으로 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다. backgound-* 에 대한 내용은 나중에 더 .. IT/Web 2019. 7. 10.
CSS3 - CSS 문자, 링크, 부정 선택자 문자 선택자 특정 문자 또는 문자열을 선택하여 CSS 속성을 설정할 수 있다 selection 속성은 마우스 드래그 선택이다 설립개요 우진아빠의 블로그 2019 07월 9일 HTML5 2019 07월 10일 CSS3 #history2:first-letter, #history1:first-letter { ... }는 id history2, history 1의 첫 번째 문자를 선택(em은 배수) #history2:first-line, #history1:first-line { ... }는 id history2, history 1의 첫 번째 주를 선택 #content p::selection { ... } 는 id content 의 모든 p 태그에서 selection 즉 마우스 드래그 처리되면 선택 링크 선택자 .. IT/Web 2019. 7. 10.
CSS3 - CSS 반응 hover, 상태, 구조 선택자 반응 선택자 - hover 반응에 따른 속성을 변경 시키는 것 마우스의 반응에 따른 속성을 설정할 수 있다. :hover 를 적용하면 마우스가 올린 반응에 따라 선택되어 진다. menu1 menu2 menu3 menu4 menu5 ul > li { ... } 는 자손 선택자 ul 태그 바로 밑에 있는 li 태그들을 모두 선택한다 li:hover { ... } 는 hover를 주어 마우스가 해당 태그 위로 올라갔을 때를 선택한다 상태 선택자 상태에 따른 속성을 변경하는 것. 폼 태그에서 focus가 맞춰진다던가 type="text" 인 것이 enabled 또는 disabled 처리 되었다던가 할 때 발생 이름 : 아이디 : 비밀번호 : input:focus { ... } 는 input 태그에 커서가 깜박임.. IT/Web 2019. 7. 9.
CSS3 - CSS id(#) class(.) /속성/후손/자손/동위 선택 id(#) 와 class(.) id 지정은 # 으로 class 지정은 . 으로 한다. 예제) HEADER CONTENT menu1 menu2 menu3 menu4 menu5 BANNER FOOTER 태그 안에 있는 태그 선택 말이 거창하지만 그냥 태그 안에 있는 태그를 선택하는 방법이다 HEADER CONTENT menu1 menu2 menu3 menu4 menu5 menu1 menu2 menu3 menu4 menu5 BANNER FOOTER 태그안에 ul li.menu {...} 를 통해 안에 있는 태그 모두가 선택된다 속성 태그 선택 속성 선택자는 [ ] 대괄호로 선택한다 이름 : 아이디 : 비밀번호 : 전화번호 : 자손 · 후손 선택자 자손은 아버지 바로 밑에 자식을 뜻한다. 후손은 아버지 바로 밑.. IT/Web 2019. 7. 9.
CSS3 - CSS 기본, 선택자 CSS style 시트를 활용하여 html5 본문에 작성된 태그들의 스타일 즉 속성들을 변경하는 역할을 합니다. 선택자 특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용된다. 제목 입니다. 본문 입니다. 제목 입니다. 본문 입니다. 적용 태그와 속성이 중복되어 선언되면 나중에 선언된 내용이 반영된다. h1태그입니다. p태그입니다. 위 그림과 같이 ② 에서 적용한 font-size:small, color:red 가 적용되어 나타납니다. IT/Web 2019. 7. 8.
반응형

티스토리툴바