반응형 즐거움 넘치는 IT 세계/코드로 만드는 디자인69 [ CSS 입문 ] 가상 클래스 선택자 | 개요 선택자 뒤에 ":가상이벤트"를 같이 사용하게 되면 각 이벤트에 따라 스타일을 적용할 수 있습니다. 이 내용을 가상(추상)클래스라고 합니다. :link - 방문한 적이 없는 링크 :visited - 방문이 있었던 링크 :hover - 마우스를 해당 부분에 롤오버 했을 때 :active - 마우스를 해당 부분에 클릭 했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first-child - 첫번째 요소 :last-child - 마지막 요소 위 내용은 가상(추상)클래스의 대표적인 예시이며 미리 정의된 가상 클래스를 효과적으로 이용하면 웹상에서 좀 더 동적이고 효과적인 스타일을 적용할 수 있습니다. | 사용법 table .box:first-child { background-color:.. 2018. 9. 6. [ CSS 입문 ] 다중 조건 선택자 | 개요 CSS의 선택자 안에서 "AND"와 "OR"과 같이 선택할때 다중선택이 가능합니다. 태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 태그이름.클래스명 { 속성1:속성값; 속성2:속성값; } .클래스명#아이디 { 속성1:속성값; 속성2:속성값; } 앞 전 포스팅에도 살짝 나왔던 내용입니다. 이전 내용과 달리 중간 사이에 "공백"을 없애게 되면 여러개의 조건을 만족하는 선택자를 찾게 됩니다. 앞의선택자이면서 뒤선택자가 만족하는 선택자를 찾게 됩니다. 선택자는 태그선택자, 아이디선택자, 클래스선택자 등 모든 선택자가 사용 될 수 있습니다. #아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 선택자와 선택자 사이 공백에 쉼표(,).. 2018. 9. 5. [ CSS 입문 ] 부모 자식 선택자 | 개요 선택자1 선택자2 { 속성1:속성값; 속성2:속성값; } 위 내용을 보면 "선택자1"과 "선택자2" 사이 공백을 넣어 앞쪽엔 부모선택자를 뒷쪽엔 자식선택자를 넣어 하위에 있는 자식선택자에 스타일을 적용할 수 있습니다. 위 내용에선 "선택자2"에 스타일이 입히게 됩니다. 선택자에는 태그 선택자나 아이디 선택자, 클래스 선택자 중 모든 선택자를 사용 할 수 있습니다. 이렇게 부모선택자와 자식선택자를 넣는 것은 좀 더 정확한 위치에 있는 선택자에 스타일을 입힐 수 있으며 다른 동일한 선택자가 있다고 하더라도 다른 선택자는 제외하고 지정된 선택자에 스타일을 입힐 수 있습니다. | 사용법 div span { text-align:center; padding-bottom:10px; } div.box span.. 2018. 9. 4. [ CSS 입문 ] id, class 선택자 | 개요 태그에서 미리 지정해둔 id나 class 속성에 따라 스타일을 지정할 수 있습니다. id에 스타일을 줄 경우 아래 처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 id값이 부여된 한개의 객체에만 적용할 수 있습니다. #아이디{ 속성1:속성값; 속성2:속성값; } class에 스타일을 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며, 여러개의 객체에 적용할 수 있습니다. .클래스명{ 속성1:속성값; 속성2:속성값 } | 사용법 #box_line{ width:100px; height:100px; border:1px solid red; } .box_bg{ width:200px; height:100px; background-color:blue; } box_bg클래스 box_bg클래스 box_line아이디 .. 2018. 9. 3. [ CSS 입문 ] 태그 선택자 | 태그 선택자 개요 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 위 와 같이 사용되며 태그가 문서내 한개라면 해당 태그 한개에만 적용되지만, 문서내에 태그가 여러개가 존재한다면 같은 태그이름의 태그 전부에 {} 괄호 안 스타일 내용이 적용됩니다. 속성과 속성값은 : (콜론)으로 연결하여 작성하며, 속성과 속성 사이에는 ; (세미콜론)으로 분리합니다. 세미콜론의 경우 {}괄호 안 제일 마지막 속성값을 입력한 후 제외가 가능하지만, 추후 관리나 유지보수를 하는데 있어 번거로움을 줄이고자 한다면 항상 문장의 마침표처럼 속성과 속성값을 입력 후에는 세미콜론으로 마침표를 찍어주는게 좋겠습니다. | 사용법 span { color:red; } div { color:blue; } span태그 div태그 |.. 2018. 9. 2. [ CSS 입문 ] CSS란? | CSS와의 만남 디자이너인 저는 HTML을 진행하면서 CSS를 떼려야 뗄 수 없는 코드였습니다. 마치 이제까지 포토샵과 일러스트레이터를 가지고 디자인을 하던 저에게 새로운 디자인툴이 생긴 것과 같았습니다. 코드로 디자인을 할 수 있다니! 놀라울 따름이었습니다. HTML을 가지고 원하는 구조와 레이아웃을 만든다면 CSS로 세부적인 표현과 위치, 색상, 효과 등등 더욱 풍부해진 표현을 웹상에서 할 수 있는 신세계였습니다. 웹디자이너분이시라면 한 번쯤 공부해도 괜찮을 것이라고 생각됩니다. 그래서 앞으로 제가 공부했었던, 그리고 공부 중인 코드에 대해서 이 공간에 정리해볼까 합니다. | CSS 개요 Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보일 것인가를 기술.. 2018. 9. 1. 이전 1 ··· 5 6 7 8 다음 반응형
