본문 바로가기

분류 전체보기433

<HTML5+CSS3>글꼴 관련 스타일 @font-face속성-웹 폰트 사용하기-사용자 시스템에 없는 글꼴을 보여주려면 모바일과 각 웹 브라우저에 알맞은 폰트 확장자를 설정해줘야한다PC- *.ttf : 컴퓨터에서 사용하는 글꼴은 트루타입 유형이다.모바일*.eot : 인터넷 익스플로어8 이하 버전 (Embedded Open Type)형태*.woff : 인터넷 익스플로어9이상 및 파이어폭스와 크롬 (Web Open Font Format) 트루타입 글꼴을 웹 폰트로 사용하려면 eot파일과 woff파일로 변환해야한다 %트루타입 글꼴이란 화면에 나타나는 글꼴과 인쇄했을 때의 글꼴이 일치하는 유형을 말함.% ttf->woff 변환사이트 : people.moziila.com/~jkew/woff/ 이용 ttf->eot변환 사이트 : eotfast.com 이.. 2018. 10. 16.
<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.

티스토리툴바