$$config title: css 기초/ CSS속성 keywords: - IT - 코딩기초 - CSS속성 $$ # CSS속성 - selecter로 html에서 스타일을 적용하기 위한 영역을 선택했다면 적절한 속성을 활용해 보자 - css 속성은 대체적으로 의미를 짐작할 수 있는 간단한 영어로 구성되어있다. - 모든 css 속성은 매우 다양하기 때문에 하면서 익혀가는 것이 좋고, 참고 문서를 활용하면 좋다. - [W3Schools.com CSS 강좌](https://www.w3schools.com/css/default.asp) - [Mozilla CSS 개발자 문서](https://developer.mozilla.org/ko/docs/Web/CSS) ### 1. 텍스트속성 - 글자와 관련된 속성을 알아보자. - 'color' 글자색을 지정해줄 수 있다. - 'text-align' 영역 안에서의 글자 정렬 방식으 정해줄 수 있다. (left, center, right) ### 2. 글씨체(폰트)속성 - 글꼴과 관련된 속성들이다. - 'font-family' 글씨체의 이름과 유형을 지정하는 속성이다. - (예시) div{font-family:"roboto", serif} - Serif: 바탕체 계열의 글씨체 - Sans-serif: 굴림 계열의 글씨체 - Monospace: 고정폭 글씨체 - 'font-style' 글씨체의 스타일을 지정해 줄 수 있다. 종류는(nomal, italicrhk, oblique)가 있으며 oblique는 잘 사용되지 않는다. - 'font-size' 글씨체의 크기를 지정해 줄 수 있다. - div{font-size:10px;} - div{font-size:2rem;} - 'text-weight' 글씨체 굵기 설정을 해줄 수 있다. - div{font-weight:(nomal, bold, bolder);} - 'font-variant' 글씨체의 변형을 지정해 줄 수 있다. small-caps로 소문자 크기를 유지하고 대문자로 변형 시켜줄 수 있다. ### 3. 정렬속성 - 텍스트나 이미지등을 정렬할 수 있다. - 기본적인 css정렬 속성을 알아보자. - text-align: 요소 내에서의 텍스트의 정렬이다. - vertical-align: inline혹은 테이블 셀에서 수직 정렬이다. ### 4. 링크속성 - ``````를 사용하여 하이퍼링크를 걸어줄 수 있다. html의 특성상 하이퍼링크는 기본텍스트와 다르게 색상과 밑줄을 가지고 있다. ### 5. 컬러속성 - 일반적인 색상과 rgb, rgba도 나타내 줄 수 있다. - (예시) div {color: r(red)g(green)b(blue)a( 투명도)(225, 100, 22, 0.5)} ### 6. 배경속성 - 색상이나 이미지를 배경으로 지정하기 위한 속성이다. - 대표적인 속성을 알아보자. - background-color:글자색을 지정해 줄 수 있다. - background-image:배경이미지 지정과 상대경로, 절대경로, url사용이 가능하다. - background-repeat:이미지의 반복 - background-position:이미지의 위치를 지정 할 수 있다. - background-attachment:배경이미지의 스크롤의 여부를 지정한다. ## 태그 셀렉터 예시(문서내 임의의 태그를 선택자로 사용한다) ### HTML ```html

``` ### CSS ```css div/* div에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } a/* a에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } span/* span에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } ``` ## id 셀렉터 예시(HTML 요소의 id 속성을 사용하여 특정 요소를 선택한다.) *페이지 내에서 유일한 값으로 사용 ### HTML ```html ``` ### CSS ```css #header/* css에서 id를 선택할때는 #을 붙이고 이름을 적어준다. */ { 원하는 스타일 값을 적어준다. } ``` ### 코드펜 활용(연습해보세요) $$codepen https://codepen.io/tldkwnstn/embed/bGRNLYK?default-tab=html%2Cresult&editable=true $$ ### 추천영상 $$youtube https://youtu.be/QBar1YB_bWI $$