1. list-style-type 속성 - 목록과 불릿과 번호 스타일 지정


속성 값 

설명 

disc 

채운 원(●) 

circle 

빈 원(○) 

square 

채운 사각형(■) 

none 

불릿 없애기 

decimal 

1로 시작하는 십진수 

decimal-leading-zero 

앞에 0이 붙는 십진수 

lower-roman 

소문자 로마 숫자 

upper-roman 

대문자 로마 숫자 

lower-alpha 또는 lower-latin

소문자 알파벳 

 upper-alpha 또는 upper-latin

대문자 알파벳

armenian 

아르메니아 숫자 

georgian 

조지 왕조시대의 숫자 



2. list-style-image 속성 - 불릿 대신 이미지 넣기


<style>
    ul {
      list-style-image:url('images/dot.png');  /* 불릿으로 사용할 이미지 */
    }
</style>



3. list-style-positon 속성 - 목록에 들여 쓰는 효과


list-style-position : inside | outside;



4. list-style 속성 - 목록 속성 한꺼번에 표시


list-style-type과 list-style-positon, list-style-image 속성을 한꺼번에 표시할 수 있습니다.




<출처> Do it! HTML5+CSS3 웹 표준의 정석

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 그러데이션 효과  (0) 2017.04.11
[CSS 입문] 배경 색과 배경 이미지  (0) 2017.04.10
[CSS 입문] 문단 스타일  (0) 2017.04.05
[CSS 입문] 텍스트 스타일  (0) 2017.04.04
[CSS 입문] 글꼴 관련 스타일  (2) 2017.04.03
$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

input 태그가 1개이면 엔터키로 submit이 되지만 여러개이면 안된다고 한다 ->요건 나중에 찾아보자!

엔터키로 submit 하기위해서 가입하기 a태그에 id주고 click이벤트를 발생 시키니까 된당

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
        document.getElementById("id_of_button").click();
    }
});


소스 출처 : http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box

1. decoration 속성 - 글자 쓰기 방향 지정


decoration : ltr | rtl



2. text-align 속성 - 텍스트 정렬


속성 값 

설명 

start 

현재 택스트 줄의 시작 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.

end

현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.

left

왼쪽에 맞추어 문단을 정렬한다. 

right 

오른쪽에 맞추어 문단을 정렬한다. 

center 

가운데에 맞추어 문단을 정렬한다. 

justify 

양쪽에 맞추어 문단을 정렬한다. 

match-parent 

부모 요소를 따라 문단을 정렬한다. 단, 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 left-to-right인지, right-to-left인지에 따라 left나 right값으로 계산해 적용한다.



3. text-justify 속성 - 정렬 시 공백 조절


속성 값 

설명 

auto 

웹 브라우저에서 자동으로 지정한다. 

none 

정렬하지 않는다. 

inter-word 

단어 사이의 공백을 조절해 정렬한다. 

distribute 

인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다. 



4. text-indent 속성 - 텍스트 들여 쓰기


.indent1 {text-indent:15px;}  /* 15px만큼 들여쓰기 */
.indent2 {text-indent:5%;}  /* 5%만큼 들여쓰기 */



5. line-height 속성 - 줄 간격 조절


line-height : normal | <숫자> | <크기> | <백분율> | ingerit

보통 줄 간격은 글자 크기의 1.5~2배정도가 적당합니다.



6. text-overflow 속성 - 넘치는 텍스트 표시


속성 값

설명 

clip 

넘치는 텍스트를 자른다. 

ellipsis 

말 줄임표(…)로 잘린 텍스트가 있다고 표시한다. 


text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space : nowrap 속성을 함께 사용했을 경우에만 적용됩니다.


.content {
      border:1px solid #ccc;  /* 테두리 */
      width:300px;  /* 단락의 너비 */
      white-space:nowrap;  /* 줄바꿈 없음 */
      overflow:hidden;  /* 넘치는 부분 감춤 */
      text-overflow:ellipsis;  /* 말줄임표 */
    }






<출처> Do it! HTML5+CSS3 웹 표준의 정석

+ Recent posts