반응형 즐거움 넘치는 IT 세계72 [ CSS 입문 ] margin, padding 속성 | 개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. 한 선택자의 바깥쪽으로 여백을 넣고 싶다고 한다면 "margin" 한 선택자의 안쪽으로 여백을 넣고 싶다고 한다면 "padding" 으로 기억을 하면 쉽습니다. 단, 여기서 바깥쪽 여백을 주는 margin을 입력한다면 선택자의 전체 width값에는 변화가 없습니다. 바깥쪽을 기준으로 여백을 주므로써 선택자의 위치를 변경해줄때 사용될 수 있습니다. 안쪽 여백을 주는 padding의 경우 선택자의 전체 width값이나 height값이 변경이 됩니다. 기존 width값과 height값을 유지하고 싶다면 padding을 준만큼 width와 he.. 2018. 9. 8. [ CSS 입문 ] width, height 속성 및 길이 단위 | 개요 width 와 height 속성은 HTML과 동일하게 "가로길이, 세로길이"를 의미합니다. 값을 정의 할때는 "100px" 처럼 숫자 뒤의 단위를 같이 작성하며 단위에 따라서 값이 다르게 표기됩니다. 아래의 길이 단위는 꼭 width와 height 속성에만 작성되는것이 아니라 font 사이즈나 다른 속성들의 사이즈를 잡는데 있어서도 사용되는 단위 이므로 꼭 확인 하도록 합니다. [ 절대 길이 단위 ] px - 픽셀(pixel), 컴퓨터 화면에서 사용되는 단위로 1px은 컴퓨터 화면에서 점 1개와 같음 mm - 밀리미터 cm - 센티미터 (1cm = 10mm) in - 인치 (1in = 2.54cm) pt - 포인트(point), 주로 인쇄매체에서 사용 (1pt = 1인치의 1/72) pc - 피.. 2018. 9. 7. [ CSS 입문 ] CSS 속성 | 개요 HTML과 비슷하게 CSS도 특정한 기능을 하는 속성들이 미리 정의가 되어 있으며, 이를 잘 활용하여 태그의 스타일을 정의 할 수 있습니다. "속성 : 값"의 형태로 사용되며, 여러 속성끼리는 ; (세미콜론)을 통해 구분됩니다. 하나의 선택자의 속성들을 한줄로 쓰든, 여러줄로 나누어 쓰든 상관 없으며 작업자의 편의에 따라 작성하면 된다. 선택자{ 속성1: 값1; 속성2: 값2 } /* or */ 선택자{ 속성1: 값1; 속성2: 값2; } 브라우저의 개발자툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다. 그리고 브라우저 내에서 미리 스타일을 변형해보고 추가적인 브라우저의 특정 앱들을 이용하면 바로 코드로 저장되어 사이트에 적용까지도 가능합니다. 이 방법을 가지고.. 2018. 9. 7. [ 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 다음 반응형
