HTML & CSS
위치와 관련된 프로퍼티
display : 요소가 보여지는 방식을 지정
display: block; : 항상 새로운 줄에서 시작하며 따로 너비를 지정하지 않아도 width 100%. div, h1-h6, p, header, section...
→ width, height, margin, padding 가능
disply: inline; : 새로운 줄에서 시작하지 않으며, 필요한 만큼의 너비만 가짐. content 만큼만. a, img, span...
→ width, height, margin-top, margin-bottom 불가능
display: inline-block; : inline과 block의 요소를 모두 가지고 있음
→ width, height, margin-top, margin-bottom 가능
display: none; : 해당요소가 브라우저에 출력되지 않음
position
position: static; 기본값. 좌표 프로퍼티 쓸 수 없음
relative; : 상대 위치. 기본위치를 기준으로 좌표 이동
absolute; : 부모나 조상 중 relative, absoluted, fixed가 선언된 곳을 기준으로 좌표 프로퍼티 적용
fixed; : 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정
z-index : 숫자 값이 클 수록 전면에 등장. static을 제외한 프로퍼티에서만 사용 가능
flexbox : 특별한 계산 없이 쉽게 정렬 가능
flex contaioner(부모 요소) : display: flex;를 추가한 요소가 부모요소가 되고, 그 아래의 요소가 자식요소가 됨
→ display: flex;를 사용하지 않으면 flex를 이용할 수 없음
flex item(자식 요소)
flex-direction : flex container 안의 item들의 방향을 정함(row;(기본값), row-reverse; column;, column-reverse;)
flex-wrap : flex item이 flex container를 벗어났을 때 줄을 바꾸는 속성(nowrap;(기본값, 줄 안 바꿔줌), wrap;)
justify-content : flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
align-items : flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함
align-content : flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬하는 방법을 정함
flex-grow : flex item의 확장과 관련된 속성. 기본 0
flex-shrink : flex item의 축소와 관련된 속성. 기본 1
flex-basis : flex item의 기본 크기를 결정함. 기본 auto
flex : flex-grow, flex-shrink, flex-basis의 축약형
상속과 우선순위
부모나 조상 요소에 적용된 css 프로퍼티를 자식, 후손 요소가 물려받는 것
그러나 모든 css 프로퍼티가 상속되는 것은 아님
상속되지 않는 프로퍼티를 상속하고자 한다면 inherit;
cascading :자동 우선순위
•
중요도 : css가 선언된 위치에 따라 중요도가 달라짐. 가장 우선순위는 <head>내의 <style>
•
명시도 : !important(최우선)
•
선언 순서 : 나중에 선언된 스타일이 우선 적용
Bootstrap
•
간편하고 빠르게 웹을 생성할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크
•
부트스트랩에서 정해둔 클래스 이름을 적기만 하면 자동으로 css가 적용됨
•
부트스트랩은 클래스 기반 → 원하는 스타일을 덮어씌우고 싶으면 클래스보다 상위 우선순위인 !important, #id, div.class를 활용