리스트 만들기 목록의 기호와 번호 스타일 지정하기 (list-style-type) HTML에서 리스트를 작성할 때, 항목의 스타일을 변경하는 방법 중 하나는 list-style 속성을 사용하는 것입니다. 이 속성은 UL, OL, DI 태그에 적용됩니다. 순서가 없는 목록의 경우, 목록 앞에 다양한 기호를 넣을 수 있고 순서 목록에는 번호 스타일을 지정할 수 있습니다. 기호 스타일 속성 값 설명 disc(●) 검은색 채운 원 circle(○) 흰색 빈 원 square(■) 검은색 채운 사각형 none 기호 없음 HTML 항목 1 항목 2 항목 3 항목 1 항목 2 항목 3 항목 1 항목 2 항목 3 항목 1 항목 2 항목 3 숫자 스타일 속성 값 설명 예시 decimal 일반 십진수 1, 2, 3, 4, ..
HTML, CSS
공백과 줄바꿈 지정(white-space) normal: 여러 개의 공백이나 개행 문자를 하나로 합칩니다. (기본 값) nowrap: 공백이나 개행 문자를 무시합니다. pre: 원본 텍스트 그대로 표시합니다. pre-wrap: 원본 텍스트 그대로 표시하지만, 줄 바꿈을 인식합니다. pre-line: 줄 바꿈 문자를 기준으로 줄을 나눕니다. normal(가로의 오른쪽 끝에 닿으면 자동으로 줄 바꿈 합니다.) HTML 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세 CSS .normal{ white-space:normal; width: 200px; height: 50px; } nowrap(줄 바꿈을 하지 않고 박스 벗어나 표시됩니다...
넘치는 텍스트 표기하기 overflow visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값) hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다. auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다. scroll : 넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다. inherit : 부모 요소로부터 값을 상속받습니다. visible (넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다.) HTML 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세 CSS .visible { overflow: visible; width: 200px; height: 50px; b..
텍스트 쓰는 방향 지정 (direction) 사용법 direction: ltr | rtl ltr : 왼쪽에서 오른쪽으로 텍스트를 표시합니다. (기본 값) rtl : 오른쪽에서 왼쪽으로 텍스트를 표시합니다.
텍스트에 그림자 효과 넣기 (text-shadow) 사용법 text-shadow: horizontality vertical blur color | none | initial | inherit horizontality : 그림자 수평 위치 (필수) vertical : 그림자 수직 위치 (필수) blur : 흐림 정도 (값을 정하지 않으면 0) color : 그림자 색 (값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앤다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 수직 그림자(horizontality) HTML 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 ..
텍스트 들여쓰기 HTML 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 CSS .indent{ text-indent : 5%}; 텍스트 내어쓰기 HTML 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 CSS .indent{ text-indent : -5%};
텍스트 정렬(text-align) left : 왼쪽 정렬 right: 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 match-partent : 부모 요소에 따라 문단 정렬 왼쪽 정렬 HTML 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 CSS .left{ text-align : left }; 오른쪽 정렬 HTML 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 CSS .right{ text-align : right..
font 속성 HTML 캡션에 어울리는 글꼴 아이콘에 어울리는 글꼴 드롭다운 메뉴에 어울리는 글꼴 CSS .p1{font:22px/25px "맑은고딕"} .p2{font:bold italic 12pt} .p3{font:120%/10px bold} 지정된 글꼴 스타일 적용 HTML 캡션에 어울리는 글꼴 아이콘에 어울리는 글꼴 드롭다운 메뉴에 어울리는 글꼴 대화상자에 어울리는 글꼴 작은캡션에 어울리는 글꼴 상태표시줄에 어울리는 글꼴 CSS .caption{font:caption} .icon{font:icon} .menu{font:menu} .message_box{font:message-box} .small_caption{font:small-caption} .status_bar{font:status-bar}
