본문 바로가기
반응형

Spec UP - Frontend131

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.
CSS_캐스케이딩 (Cascading) 캐스케이딩이란? cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다. cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다. (Ex. 구체성) 캐스케이딩 규칙 1. 중요도(!important)와 출처 기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선시한다. 출처는 제작자(실제 제작 과정에서 개발자가 작성한 CSS), 사용자(웹페이지를 방문한 일반 사용자가 작성한 CSS), 사용자 에이전트(User Agent-일반사용자의 환경, 즉 브라우저에 내장된 CSS를 의미)로 구분한다. 우선순위 1. 사용자 !important 스타일 2. 제작자 !.. 2020. 3. 24.
CSS_상속 CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같습니다. 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다. 상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념입니다. 상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있습니다. 예를 들어 태그 안에 자식태그로 태그를 가진 상태에서 태그에 스타일이 지정 되면 태그는 부모인 의 스타일을 상속받습니다. 모든 속성이 다 상속되는 것은 아니며 대표적으로 박스모델속성(margin,padding,background,border)은 상속되지않습니다. 이때 상속받은 속성은 구체성을 가지지 못합니다. (0,0,0,0보다도 적습니다.) "CSS.. 2020. 3. 23.
반응형

티스토리툴바