본문 바로가기

HTML&CSS/HTML545

<HTML5+CSS3>가상클래스 :enabled , :disabled , :checked 선택자-인에이블과 디사블은 요소 중에서 사용할 수 있는 상태와 사용할 수 없는 상태의 스타일을 지정할 수 있다.예를 들어, 게시판에서 사용자가 입력할수 있는 부분을 enabled상태회원 약관등을 보여줄 때는 사용자가 내용을 보기만 해야하므로 disabled상태이다.checked클래스 선택자는 라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정한다.ex)textarea:disabled { cursor:pointer; }->포인터를 가져가면 내용을 입력할 수 있는 커서로 변하지 않고 포인터 형태로 표시하는 스타일 그 외의 가상 크래스 ::before, ::after 선택자-특정한 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다. 요소의.. 2018. 10. 16.
<HTML5+CSS3> 위치를 기준으로 하는 가상 클래스 선택자 :root 선택자-문서 안의 루트 요소에 스타일을 적용한다. HTML문서에서 루트 요소가 HTML이므로 HTML요소에 스타일이 적용된다. 위의 그림은 트리 형태로 표시한 웹 문서 구조에서 최상단 요소 , 즉 뿌리가 되는 부분은 태그입니다. 문서 안에 전체적으로 똑같이 적용할 스타일이 있을 경우 :root 라는 선택자를 이용해 지정할 수 있다. :nth-child(n)과 :nth-last-child(n) 선택자-웹 문서에서 특정 부분에 스타일을 적용하려면 class나 id선택자를 이용해 이름을 붙여주고 정의하면 된다 하지만 여러개의 항목이 일렬(가로or세로)로 나열되있을 경우 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있다. 주로 메뉴 항목에 이 선택자를 사용한다:nth-child(n) =.. 2018. 10. 13.
<HTML5+CSS3>가상 클래스 가상클래스는 슈도 클래스라고도 하는데 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정해 사용하는 것을 말한다. 링크와 관련된 가상 클래스 선택자 -링크는 사용자에게 보일 때는 링크가 걸린 텍스트나 이미지일 뿐이지만, 실제로 링크에는 링크위로 마우스를 올려놓았을 때 or 클릭할 때 여러 상황이 존재한다. (눈에 보이지는 않음) :link 선택자-문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.기본으로 파란색 글자와 밑줄로 표시. 이런것들을 없애거나 색상을 바꾸려고 할 때 이 선택자를 사용한다ex) a : link { color:black ; text-decoration:none; }->태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 .. 2018. 10. 13.
<HTML+CSS3>속성 선택자 지금부터 살펴볼 속성 선택자는 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정합ㄴ다. [속성] 형식-지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. '[' 과 ']' 사이에 찾고자 하는 속성을 지정하면 됩니다. ex)[속성] {속성:속성 값 ; ... } 다음 예는 태그로 링크를 건 부분 중 target속성이 있는 링크에 적용할 스타일을 지정한 것입니다.ex)a [target] {background-color:skyblue;} [속성 = 값 ] 형식-주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다ex) [ 속성 =값] { 속성: 속성값; }다음 예는 링크 중에서 target="_blank"인 링크, 즉 새탑으로 열리는 링크에 적용할 스타일을 지정한 것입니다. ex) a [.. 2018. 10. 12.
<HTML+CSS3>하위선택자와 형제,그룹,자식 선택자들 하위 선택자-모든 하위 요서에 스타일 적용하기-이 선택자는 적용 대상을 한정시키려고 할 때 사용하는 선택자입니다. 하위 선택자는 부모 요소에 포함된 모든 하위 요소에 스타일이 적용됩니다.하위 선택자를 정의할 때는 상위 요소와 하위 유소를 나란히 쓰고, 그 다음에 오는 대괄호 안에 속성을 지정합니다. ex)상위요소 하위요소 {속성 : 속성 값 ; ... } 다음 예는 태그 안에 있는 모든 태그의 글자색을 파란색으로 지정하는 것입니다.ex) section p {color : blue; } 자식 선택자-자식 요소에만 스타일 적용하기-자식 선택자는 자식 요소에 스타일을 적용하기 때문에 하위 선택자와 혼동하는 경우가 많다. 하위선택자 : 자식 요소뿐만 아니라 자식의 자식 요소, 즉 손자 요소에 까지 적용자식선택자.. 2018. 10. 12.
<HTML5+CSS3>스타일의 우선순위 스타일은 상속됩니다-웹 문서에서 사용하는 여러 태그들은 서로 포함 관계를 가지고 있어 포함하는 태그는 부모요소라고 하고 포함된 태그는 자식 요소라고 합니다.스타일시트에서는 부모 요소에서 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 합니다. 부모 요소로부터 자식 요소로 단계별로 스타일이 적용되기때문에 '계단식'이라는 의미를 가진 '캐스게이딩'이라는 단어가 '스타일시트'를 수식하는 말로 붙게 된 것입니다. %주의할점 : 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다. why ? : 예를 들어, 태그 스타일을 사용하면 문서 전체에 배경 이미지를 지정할 수 있다. 하지만 태그는 자식 요소가 수 없이 많기 때문에, 배경 이미지를 상속하게 되면 수없이 반복해서 표시되므로 이러.. 2018. 10. 12.

티스토리툴바