웹프로그래밍 css(27) text-indent,text-decoration

🔥오늘의 목표🔥

텍스트 들여쓰기를 하는 text-indent에 대해서 알아보자.
텍스트 밑줄 속성에 관한 text-decoration 을 알아보자. 

📕 text-indent

• 텍스트의 들여쓰기를 지정하는 속성이다.

text-indent: length | initial | inherit;

📒 속성값

• length : px, em 등 고정 수치로 지정. 음수 가능하다.
• % : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.

📕 text-decoration

• 밑줄을 지정하는 속성이다.

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness | initial | inherit;

• 밑줄 위치 , 밑줄 색상, 선의 스타일, (지원한다면)선의 굵기순서로 지정한다.

📒 text-decoration-line 속성값

• none : 텍스트 꾸밈을 생성하지 않음 ( 기본값 )
• underline : 밑줄로 꾸밈을 설정
• overline : 윗줄로 꾸밈을 설정
• line-through : 중간을 지나는 줄로 꾸밈을 설정

📒 text-decoration-color 속성값

• 색상을 지정한다.

📒 text-decoration-style 속성값

• solid : 한줄 스타일 ( 기본 값 )
• double : 이중선 스타일
• dotted : 점선 스타일
• dashed : 파선 스타일
• wavy : 물결 스타일

📒 text-decoration-thickness 속성값

• auto : 기본 값
• from-font : 글꼴 파일에 저장된 정보를 사용한다.
• length : em, px, rem을 사용해 지정한다.
• % : 현재 글꼴에서 텍스트 장식 선의 두께를 1em 기준으로 지정합니다. 백분율은 상대 값으로 상속되므로 글꼴의 변화에 따라 크기가 조정됩니다.

✍️ 부모 자식간의 속성

• 기본적으로 부모요소에서 상속되지만, 자식 요소가 inlin-block이나 테이블, absolute, float속성을 가지고 있으면 상속되지 않는다.

display: inline-block;
position: relative;
float: left;
display: inline-flex;

더알아보기

💧오늘의 느낀 점💧

할말이 없다 헤헤ㅔㅎ