본문 바로가기
반응형

분류 전체보기256

CSS속성_font(font 관련속성 축약형) font font 속성은 앞서 배운 font와 관련되어 있는 속성 (font-style, font-variant, font-weight, font-size/line-height, font-family )들을 한번에 선언할 수 있는 축약형 속성입니다. 다만 속성마다 선언 순서를 지켜야 하는 제약이 있고 반드시 꼭 넣어야하는 속성들이 있는 등 지켜야할 규칙이 많고 가독성이 좋지않아 실무에서 선호하는 편은 아닙니다. 속성값(기본값 : 각 속성들의 기본값) font-style : 기본값 : normal / italic / oblique font-variant : 기본값 : normal / small-caps font-weight : 기본값 : normal / bold font-size/lineheight : 기.. 2020. 3. 27.
CSS속성_font-variant(폰트 버라이언트) font-variant (폰트 버라이언트) 글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다. 속성값(기본값:normal) 1. normal : 기본 값 2. small-caps : 소문자를 작은 대문자로 변환합니다. html 문서에는 "Small-Caps" 소문자가 섞여 입력되어있지만, 실제 브라우저에 보이는 화면에는 "SMALL-CAPS" 모두 대문자로 변환되어있고 소문자로 입력했던 문자들은 실제 대문자보다는 조금 작은 크기로 보이는것을 확인할 수 있습니다. 2020. 3. 27.
CSS속성_font-style(글꼴스타일) font-style 속성값 (기본값:normal) 1. normal : font-family 내에 분류된 기본 값 2. italic : 기울임꼴 3. oblique : 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다. oblique ; 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어집니다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능합니다. 2020. 3. 27.
CSS속성_font-weight(글꼴 굵기) font-weight 글꼴의 굵기를 설정하는 속성입니다. 속성값 (기본값 normal) 1. normal : 기본값 (400) 2. bold : 글꼴을 굵게 표현(700) 3. bolder : 부모 요소보다 두껍게 표현 4. lighter : 부모 요소보다 얇게 표현 5. number : 100,200,300,400,500,600,700,800,900 (클수록 더 두껍게 표현) 실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다. 물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 합니다. 수치를 이용한 font-weight는 폰트 자체에서 지.. 2020. 3. 27.
CSS속성_font-size(폰트사이즈) font-size 속성 속성 값 (기본값:medium : 16px) 1. 키워드 : medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger 2. length : px, em 등 고정 수치로 지정합니다. 3. % : 부모 요소의 font-size 기준의 퍼센트로 지정합니다. absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있습니다. relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다. length px, em, rem 등의 단위를 이용하여 고정된 .. 2020. 3. 27.
CSS속성_line-height(행간) 장문의 글에서는 가독성을 위해서 글 사이의 간격을 띄우기도 합니다. 이때 행간을 조정한다고 하는데요. line-height 속성을 이용해 이 행간을 조정할 수 있습니다. 그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서 행간을 조정할 수 있는 것입니다. line-height line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할때 이용합니다. 행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있습니다. 줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만, line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스].. 2020. 3. 26.
CSS속성_font-family & generic-family font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용합니다. Font-family 속성 ex : font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 .. 2020. 3. 26.
CSS속성_Typhography(타이포그래피) Typhography 속성 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다. •em 폰트의 전체 높이를 의미합니다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) 2020. 3. 26.
CSS속성_width & height (Boxmodel part.2) width 속성 width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성으로 정확히는 content 영역의 너비를 지정하는 것을 의미하며 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다. width 속성 값 (기본값 0) 1. auto : 브라우저에 의해 자동으로 계산하여 적용합니다. 요소의 레벨 기본 특성에 따라 다르게 동작합니다. 2. length : 고정 값으로 지정합니다. (px, em ...) 3. percent : 부모 요소의 width의 상대적인 크기를 지정합니다. width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (c.. 2020. 3. 26.
CSS속성_padding과 margin의 차이점 비교 border의 경계가 명확하게 표시되지 않으면 어떤 속성으로 필요한 여백을 표현할지 헷갈릴 수도 있습니다. + (양수값) - (음수값) auto 단위 margin o o o px, % ... padding o x x px, % ... 음수값 사용 가능 여부 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 .. 2020. 3. 26.
반응형