CSS
text px-해상도에 따라 상대적으로 달라짐 %-부모 요소의 글자 크기를 기준 em-부모 요소의 글자 크기를 기준 특별한 설정이 없을 시 16px = 1em 해상도와 웹브라우저 크기를 헷갈리면 안됨 글자 간의 간격 letter-spacing 단어 간의 간격 word-spacing 음수 값도 가능 line-height : 줄간격 text-transform 단어 첫자를 대문자로 text-indent 문단 첫째줄 들여쓰기 column 속성으로 하나의 긴 텍스트를 신문기사처럼 나타낼 수 있다.
box 태그 전체의 크기 구하기 width + 2*(M,B,P) 상하 margin 은 겹치는 박스 둘 중 더 큰 margin 값으로 결정된다. box-sizing padding, border 값을 width가 삼킴 box-shadow inset 값으로 action 을 이쁘게 표현 가능 box 내부에 가상 content를 생성해서 block화 시키는 방법 :after {content:””; display:block; clear:both}
:display inline: 수평 정렬, 너비 지정 불가, margin, padding 적용 block: width: 100%, height: content. size 지정가능 inline-block: 지정시 수평 정렬되나 size 지정 가능 (몇몇 input 요소의 default) bl
background :배경 레이어링을 하려면 이미지 한 요소에 연속 등록 background-position (%)으로 좌표계 설정가능 back~-attachment:fixed
postition static 상대 위치 좌표 설정 relative 초기 위치에서 상하좌우 absolute 절대 위치 좌표 설정. 부모 요소에 relative를 정의해야 초기 위치 정해짐. 부유 객체는 inline 요소처럼 content의 크기가 block의 크기, 부모 요소에 다른 컨텐츠가 없을 경우 부모 요소의 높이 값이 0이 된다. fixed 화면을 기준으로 절대 위치 좌표 설정 z index 설정하지 않을 시 더 뒤에 적힐수록 더 앞에 나타난다.
table tag는 layout 용도로 사용하지 말자 container 내부에서 두 개의 block을 나란히 배치할 때 세로 길이가 더 긴 것에 relative를 부여해야 container가 전체를 감싸줌. 이때 좌측이 absolute라면 우측 block에 left:(좌측 content의 width)를 해주면 깔끔하다. margin-left와 둘 중 하나를 사용하면 됨.
class ?class name 작성 시 띄어쓰기를 이용해 여러 class로 구분 가능 class name 숫자로 시작할 수 없다.
시맨틱 태그는 div와 같은 블록 요소지만 의미를 가짐.
? 상속은 바로 아래의 자식한테만 물려주는가?
selector 불필요하게 전체 선택자를 사용하는 것은 속도 저하의 원인 형제 선택자: “A ~ B” A와 같은 계층에 있는B 요소들만 지정 인접 선택자: “A + B” A 바로 뒤의 B 요소 속성 선택자: [name=””] !important: 선택자 순서를 무시하고 최우선 순위
:align ?전체 mar,pad:0;을 해야하는지 margin:0 auto로 중앙 정렬이 맞는 건지. vertical-align은 image, form, table 요소에 작동 절대위치에서의 수직정렬: top:50%, transform:translateY(-50%) inline 요소는 컨텐츠 만큼의 영역만 차지하므로 text-align이 의미없다.
여러 개체를 나열할 때 절대 위치보다 margin 주는 게 효율적임. 형제 요소를 다룰 때 nth-child 등의 선택자 활용
대부분의 선언은 해당 요소의 자식요소에게만 적용된다. 후손 요소에게도 선언하려면 자식 요소에게도 적용시켜야 한다.
radius = 반지름 border-R 하면 설정된 값을 반지름으로 가진 원을 모서리에 만든다고 생각하면 됨 resize 는 overflow와 세트다. 구형 브라우저에서 사용해야할 때 속성 앞에 브라우저를 알려주기 위해 vender-prefix 작성
flex float 보다 flex를 더 많이 활용해야한다. flex layout은 container에 flex 선언 후 내부 요소들을 유연하게 배치하는 속성 align-items 는 자식요소들을 정렬