개발자 도구 단축키 : 컨트롤 시프트 i
color 표현 >
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
background 표현>
- background color
- background color :
3. background repeat : 배경 이미지 반복 여부
no repeat / repeat / repeat x( 가로 반복 ), repeat y( 세로 반복) - background position : 배경 이미지의 위치 지정
기본 키워드 : top, bottom, left, right, center
퍼센트 , 길이 등 지정
예 ) right 20 %, right top, center top
text align >
텍스트의 가로 정렬을 위해 사용하는 속성
left (default) / right / center / justify : 양쪽 정렬 / start, end
justify>
영문 글 뉴스 , 논문 등 에서 자주 볼 수 있는 정렬
주의 : 한글은 이대로하면 잘 작동하지 않음
- text justify: inter cluster; 추가
- text align last : 텍스트의 마지막줄의 text align 을 지정
box sizing 속성>
이 값을 어떻게 주느냐에 따라 ,
요소 박스 의 총 크기를 화면에 표시하는 방식이 달라짐
- content box (default) : 오직 content 의 크기만 width, height 로 지정
총 width(height) = content 크기 (width, height 속성으로 준 값 ) + padding + border - border box : padding, border 를 포함하여 크기 지정 .
총 width(height) = width, height 속성으로 준 값 (content, padding, border 가 다 포함되어있음
각 조직마다 다르지만 ) 최근에는 개발자가 디자인에 맞춰서 코드를 작성하고 계산하기 편하기 때문
margin >
border 외부의 여백 요소와 요소 사이의 여백
사방 중 하나를 지정해서 줄 수 있음 : margin top, margin bottom, margin left, margin right
margin 속성에 들어가는 값
퍼센트 (%) : 감싸고 있는 컨테이너 부모 컨테이너 의 width 대비 몇 인지
auto : 브라우저가 계산한 값 자동 적용 대부분 균등하게 분배 / 참고 : margin collapse
padding >
border 내부 여백 content 주위를 둘러싸는 여백
사방 중 하나를 지정해서 줄 수 있음
: padding top, padding bottom, padding left, padding right
padding 속성에 들어가는 값
수치 (length) = 음수 X. 양수만
퍼센트
★margin, padding 의 shorthand 는 자주 사용하므로 순서를 외워두는 것이 좋음
top right bottom left margin 10 px 400 px 10 px 400 px
값을 하나만 적으면 ? 네 면 모두 적용 margin 10 px
두 개 적으면 : 위아래 , 양옆 margin 10 px 200 px ; margin 0 auto
세 개 적으면 : 위 , 양옆 , 아래 margin 10 px 200 px 10 px
그룹 선택자 , >
여러개를 동시에 선택해서 동일한 스타일을 적용하고 싶을 때
and와 같은 의미
css Rule의 중복을 피할 수 있고 코드의 양을 줄일 수 있음
attribute 선택자>
HTML 의 attribute 값으로 특정 요소를 선택할 수 있음
자주는 아니지만 종종 사용된다
[attr]해당 attr 을 갖고있는 요소 선택
예 )a[target]:<a>태그 중 target 속성을 갖고있는 요소만 선택[attr=value]attr의 값이 특정 value 인 요소 선택
예 )input[ submit ””]:<input>태그 중 type 속성의 값이 submit 인 요소만 선택[attr~=value]
attr 의 값이 특정 value 가 아닌 요소 선택[attr^=value]
캐럿 ) : value 로 시작하는 요소 선택 (prefix)[attr$=value]
달러 ) : value 로 끝나는 요소 선택 (postfix)[attr*=value]
*(star) : value를 적어도 하나포함하고 있는 요소 선택
결합 선택자>
이해안가는 부분 영상 다시보면 빠름
상속
- 자손 결합자 ' 공백 '★
하위에 있는 태그 , 즉 자식 태그들로 범위를 좁혀서 선택 - 자식 결합자 ' > '★
'바로 아래' 자식 태그만 좁혀서 선택
형제
- 일반 형제 결합자 ' ~ '★
내 뒤에 있는 형제 선택(형제 = 같은 레벨)
예 ) span ~ p : span 뒤에 있는 p
- 인접 형제 결합자 ' + '★
바로 뒤에 있는 형제만 선택
예 ) span + p : span 바로 뒤의 p 만 선택
- 형제를 선택할때는 순서 가 중요함
선택자 1 의 뒤에 ’ 있는 선택자 2 를 선택
[선택자 1 ] ~ [선택자 2]
가상 클래스 선택자 (Pseudo Class Selector)>
-
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 등 참고
가상 요소 선택자 (Pseudo Element Selector) >
- 실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용
문법 :selector::가상_요소_선택자 { }
참고 ) CSS 구버전에서는 이 아닌 였음
- ::before , ::after**
앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함
문법 : ★content 라는 CSS 속성을 반드시 함께 추가★해서 가상 요소의 컨텐츠를 만들어줘야 함
-
content 에는 일반 텍스트 , 이미지 등이 들어갈 수 있음
예 ) 인기있는 메뉴에 BEST 를 붙이고 싶을 때 -
::first letter , ::first line , ::selection
::first line : ( 브라우저에서 보이는 기준으로 ) 첫번째 라인
::first letter : 첫번째 글자
★주의 ) 만약 , ::before 와 함께 사용하면 , ::before 의 컨텐츠에 first letter 가 적용된다
::selection : 마우스로 드래그해서 선택한 영역
★CSS Cascading : CSS 적용 우선순위 >
- Cascading : 폭포같은 , 계단식의 , 위에서 아래로 흐르는 , 연속적인
- CSS 개발을 할 때 흔히 겪을 수 있는 실수 : 요소에 CSS 를 줬지만 적용되지 않을 때
☆상속
부모 요소에 적용되는 스타일은 자식 요소로 상속된다
예 ) body 에 font 를 적용하면 default 로 전체 요소에 적용된다
대부분의 요소가 기본적으로 상속되지만 , 일부 속성은 자식에게 상속되지 않는다
예) 배경 색 , 배경 이미지 , margin, padding 등
☆우선순위
- 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석한다
- 예 )
브라우저 기본 스타일 < 외부 스타일 시트 < 내부 스타일 시트 < inline 스타일
- 코드 위치 : 제일 마지막에 선언된 코드 CSS 이 적용된다
- Specificity( 명시도 ) : 적용 범위가 더 구체적일수록 우선적으로 적용된다
- 단순 tag 로 지정된 스타일
< id/class/attribute등 직접 지정한 스타일 - >id 는 class 보다 우선이다
- 부모로부터 상속받은 속성은 내가 지정한 속성이 따로 없을 때만 적용된다.
즉 , 내 요소에서 구체적으로 CSS rule 을 정해주면 부모의 것이 아닌 나의 것을 따른다
☆상속 제어 를 위한 전역 속성 값
- CSS 속성의 값 ( 으로 아래 특수값을 지정해주면 , 상속되어 적용되는 CSS 를 의도적으로 끊어줄 수 있음
- initial : CSS 를 기본값 브라우저 초기값 으로 지정
예 ) color: initial; all: - inherit : 모든 rule 을 무시하고 무조건 상속을 받아 부모의 값을 따라가고자 할 때
예 ) color : inherit; color 속성은 무조건 부모를 따라가게 된다 - unset
지금까지 영향받은 여러 CSS 를 없애고 깔끔하게 초기화하고싶을 때 사용
부모로부터 상속받을 값이 존재할 때 : inherit
부모로부터 상속받을 값이 없을 때 : initial
