가상클래스는 슈도 클래스라고도 하는데 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정해 사용하는 것을 말한다. 링크와 관련된 가상 클래스 선택자 -링크는 사용자에게 보일 때는 링크가 걸린 텍스트나 이미지일 뿐이지만, 실제로 링크에는 링크위로 마우스를 올려놓았을 때 or 클릭할 때 여러 상황이 존재한다. (눈에 보이지는 않음) :link 선택자-문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.기본으로 파란색 글자와 밑줄로 표시. 이런것들을 없애거나 색상을 바꾸려고 할 때 이 선택자를 사용한다ex) a : link { color:black ; text-decoration:none; }->태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 ..
지금부터 살펴볼 속성 선택자는 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정합ㄴ다. [속성] 형식-지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. '[' 과 ']' 사이에 찾고자 하는 속성을 지정하면 됩니다. ex)[속성] {속성:속성 값 ; ... } 다음 예는 태그로 링크를 건 부분 중 target속성이 있는 링크에 적용할 스타일을 지정한 것입니다.ex)a [target] {background-color:skyblue;} [속성 = 값 ] 형식-주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다ex) [ 속성 =값] { 속성: 속성값; }다음 예는 링크 중에서 target="_blank"인 링크, 즉 새탑으로 열리는 링크에 적용할 스타일을 지정한 것입니다. ex) a [..
하위 선택자-모든 하위 요서에 스타일 적용하기-이 선택자는 적용 대상을 한정시키려고 할 때 사용하는 선택자입니다. 하위 선택자는 부모 요소에 포함된 모든 하위 요소에 스타일이 적용됩니다.하위 선택자를 정의할 때는 상위 요소와 하위 유소를 나란히 쓰고, 그 다음에 오는 대괄호 안에 속성을 지정합니다. ex)상위요소 하위요소 {속성 : 속성 값 ; ... } 다음 예는 태그 안에 있는 모든 태그의 글자색을 파란색으로 지정하는 것입니다.ex) section p {color : blue; } 자식 선택자-자식 요소에만 스타일 적용하기-자식 선택자는 자식 요소에 스타일을 적용하기 때문에 하위 선택자와 혼동하는 경우가 많다. 하위선택자 : 자식 요소뿐만 아니라 자식의 자식 요소, 즉 손자 요소에 까지 적용자식선택자..
스타일은 상속됩니다-웹 문서에서 사용하는 여러 태그들은 서로 포함 관계를 가지고 있어 포함하는 태그는 부모요소라고 하고 포함된 태그는 자식 요소라고 합니다.스타일시트에서는 부모 요소에서 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 합니다. 부모 요소로부터 자식 요소로 단계별로 스타일이 적용되기때문에 '계단식'이라는 의미를 가진 '캐스게이딩'이라는 단어가 '스타일시트'를 수식하는 말로 붙게 된 것입니다. %주의할점 : 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다. why ? : 예를 들어, 태그 스타일을 사용하면 문서 전체에 배경 이미지를 지정할 수 있다. 하지만 태그는 자식 요소가 수 없이 많기 때문에, 배경 이미지를 상속하게 되면 수없이 반복해서 표시되므로 이러..
스타일시트란 스타일을 관리하기 쉽도록 한 군데 모아놓은 것을 스타일시트라고 한다. CSS의 경우 공백을 무시한다.; :대괄호 {} 안에는 속성과 속성값이 오는데 속성/속성 값은 '속성:속성 값'과 같은 형식으로 함께 표시하며, 속성/속성 값 쌍이 여럿일 경우에는 세미콜론으로 구분한다. ex) p { color : blue ; } p= 선택자 color= 속성 blue= 속성값이다 스타일 정보의 기록-스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 한다. 모든 스타일 정보는 헤드 태그안에서 정의해야 한다.웹 문서 안에 있는 내부 스타일시트라면 /head태그가 나타나기전에 규칙을 기록한다. 위와 같이 내부스타일 시트: /head태그 나타나기전외부스타일 시트: 문서 안에 있는 스타일 정보를 ..
태그-버튼넣기-태그를 이용하면 문서에 버튼을 넣고 폼을 전송하거나 리셋할 수 있습니다ex) 내용 속성type속성은 버튼이 활성화 되었을때 어떤 동작을 할지 지정합니다. 선택할 수 있는 값은 submit , reset , button 중 한가지 지정하지 않으면 submit으로 간주합니다.type 속성 값(1) submit : 폼을 제출합니다. ex) 전송하기 과 같이 사용(2) reset : 폼에 입력한 내용을 모두 리셋(3) button : 버튼 형태만 만듭니다. % 태그를 이용해 삽입한 버튼은 태그를 이용해서 삽입하는 버튼과 거의 비슷한 모습을 하고 있고 용도도 비슷하다 - > 이나 , 처럼 태그를 이용해서 삽입 가능 ex)(1) == input 태그 이용 (2) 전송하기 == 버튼 태그 이용 차이 :..
readonly속성 - 읽기 전용 필드 만들기 -readonly속성은 해당 필드를 읽기 전용으로 바꿉니다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고 사용자가 입력은 할 수 없게 하는 속성입니다. 속성은 불 값 (boolean value)을 가지기 때문에 true또는 false 값을 지정해도 되고, 간단히 readonly라고만 쓰거나 readonly="readonly"라고 써도 true라고 인식을 합니다. ex)268p참고 placeholder 속성-힌트 표시하기 -이 속성은 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것 입니다. 이 속성을 이용하면 텍스트 필드 앞에 레이블을 사용하지 않고 사용자에게 해..