반응형 스타일시트23 [ CSS 입문 ] border 속성 | 개요 border 속성은 태그의 테두리를 설정하는 속성으로, background속성 과 비슷하게 세부적인 속성들을 한번에 사용할 수 있습니다. 예전부터 지금까지도 많이 사용되는 table태그에서의 border와 비슷한 세부 속성을 가지고 있으며 이제 테이블이 아닌 다른 객체에서도 border 속성을 이용하여 문서나 표를 작성 할 수 있습니다. 주로 " border: 선두께 선스타일 선색상; "의 순서로 작성되며 전체의 테두리가 아니라면 각 방향별로 따로 테두리를 줄 수 있습니다. border-width : 테두리 두께 border-style : 테두리 스타일 border-color : 테두리 색 border-radius : 모서리 각 border-top : 윗쪽 테두리 border-bottom : 아.. 2018. 9. 13. [ CSS 입문 ] background 속성 | 개요 background 속성은 태그의 배경을 지정하는 속성입니다. 한번에 여러가지 속성을 사용할 수 있습니다. background-color : 배경색 background-image : 배경 이미지 background-size : 배경 이미지 사이즈 background-repeat : 배경 이미지 반복 background-position : 배경 이미지 위치 | 사용법 background-color 배경색을 의미하며, 값은 color속성의 포맷을 사용합니다. 색상을 사용할때 그라디언트 속성을 이용할 수 도 있는데 이는 'background-image' 에서 넣을 수 있습니다. background-image 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 이때엔 'backg.. 2018. 9. 12. [ CSS 입문 ] text-align 속성 | 개요 text-align 속성은 텍스트의 정렬을 의미합니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 중앙 정렬 justify : 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리) | 사용법 #box1 { text-align: right; } /*box1 아이디 선택자의 텍스트를 오른쪽 정렬로 하라*/ #box2 { text-align: left; } /*box2 아이디 선택자의 텍스트를 왼쪽 정렬로 하라*/ #box3 { text-align: center; } /*box3 아이디 선택자의 텍스트를 중앙 정렬로 하라*/ 우리가 편하게 사용하는 워드나 엑셀 같은 프로그램에 많이 사용했을 법한 텍스트 정렬은 많이들 알고 있는 기능일 것으로 생각됩니다. CSS에서는 위와 같이 .. 2018. 9. 11. [ 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. 이전 1 2 3 다음 반응형
