amind

- 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져있음 - em: 폰트의 전체 높이 - ex: 해당 폰트의 영문 소문자 x의 높이를 의미 - Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미, 서체에 따라 descender의 길이가 다름(g, j, p, q, y) - Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역을 의미( b, d, h, l)

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit; (font 스타일의 축약형 속성입니다.) font-style font-style 지정, 기본 값은 normal font-variant font-variant 지정 - 기본 값은 normal - small-caps: 소문자를 작은 대문자로 변형 font-weight font-weight 지정, 기본 값은 normal font-size/line-height font-size/line-height 지정, 기본 값은 normal font-family font-family 지정 *축약형 선언시 유의할 점 - font-size와 font-fam..

1. line-height: 텍스트 라인의 높이를 의미하는 것으로 행간을 재어할 때 사용됩니다. - 기본 값 : normal normal 기본값으로 브라우저의 기본 속성을 따릅니다. 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다. number font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다. length px, em 등 고정 수치로 할당할 수 있습니다. % font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다. 2. font-size: 글꼴의 크기를 결정합니다. - 실무에서는 동일한 브라우저에 여러화면을 공유해야하기 때문에 절대적 사이즈는 잘 쓰지 않습니다. - 브라우저에서 폰트 사이즈의 기본값을 미지정하면 글꼴의 기본 크기는 16px(= 1em)을 ..

1. font-family: 글꼴을 지정하는 속성입니다. - font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. 우선순위에 따라 차례대로 적용 됩니다. (한글 폰트만 선언할 경우에는 없을수도 잇기에 영어로도 같이 선언을 해주는것을 추천) generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font..

1. margin: 요소의 바깥 여백으로 padding과 마찬가지로 여백 값을 길이로 선언할 수 있습니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. auto 브라우저에 의해 계산된 값이 적용 됩니다.(가로축을 수평선 기준으로 정렬을 할 때 주로 많이 사용합니다./ 이때 꼭 필요한것이 width 라고 합니다.) - width : contents의 가로 값을 중앙정렬을 적용할 때 사용합니다. margin-top border 영역의 위쪽 여백을 지정합니다. margin-right border 영역의 오른쪽 여백을 지정합니다. margin-bottom border 영역의 아래쪽 여백을 지정합니다. margin-left bo..

1. padding: border 와 content 사이의 여백입니다.(요소의 안쪽 여백을 말합니다.) - padding-top content 영역의 위쪽 여백을 지정합니다. - padding-right content 영역의 오른쪽 여백을 지정합니다. - padding-bottom content 영역의 아래쪽 여백을 지정합니다. - padding-left content 영역의 왼쪽 여백을 지정합니다. ex.1) - padding 0px 10px 20px 30px 을 예시로 들어 보겠습니다. 0 10 20 30 의 순서가 top, right, bottom, left 의 시계방향순서로 선언을 해준다고 생각하면 됩니다. ex.2) 왼쪽과 오른쪽의 값이 같..

1. background 관련 속성 - background-color: 배경의 색상을 지정하는 속성 - background-image: 배경으로 사용할 이미지의 경로를 지정하는 속성(url의 경우 절대 경로, 상대 경로 모두 사용 가능합니다./만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다) - background-repeat: 이미지의 반복 여부와 방향을 지정하는 속성(기본값이 repeat이기 때문에 따로 설정하지 않으면, x, y축으로 반복 표시) - repeat: x, y축 으로 모두 반복합니다 - repeat-x: x축 방향으로만 반복합니다. - repea..

1. BORDER: 요소의 테두리를 의미합니다. - border: border-width border-style border-color (축약된 형태로 한번에 선언 할 수도 있고, 각각의 속성을 따로 따로 선언해줄 수도 있습니다. - border-width: 기본값, medium 선의 굵기를 지정하는 속성입니다. ==> border-width: [top] [right] [bottom] [left]; 속성에 따라 상하좌우 선의 굵기를 다르게 표현할 수 있습니다. - 키워드: thin, medium, thick - 단위: px, em, rem ... - border-style: 기본값, none 선의 모양을 지정하는 속성입니다. ==> border-style: [top] [right] [bottom] [le..

1. CSS에서 길이를 표현하는 단위 *절대 길이 - px(pixels): 1픽셀은 화면의 한개의 점과 같음/화면에서 고정된 크기 값을 가지고 있기 때문에 절대길이에 속합니다. - pt(points): 인쇄물이나 워드프로세서 프로그램에서 사용되어온 가장 작은 표준 인쇄 단위. *상대 길이 - %(percentage): 기본 글꼴 크기에 대해서 상대적인 값을 가집니다. - em(font size of the element): 선언한 해당 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위입니다.(상위 픽셀을 기준으로 값이 변경됩니다.) - rem(font size of the root element) -vw(1% of viewport's width)

1. 상속: 특정 스타일이 특정 요소만이 아니라 그 자손 요소에까지 적용되는 방식. *margin, padding, background, border ..? 등은 상속이 되지 않는 요소입니다.(상식선에서 생각해보면 가능한지 아닌지 대충 감이 옵니다! 생각, 생각!!) 2. cascading: 폭포가 내려오는 모양처럼 단계적인, 이러한 뜻을 가지고 있습니다. 구체성이 같은 규칙이 나오면 이러한 캐스케이딩의 단계적인 규칙을 따라 동작합니다. 2.(1): 중요도 & 출처 - 기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선합니다. - 출처는 제작자, 사용자, 에이전트로 구분합니다. 2.(2): 구체성 - 각 부분의 구체성을 계산한후 어떤 요소가 적용될지 생각해봐야 합니다. 2.(3..