-
개인 공부 후 정리 목적인 글입니다.
CSS 작성 방법
<style type="text/css">
코드 작성;
</style>
● 주석 방법 : /* ………… */
● CSS 코드를 만드는 3가지의 방법
1. 내부 스타일 시트 : HTML 문서 안의 <STYLE>과 </STYLE> 안에 CSS 코드를 추가
2. 외부 스타일 시트 : LINK를 이용하여 CSS파일을 불러오는 것, @import를 이용
3. HTML 태그의 style 속성에 CSS 코드를 추가하는 방법
● CSS에서 사용하는 색상 표현
색상 단위 설명 사용 예 RGB red, green, blue의 조합 rgb(255,0,0), rgb(0,0,0) HEX 색상을 16진수로 표현 #fff, #000, #ffcc00 기본적인 CSS3 선택자
1. 전체 선택자 : *{속성: 값;}
2. 타입(태그) 선택자 : 태그명{속성: 값;}
3. 아이디(ID) 선택자 : #ID명{속성: 값;} ex) <p id="id 이름">
=> <p>의 id를 지정, #id { 속성: 속성값; }
※페이지 안에서 한 번만 사용 가능※4. 클래스(Class) 선택자 : 태그명.클래스명{속성: 값;} ex) <p class="name">
=> <p>의 id를 지정, .name { 속성: 속성값; }
※페이지 안에서 여러 번 사용 가능※5. 하위 선택자 : 모든 하위 요소에 스타일을 적용 ex) section p { 속성: 속성값; }
=> <section>안에 모든 <p>에 속성값 설정
※자식 요소 뿐 아니라 그 밑의 자식 요소에게도 계속 적용 가능※6. 자식 선택자 : 자식 요소에만 스타일 적용 ex) section > p {속성: 속성값; }
=> <section>의 <p>중 자식 요소인 <p>만 설정※바로 밑의 자식 요소까지만 적용 가능※
7. 인접 형제 선택자 : 공통 부모를 가진 형제 요소 중 첫 번재로 나오는 동생 요소에 스타일 적용
ex) h1 + p { 속성: 속성값; } => <h1> 다음에 오는 <p> 중 첫 번째 <P>만 설정8. 형제 선택자 : 인접 형제 선택자와는 달리 모든 형제 요소에 다 적용
ex) h1 - p { 속성: 속성값; } => <h1> 다음에 오는 모든 형제 <p>에 설정
9. 그룹 선택자 : 스타일을 한번에 정의, 콤마(,)를 이용해서 여러 선택자들을 묶어서 선택
선택자의 우선순위 : 인라인 > 아이디 > 클래스 > 태그
속성 선택자 : 태그명[속성]{속성: 값;}
선택자 설명 [속성 = 값]{속성: 값;} 일치하는 요소에 적용 [속성 ~= 값]{속성: 값;} 하나만 일치해도 적용 [속성 ^= 값]{속성: 값;} 지정한 문자로 시작하는 속성에 적용 [속성 $= 값]{속성: 값;} 지정한 문자로 끝나는 속성에 적용 [속성 |= 값]{속성: 값;} 지정한 값으로 시작하면 적용 [속성 *= 값]{속성: 값;} 위치와 상관없이 해당 값이 포함되어 있으면 적용 가상 클래스 선택자 : 태그명:가상요소명{속성: 값;}“
분류 패턴 설명 문자 블록 tag:first-line{속성: 값;} 태그의 첫 번째 라인을 선택 tag:first-letter{속성: 값;} 태그의 첫 번째 문자를 선택 tag:first-child{속성: 값;} 태그의 첫 번째 자식 요소를 선택 tag:nth-child(e){속성: 값;} 태그의 odd/even/n번째 요소 선택 콘텐츠 tag:before{content: 값;} 선택한 태그 앞에 지정한 콘텐츠를 삽입 tag:after{content: 값;} 선택한 태그 뒤에 지정한 콘텐츠를 삽입 하이퍼링크 tag:link{속성: 값;} 하이퍼링크 태그에 방문하지 않았을 경우 tag:visited{속성: 값;} 하이퍼링크 태그에 방문했을 경우 마우스 tag:hover{속성: 값;} 마우스 커서가 태그에 올라와 있는 동안 tag:active{속성: 값;} 태그가 활성화되었을 경우 tag:focus{속성: 값;} 태그에 포커스가 머물러 있는 경우 CSS 주요 스타일 속성
1. 문자 스타일 속성
(1) 폰트 속성
속성 설명 font-family 글꼴을 지정합니다. font-size 문자의 크기를 정합니다.
(em | ex | px | pt)font-style 문자의 기울기를 설정합니다.
(normal | italic | oblique | initial | inherit)font-weight 문자의 굵기를 설정합니다.
(normal | bold | bolder | lighter | initial | inherit)font-variant 작은 대문자를 표시합니다.
(normal | small-caps | initial | inherit)line-height 줄 간격을 조절합니다. font font 속성을 한 번에 기술할 수 있습니다. (2) 절대(고정)크기의 단위
표기법 단위 표기법 설명 in 인치(1인치=2.54cm) large 18px=1.125em cm 센티미터 small 13px=0.812em mm 밀리미터 x-large 24px=1.5em pt 포인트(1포인트=1/72인치) xx-large 32px=2em pc 파이카(1파이카=12포인트) x-small 10px=0.625em medium 16px=12pt=1em xx-small 9px=0.5625em (3) 상대(비례) 크기의 단위
표기법 단위 표기법 설명 em 기준 문자의 높이 ex 기준 문자의 소문자 높이 % 기준 글꼴 크기의 백분율 크기 px 1픽셀을 1로 하는 단위 larger 앞에 입력한 문자보다 크게 smaller 앞에 입력한 문자보다 작게 2. 문단 스타일 속성
속성 설명 text-decoration 문자에 밑줄 또는 취소선 등을 넣습니다.
(none | underline | overline | line-through | inherit)text-align 문단을 왼쪽, 가운데, 오른쪽 정렬합니다.
(left | right | center | justify(양쪽정렬))text-indent 문단의 들여쓰기 또는 내어 쓰기를 지정합니다. text-transform 영문자 모두를 대문자로 또는 소문자로 변경합니다.
(none | capitalize | uppercase | lowercase | inherit)letter-spacing 글자 간의 간격을 조절합니다. word-spacing 단어 간의 간격을 조절합니다. vertical-align 문자와 문자간의 수직 정렬을 조절합니다.
(baseline | top | middle | bottom)white-space 줄바꿈에 대한 설명을 합니다.
(normal | nowrap | pre | pre-line | pre-wrap | inherit)3. 테두리 스타일 속성
속성 설명 border-width 선의 굵기를 지정합니다.
px이나 em 등의 단위를 사용하며 주로 px를 많이 사용합니다.border-style 선의 형태를 지정합니다.
(none | solid | dotted | dashed | double | groove)border-color 선의 색상을 지정합니다.
색상 이름이나 색상 코드가 들어갈 수 있습니다.4. 리스트 스타일 속성
속성 설명 list-style-type 리스트 앞에 오는 불릿의 타입을 결정하는 속성
(none | disc | circle | square | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman)list-style-image 리스트 불릿을 이미지로 사용하고자 할 때 사용 list-style-position 리스트의 불릿이 밖에 있을지 안에 있을지를 결정합니다.
(outside | inside | inherit)list-style 리스트 속성들을 한번에 사용 가능 5. 배경 스타일 속성
속성 설명 background-color 배경에 색상을 넣는 속성 background-image 배경에 이미지를 넣는 속성(url'경로‘) background-repeat 배경 이미지의 반복 여부를 설정하는 속성
(repeat | repeat-x | repeat-y | no-repeat | inherit)background-position 이미지의 위치를 설정하는 속성
(px | % | left, right | top, bottom | center | inherit)background-attachment 화면을 스크롤 할 때 배경 이미지가 어떻게 동작하는지 설정하는 속성(scroll | local | fixed | inherit) 6. 테이블 스타일 속성
속성 설명 border-collapse 테이블 셀 간의 간격 여부를 설정(separate | collapse | inherit) border-spacing 테이블 셀 간의 공백 크기를 조절해주는 속성
(separate인 상태에서만 가능)empty-cells 테이블에서 빈 셀에 대해 그 셀의 테두리나 배경을 브라우저에 보여줄지 보여주지 않을지 설정(separate인 상태에서만 가능)
(hide | show | inherit)table-layout 셀의 너비를 고정 또는 가변으로 할지를 설정(auto | fixed | inherit) vertical-align 셀 안에서 수직 정렬(top | middle | bottom) caption-side 캡션의 위치를 정하는 속성(top | bottom | initial | inherit) 7. 박스 모델
- 웹페이지에서 텍스트 문장이나 이미지 등의 콘텐츠를 만들 때 사용(1) 여백의 속성
속성 설명 margin 여백 속성을 이용한 스타일을 한 줄에 설정할 수 있다. margin-top 위쪽 여백 값을 설정한다. margin-right 오른쪽 여백 값을 설정한다. margin-bottom 아래쪽 여백 값을 설정한다. margin-left 왼쪽 여백 값을 설정한다. (2) 패딩의 속성
속성 설명 padding 모든 padding 속성을 한 줄에 설정할 수 있다. padding-top 위쪽의 패딩 값을 설정한다. padding-right 오른쪽의 패딩 값을 설정한다. padding-bottom 아래쪽의 패딩 값을 설정한다. padding-left 왼쪽의 패딩 값을 설정한다. (3) 테두리의 속성
속성 설명 border 태그의 테두리를 설정하는 속성, 세부적인 속성들을 한 번에 쓸 수 있다.(width, style, color) border-style 테두리를 다양한 모양으로 설정 border-width 테두리의 너비를 설정 border-color 테두리의 색상을 설정 border-top 테두리의 top 부분 속성을 한 번에 설정 border-right 테두리의 right 부분 속성을 한 번에 설정 border-left 테두리의 left 부분 속성을 한 번에 설정 border-bottom 테두리의 bottom 부분 속성을 한번에 설정 ● Shadow와 Gradient 형식
1. text-shadow : h-shadow v-shadow blur-radius spread-distance color;
2. box-shadow : h-shadow v-shadow blur-radius spread-distance color;
그래디언트의 종류
종류 설명 선형 그래디언트
(linear gradients)선형으로 그래디언트 효과를 나타낸다.
최소한 두 개 이상의 색상 지정점이 필요하다.
background : linear-gradient (direction,color1, color2.....);
background : linear-gradient (angle, color1, color2.....);원형 그래디언트
(radial gradients)원 또는 타원의 중심에서부터 바깥쪽으로 색상이 바뀐다.
background : radial-gradient(모양/크기 및 위치, 출발색, 중간색..종료색)● Navigation과 Dropdown
- 웹페이지의 메뉴바를 만들 때 주로 이용한다. 메뉴바는 상단 또는 왼쪽에 만든다.