반응형 Spec UP - Frontend/부스트코스_UI 개발83 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. CSS속성_box model(박스모델) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model Introduction to the CSS basic box model When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. devel.. 2020. 3. 25. CSS속성_백그라운드(Background) background 관련 속성 background-color 기본 값 : transparent(투명) 배경의 색상을 지정하는 속성입니다. background-image 기본 값 : none 배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다. 아래 예시에서 이미지 파일을 보면 투명한 배경의 부엉이인데 에 color 속성을 부여하여 핑크 배경의 부엉이가 보여지는것을 알 수 있습니다. background- repeat 기본 값 : repeat(반복) 이미지.. 2020. 3. 25. CSS속성_색상(Color) / HTML Color Names 폰트의 색상 값을 적용할 때 사용하는 속성은 color 속성입니다. color 속성은 값으로 색상 값을 받습니다. 색상 값은 다양한 형태로 적용할 수 있으며 값의 형태에 따라 선언하는 방식이 조금 다릅니다. 실무에서 자주 사용하는 값을 중심으로 다양한 색상 값의 적용법에 대해서 배워보도록 하겠습니다. Color 속성 ex:) h1 {color: 색상 값;} 색상 값 지정 방식 1. 컬리키워드 CSS 자체에서 사용 가능한 문자 식별자 입니다. red,blue,black 등 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다. CSS 1 에서는 16가지 색상 키워드를 지원하였고 CSS 2 에서는 오렌지(orange) 키워드가 추가되었으며 CSS 3 에서는 140가지 색상 키워드를 지원하고 있습니다... 2020. 3. 25. CSS 속성_단위 단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다. 절대 길이(absolute unit) 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1pixels = 1/96th of 1 inch ) - Default 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다. pt ( 1points - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 .. 2020. 3. 24. CSS 속성의 정의와 syntax(문법) 확인 방법 https://www.w3schools.com/ https://developer.mozilla.org/ko/ CSS 속성의 정의와 syntax (구문,문법) 확인 방법 CSS의 속성은 그 종류가 매우 다양하고, 지속해서 업데이트 되고 있습니다. 기존의 속성 명이 변경되기도 하고, 속성이 스펙아웃 되기도 하며, 새로운 속성이 추가되기도 합니다. 이러한 잦은 변화로 인해 CSS 관련 서적이나 강의를 통해서 모든 속성을 파악하는 데는 어려움이 있습니다. 위에 참조된 사이트의 정보를 통해 학습하는 것을 추천드립니다. CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다. 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다. 기본 값 상속 여부 애니메이션 가능 여부 사용 .. 2020. 3. 24. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
