개발자 도구 단축키 : 컨트롤 시프트 i
16 진수 코드 (hex,hexadecimal)
16 진수란 ? 수를 0~15 까지의 숫자로 표현하는 방법
0~9 는 그냥 표현
10 -->A, 11 -->B, 12 -->C, 13 -->D, 14 -->E, 15 -->F
형식 : #[6 자리 16 진수
-#000000 ~ #ffffff
두자리씩 각각 R, G, B 를 표현
-#000000 : black / #FFFFFF : white / #FF0000 : Red / #00FF00 : Green / #0000FF : Blue
color e25252
텍스트의 가로 정렬을 위해 사용하는 속성
left (default) / right / center / justify : 양쪽 정렬 / start, end
justify>
영문 글 뉴스 , 논문 등 에서 자주 볼 수 있는 정렬
주의 : 한글은 이대로하면 잘 작동하지 않음
이 값을 어떻게 주느냐에 따라 ,
border 외부의 여백 요소와 요소 사이의 여백
사방 중 하나를 지정해서 줄 수 있음 : margin top, margin bottom, margin left, margin right
margin 속성에 들어가는 값
퍼센트 (%) : 감싸고 있는 컨테이너 부모 컨테이너 의 width 대비 몇 인지
auto : 브라우저가 계산한 값 자동 적용 대부분 균등하게 분배 / 참고 : margin collapse
border 내부 여백 content 주위를 둘러싸는 여백
: padding top, padding bottom, padding left, padding right
padding 속성에 들어가는 값
수치 (length) = 음수 X. 양수만
퍼센트
★margin, padding 의 shorthand 는 자주 사용하므로 순서를 외워두는 것이 좋음
값을 하나만 적으면 ? 네 면 모두 적용 margin 10 px
두 개 적으면 : 위아래 , 양옆 margin 10 px 200 px ; margin 0 auto
세 개 적으면 : 위 , 양옆 , 아래 margin 10 px 200 px 10 px
여러개를 동시에 선택해서 동일한 스타일을 적용하고 싶을 때
and와 같은 의미
css Rule의 중복을 피할 수 있고 코드의 양을 줄일 수 있음
HTML 의 attribute 값으로 특정 요소를 선택할 수 있음
자주는 아니지만 종종 사용된다
[attr]
해당 attr 을 갖고있는 요소 선택a[target]
: <a>
태그 중 target 속성을 갖고있는 요소만 선택[attr=value]attr
의 값이 특정 value 인 요소 선택input[ submit ””]
: <input>
태그 중 type 속성의 값이 submit 인 요소만 선택[attr~=value]
[attr^=value]
[attr$=value]
[attr*=value]
*(star) : value
를 적어도 하나포함하고 있는 요소 선택 이해안가는 부분 영상 다시보면 빠름
상속
형제
- 인접 형제 결합자 ' + '★
바로 뒤에 있는 형제만 선택
예 ) span + p : span 바로 뒤의 p 만 선택
[선택자 1 ] ~ [선택자 2]
HTML 요소의 상태가 사용자의 동작에 따라 변경되었을 때 , 그에 따라 스타일을 변경할 수 있게 한다
javascript 없이 구현 가능
예 ) 브라우저에서 기본적으로 ) a 태그를 한번 클릭해서 방문 했으면 , 보라색으로 보임
문법 - selector 가상_클래스 { }
a:link : 아직 방문한 적이 없는 링크
a:visited : 방문한적이 있는 링크
:hover : 마우스를 올렸을 때
:active : 마우스를 눌러서 활성화되었을 때 . 즉 , 마우스를 누르는 ' 순간 . 클릭하려고 아직 누르기만 한 상태( a, button 등에 주로 사용)
:focus : 키보드의 tab 키로 특정 요소가 포커싱되었을 때 or input 을 입력하기 위해서 클릭했을 때
:disabled, :enabled, :checked
input 에서 주로 사용
:disabled : 요소에 disabled 속성을 줘서 비활성화된 input
:enabled : 활성화된 일반적인 , default) input
:checked : checkbox, radio 등에서 사용자가 선택한 요소
이 외에도 매우 많음 . MDN 등 참고
selector::가상_요소_선택자 { }
앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함
문법 : ★content 라는 CSS 속성을 반드시 함께 추가★해서 가상 요소의 컨텐츠를 만들어줘야 함
content 에는 일반 텍스트 , 이미지 등이 들어갈 수 있음
예 ) 인기있는 메뉴에 BEST 를 붙이고 싶을 때
::first letter , ::first line , ::selection
::first line : ( 브라우저에서 보이는 기준으로 ) 첫번째 라인
::first letter : 첫번째 글자
★주의 ) 만약 , ::before 와 함께 사용하면 , ::before 의 컨텐츠에 first letter 가 적용된다
::selection : 마우스로 드래그해서 선택한 영역
부모 요소에 적용되는 스타일은 자식 요소로 상속된다
예 ) body 에 font 를 적용하면 default 로 전체 요소에 적용된다
대부분의 요소가 기본적으로 상속되지만 , 일부 속성은 자식에게 상속되지 않는다
예) 배경 색 , 배경 이미지 , margin, padding 등
브라우저 기본 스타일 < 외부 스타일 시트 < 내부 스타일 시트 < inline 스타일
< id/class/attribute
등 직접 지정한 스타일