태그명[속성=속성값] { css작성 }
input[type=password]{background-color: yellow;}
후손 선택자
: 특정 태그 아래에 있는 후손을 선택할 때 사용하는 선택자.
id의 사용을 남용하지 않고 상대적 위치로 Selector를 사용한다.
빈칸(공백)으로 선택자가 이어지면, 아래에 포함되어 있는 child 선택자들 모두 지목하게 된다.
#header h1 {color: red;}
#header h1, #header h3 { background-color: yellow;}
#header h1, #header h3
=> header안의 h1과 header 안의 h3를 선택하고자 할 때 ','로 구분하면 두 개의 후손 선택자를 동시에 선택이 가능하다.
[주의!!]
=> #header h1, h3
- > header안의 h1과 내부 & 외부 포함한 모~든 h3에 적용
후손 선택자 사용시 ' '공백을 사용하면 지목된 선택자 안의 모든 후손 선택자가 선택되지만, '>'를 사용하면 바로 아래 후손 선택자만 선택된다.
#header>h2 { background-color: orange; color: red;}
#section>h1 { background:yellow; color:green}
#nav>h2 {background: yellowgreen; color:blue}
#header>#nav>h1 {background: pink; color:red;}
table>tbody>tr>td { color: blue;}
table>tbody>tr>th {color: red}
h1 태그의 바로 뒤에 h2태그의 color 속성에 red 키워드를 적용
➡️ h1 + h2 {color:red}
후손선택이 아닌 같은 수준의 바로 다음에 위치한 태그 선택
h1~h3 {background-color: green;}
=> h1 뒤에 있는 h3들!!
선택자 :hover
선택자로 지목한 태그에 마우스를 올리면 변경할 CSS를 지정한다.
transition-duration
: hover 등의 적용시 transition-duration이 설정되어 있다면 설정된 시간동안 변화가 일어나도록 시간 지연 현상을 일으킨다.
선택자1에 hover를 적용하되, css변경을 다른 태그에 적용하고 싶다면, "자신의 형제나 후손 선택자에게만" 가능하다.
자신의 부모나 부모의 형제 또는 부모의 형제의 자손 선택자, 그리고 자신의 형제 중 앞서서 먼저 출현한 형제 선택자에게는 적용할 수 없다.
그들에게 적용하려면 자바스크립트 또는 제이쿼리를 사용해야 한다.
반응, 상태 선택자
: 입력 양식의 상태, 태그에 일어난 이벤트를 선택할 때 사용하는 선택자.
종류
border-width 속성
테두리의 너비를 지정하는 스타일 속성.
크기 단위 : border-left[ top / right / bottom ]-width
키워드 : medium / thick / thin ...
border-style 속성
테두리의 형태를 지정하는 스타일 속성
border-left[ top / right / bottom ]-style
border-color 속성
border-radius 속성
CSS3에서 추가된 속성.
테두리가 둥근 사각형 또는 원을 만들 수 있다.
border-radius 값을 4개로 넣었을 때 적용 순서
: 왼쪽위 -> 오른쪽위 -> 오른쪽아래 -> 왼쪽아래
border에 의한 선 굵기는 div 또는 박스모델의 전체 크기에 합산되어 관여한다. (width:400px, height:150px)인 .box2는 양쪽 5px의 선굵기가 포함되어서 너비 410px, 높이 160px이 된다.
.box { width: 170px; height: 100px; border: 10px solid blue;
margin-bottom: 30px; padding-left: 30px; padding-top: 30px;}
CSS3부터 지원하는 선택자
일반적으로 자손선택자와 병행해서 많이 사용
같은 이름의 태그들 또는 클래스 이름들을 대상으로 하는 선택자
종류
:first-child ➡ 첫번째 위치하는 자손을 선택
:last-child ➡ 마지막에 위치하는 자손을 선택
:nth-child ➡ n번째 위치하는 자손을 선택
li>a:first-child { color: red;}
li>a:first-child
는 모든 li안의 첫번째 a태그들을 가르키므로 모두 빨간 색 표시li:first-child>a { color: blue;}
body > *first-of-type{color:red}
특정 태그의 배경이미지 또는 색상을 지정하는 스타일 속성
종류
1) background-image 속성
{ background-image: url( *images/BackgroundFront.png* ); }
2) background-size 속성
그림 크기를 조절할 때 사용하는 스타일 속성이며, CSS3에서 추가된 기능
키워드 : contain/cover
contain : 너비를 100%로 지정한 것과 같은 효과
cover : 높이를 100%로 지정한 것과 같은 효과
3) background-repeat 속성
repeat : 이미지가 패턴을 이룸
키워드 : no-repeat / repeat / repeat-x / repeat-y
repeat-x : x축 방향으로 이미지가 반복
repeat-y : y축 방향으로 이미지가 반복
4) background-attachment 속성
배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성
속성의 기본 키워드 : scroll (키워드 : fixed / scroll)
fixed : 스크롤을 이동해서 배경 이미지 고정
5) background-position 속성
background-position : x축 위치;
background-position : x축 위치, y축 위치;
font-size
: 글자의 크기를 지정하는 스타일 속성.
font-family 속성
폰트를 지정하는 스타일 속성
일반적으로 한 단어로 이루어진 폰트트 따옴표를 사용하지 않음. 하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용
font-style 속성
font-weight 속성
폰트의 두께를 지정하는 스타일 속성
키워드 : 700/800/900/bold ...
일반 폰트 두께: 400, 두꺼운 폰트 두께:700
두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조절할 수 없다.
line-height 속성
text-align 속성
첫번째 : 좌(-)우(+) / 두번째 : 상(-)하(+) => 그림자 크기,
양수는 오른쪽과 아래, 음수는 왼쪽과 위
세번째 : 번짐 정도를 표시
네번째 : 그림자 확장 정도를 표시
다섯번째 : 그림자 색깔
같은 방식으로 text-shadow도 있다. 다만 글자에 그림자를 넣는 동작이므로, 적용할 때 글자의 굵기가 굵은 font를 적용 후 사용하는 것이 자연스럽다.
※ text-decoration: none;
➡ 밑줄 등의 스타일을 없앤다. 주로 앵커태그 및줄 없앨 때 많이 사용