본문 바로가기
반응형

Spec UP - Frontend/부스트코스_UI 개발83

CSS속성_text-decoration(텍스트 데코레이션) text-decoration 속성 텍스트의 장식을 지정하는 속성입니다. ( text-decoration-line / text-decoration-color / text-decoration-style ) 기본 값 : none currentColor solid text-decoration-line (텍스트 데코레이션 라인) none : 텍스트 꾸밈을 생성하지 않음 underline : 밑줄로 꾸밈 설정 overline : 윗줄로 꾸밈 설정 line-through : 중간을 지나는 줄로 꾸밈 설정(취소선) text-decoration-color (텍스트 데코레이션 컬러) 색상값을 사용하여 원하는 색상을 지정할 수 있습니다. currentColor는 CSS 내에서 색상 값으로 사용할 수 있는 키워드입니다. te.. 2020. 3. 27.
CSS속성_text-indent 문서나 코드를 살펴보면 새로운 문단의 시작에서 들여쓰기를 많이 사용합니다. 들여쓰기는 문단의 처음 왼쪽 글머리에 빈칸을 만들어 가독성을 향상하는 효과가 있습니다. text-indent를 이용해서 문장의 첫 줄을 들여쓰기할 수 있습니다. text-indent 속성 속성값 (기본값:0) length: px, em 등 고정 수치로 지정하며 음수 사용이 가능합니다. 음수 값 사용 시 왼쪽으로 이동합니다. % : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다. 2020. 3. 27.
CSS속성_text-align(텍스트 정렬) text-align 속성 텍스트의 정렬을 지정하는 속성입니다. text-align은 인라인 요소의 수평 정렬에 사용됩니다. 이 속성 또한 div와 같은 블록 레벨 요소에는 적용되지 않습니다. 기본 값은 left이지만 경우에 따라 다릅니다. 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고, RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. 속성값 1. left : 텍스트를 왼쪽에 정렬 2. right : 텍스트를 오른쪽에 정렬 3. center : 텍스트를 중앙으로 정렬 4. justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬하지않음) text-align과 display의 .. 2020. 3. 27.
CSS속성_vertical-align(버티컬얼라인) css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다. 그 중 vertical-align 속성을 이용하여 수직 정렬을 할 수 있습니다. 이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다. 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다. vertical-align 속성 요소의 수직 정렬을 지정하는 속성입니다. (인라인레벨요소에 적용 가능) 속성값(기본값:baseline) 1. length : 요소의 길이만큼 올리거나 내리며 음수 값도 사용 가능합니다. (px값 사용 시 baseline을 기준으로 이동) 2. % : 요소를 line-height 기준으로 이동하며 음수 값 사용 가능합니다. 3... 2020. 3. 27.
CSS속성_webfont(웹폰트):@font-face 실무에서 폰트 관련해서 주로 사용되는 명칭으로 ' 시스템 폰트 ', ' 이미지 폰트 ', ' 웹 폰트 '가 있습니다. 시스템 폰트는 font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우를 말하고, 이미지 폰트는 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미합니다. 정확히 얘기하면 이미지 폰트는 폰트가 아니고 이미지 입니다. 웹 폰트는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말합니다. @font-face 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성입니다. 속성값(기본값:없음) 1. font-family : 글꼴의.. 2020. 3. 27.
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.
반응형

티스토리툴바