CSS 설명
단위
em : js의 기본 사이즈 단위(16px)
--> default는 16px이지만 실제로는 상속받은 크기의 단위를 em이라함
rem : 최상위 요소(html)의 글자의 크기
-->Html의 font가 16px(기본)인경우, 2rem은 32px
--> 통합해서 사이즈를 조절하기가 좋아 애용
px : 점, 화수 수
% : 상속받은 값의 %(퍼센트)를 적용조건 (가상 클래스) - 시각적으로 확인하지 못하나 특정상황이 있다고 간주하고 사용
(:Hover) : 마우스를 올리면
(:focus)
(:active)
(:link) : 한번도 사용하지 (방문하지) 않음
(:visited)
(:first-letter)
(:first-line)
(:before) - 내용찍기 전에
(:after) - 내용찍은 후에
Position:
• Static은 relative에서 평행이동 기능을 뺀 시스템상 자동 배치
• Fixed - window로 부터 고정위치(top과 left로 위치를 지정함, 나머지와 달리 window를 따라 이동)
• Relative - 문서로 부터 시스템상 자동으로 배치되어야 하는 위치로 부터 top,left만큼 이동한 위치
--> but 옮겨가더라도 원래 위치는 이미 할당되어버림 (어찌보면 공간낭비)
• Absolute - 문서로 부터 relative와 달리 기준위치로 부터 이동
• Sticky - 평소에는 상대위치이나 임계값 초과시 fixed로 변함속성
(Cursor:): 커서 모양
Display : Block- 폭을100%차지하면서 위에서 아래로 값이 쌓임
Display : Inline - 한 개체로 끝, 즉 한 줄의 여러 개의 값을 얹을 수 있다.
Border : 4방향의 크기, style(dotted,none,solid…), color
Margin:
Padding:
Content : 내용 적기
Opacity: 투명도 (0~1)
Float : 위에 띄우기 --> 위에 띄운다고는 하나 상대의 위치를 잡아먹고 별도로 사용하는 느낌으로 이미지를 삽입하고 옆에 글씨를 사용하는 신문같은 느낌으로 사용
Overflow: 나중에 제대로 알아보자! , hidden(over한거 숨김), visible(default), scroll(scroll바 생김)
--> float에서는 이것을 자식요소를 감싸는 데 사용함
--> overflow, overflow-x, overflow-y
Text-decoration : underline, line-through , overline
Text-transform : uppercase,lowercase,capitalize(첫문자 대문자)
Text-indent:(px) - 첫단어 들여쓰기
Letter-spacing:(px) - 단어마다 공간
Text-align : left, center, justify(양쪽 정렬)
--> inline요소도 글자처럼 표현되서 text-align에 영향을 받는다.
데이터로 일하는 개발자