반응형 스타일시트입문20 [ CSS 입문 ] font속성 | 개요 font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다. 정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 사용이 가능합니다. font-style : 이탤릭체 등의 글꼴 스타일을 지정 font-weight : 글자 두께 (숫자 또는 bold, normal 등) font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등) font-size : 글자 크기 line-height : 줄간격 font-family : 글꼴 (굴림, 돋움 등) letter-spacing : 글자 간격 text-decoration : 글자 데코 (밑줄, 윗줄, 중간줄 등) | 사용법 font-style 글꼴의 스타일로 주로 이탤릭체(기울여 .. 2018. 9. 10. [ CSS 입문 ] color 속성 | 개요 color 속성은 단어 뜻대로 색상이지만 CSS에서는 더 정확하게는 "글 색상" 입니다. red, blue 등 이미 정의된 색 #000, #ffffff 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 rgb색상 rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba색상 color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit 으로 부모의 색상을 가져옵니다. | 사용법 * { color: red; } /*전체(*)에 글 색상 red를 주어라*/ #text1 span { color: #0A0; } /*text1의 아이디 하위 span태그에 글 색상 #0A0를 주어라*/ div#text1 { color: rgb(0, 0, 150); } .. 2018. 9. 9. [ CSS 입문 ] margin, padding 속성 | 개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. 한 선택자의 바깥쪽으로 여백을 넣고 싶다고 한다면 "margin" 한 선택자의 안쪽으로 여백을 넣고 싶다고 한다면 "padding" 으로 기억을 하면 쉽습니다. 단, 여기서 바깥쪽 여백을 주는 margin을 입력한다면 선택자의 전체 width값에는 변화가 없습니다. 바깥쪽을 기준으로 여백을 주므로써 선택자의 위치를 변경해줄때 사용될 수 있습니다. 안쪽 여백을 주는 padding의 경우 선택자의 전체 width값이나 height값이 변경이 됩니다. 기존 width값과 height값을 유지하고 싶다면 padding을 준만큼 width와 he.. 2018. 9. 8. [ CSS 입문 ] CSS 속성 | 개요 HTML과 비슷하게 CSS도 특정한 기능을 하는 속성들이 미리 정의가 되어 있으며, 이를 잘 활용하여 태그의 스타일을 정의 할 수 있습니다. "속성 : 값"의 형태로 사용되며, 여러 속성끼리는 ; (세미콜론)을 통해 구분됩니다. 하나의 선택자의 속성들을 한줄로 쓰든, 여러줄로 나누어 쓰든 상관 없으며 작업자의 편의에 따라 작성하면 된다. 선택자{ 속성1: 값1; 속성2: 값2 } /* or */ 선택자{ 속성1: 값1; 속성2: 값2; } 브라우저의 개발자툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다. 그리고 브라우저 내에서 미리 스타일을 변형해보고 추가적인 브라우저의 특정 앱들을 이용하면 바로 코드로 저장되어 사이트에 적용까지도 가능합니다. 이 방법을 가지고.. 2018. 9. 7. [ 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 입문 ] 가상 클래스 선택자 | 개요 선택자 뒤에 ":가상이벤트"를 같이 사용하게 되면 각 이벤트에 따라 스타일을 적용할 수 있습니다. 이 내용을 가상(추상)클래스라고 합니다. :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. 이전 1 2 3 다음 반응형
