본문 바로가기

CSS

[CSS] 캐스케이딩
2018. 6. 19. 캐스케이딩 캐스케이드는 폭포라는 의미가 있다. 처음 html이 등장 했을 때는 CSS가 없었다. 웹의 사용자들은 곧 디자인을 요구하기 시작하고 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하였고, 그렇게 해서 등장한 것이 CSS이다. CSS는 Cascading Style Sheet의 약자이다. CSS의 첫번째 글자로 등장 할 만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있다.Cascading을 사전에서 찾아보면 폭포라는 의미가 있다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 다자인이 결합 될 수 있다는 점에 착안하고 있다고 할 수 있다. 웹브라우저는 기본적으로 html을 해석하는데 html에는 기본적으로 디자인이 되어있다. (h1..
[CSS] 가상 클래스 선택자
2018. 6. 18. 가상 클래스 선택자 ● link : 방문한 적이 없는 링크● visited : 방문한 적이 있는 링크 보안상 이유로 속성 사용이 제한적임● hover : 마우스를 롤오버 했을 때● active : 마우스를 클릭 했을 때 1234567891011121314151617181920 a:hover{ color:yellow; } a:active{ color: green; } 방문함 방문 안함Colored by Color Scriptercs ※ hover와 active가 동시에 적용 될 때(동급 일 때)css는 뒷쪽에 있는 선언을 먼저 선택한다.
[CSS] 부모 자식 선택자
2018. 5. 9. 부모 자식 선택자 1234567891011121314151617181920212223 ul li{ color:red; } HTML CSS JavaScript HTML CSS JavaScript cs ul 밑에 있는 li들이 선택 된다. ul li{ color:red; } 1234567891011121314151617181920212223242526272829303132 ul li{ color:red; } ol li{ border:1px solid red; } HTML CSS JavaScript HTML CSS selector declaration JavaScript cs ol 밑의 li들이 모두 바뀌게 된다. 하지만 직계 자손 태그들에게만 효과를 주고 싶다면 ol>li{ border:1px solid r..
[CSS] 선택자
2018. 5. 9. 선택자 선택자와 선언 ● Selector : 주어● Declaration : 선언 ● property : 속성● value : 속성 값● value-Property Separator : 속성과 속성을 구분● Declaration Separator : 선언과 선언을 구분하는 구분자 선택자의 종류 1. 태그 선택자 123456789101112131415161718 li{ color:red; text-decoration:underline; } HTML CSS JavaScript cs ● 효과를 여러개 지정 할 때는 세미콜론(;)이 있어야 한다. li{ color:red; text-decoration:underline; } 2. 아이디 선택자 1234567891011121314151617 #select{ fon..
[JavaScript] 이미지 자동 변경
2018. 4. 15. 이미지 자동 변경 1234567891011121314151617181920212223 방문할 때마다 변하는 이미지 var imgArray = new Array(); imgArray[0] = "sakura.jpg"; imgArray[1] = "sakura2.jpg"; imgArray[2] = "sakura3.jpg"; function showImage() { var imgNum = Math.round(Math.random()*2); var objImg = document.getElementById("introImg"); objImg.src = imgArray[imgNum]; setTimeout("showImage()", 3000); } 7~9 : 파일명.확장자15 : 밀리세컨드로 지정
[CSS] Style 속성
2018. 4. 7. CSS Style 속성 글꼴 색과 배경 속성 ● color ● background-color● background-image (주로 바디 태그에 많이 사용)● background-repeat● background-attachment● background-position● background 글꼴 속성●font-family●font-style●font-variant●font-weight●font-size●font 텍스트 속성●text-indent●text-align●text-decoration●line-height●letter-spacing●word-spacing●text-transform 목록 속성●list-style-type●list-style-image●list-style-position●list-s..
[CSS] CSS 소개
2018. 4. 7. CSS 소개 CSS란? Cascading Style Sheet화면을 구상 할 스타일을 미리 정해 두고 단계적으로 해당 스타일을 적용하는 방식의 코드이다. CSS 장점 소스의 관리와 수정이 쉬워진다. (문서와 디자인의 분리)다양한 기기별 디자인 적용이 용이해진다.웹 문서 제작시간이 줄어든다. CSS 종류 ● Inline Style Sheet (태그 내부에 속성으로 들어가는 것)형식 : 12345678 Hello World Colored by Color Scriptercs ● Inner Style Sheet (Head 영역에서 미리 지정)형식 : 1234567891011 h2{color:blue} Hellow World cs 태그명/class 명/ID명을 기준으로 지정클래스는 .으로 시작한다. ● Outer..
[Web][Front-End] 회원가입 만들기
2018. 4. 7. HTML/JavaScript로 회원가입 만들기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 setInterval 메소드 function previewString(){ var objResult = document.getElementById("result"); var objText = document.getElementById("tbString"); var objFontColor = document.getElementById..

티스토리툴바