분류 전체보기(404)
-
4-6. Display 속성과 Visivility 속성 알아보기
1. Display 속성 알아보기 "display" 속성은 css의 많은 속성 중에서도 아주 중요합니다. 각 HTML 요소는 블록 혹은 인라인으로 나타나게 되는데, display 속성으로 "block" 혹은 "inline"을 의도적으로 지정할 수 있습니다. 뿐만 아니라 마크업된 요소가 원래 존재하지 않는 것처럼 "none"을 지정할 수도 있습니다. 이외에 많은 값들이 새로 추가되었지만, 익스플로러의 경우는 익스플로러 버전9 이상의 브라우저에서만 안정적으로 지원되며 아직은 그 사용빈도가 높지 않습니다.1-1. "display" 속성으로 block, inline 값 지정하기HTML에서 는 블록 요소이고, 은 인라인 요소지만, 다음 예제에서는 css에서 요소가 ㅇ니라인으로 요소는 블록으로 표현되도록 만들었습니..
2018.02.06 -
4-5. 목록(List) 스타일 - 2
1. list-style-position으로 목록 지정하기목록이 지정된 블록 영역의 "안쪽(inside)" 혹은 "바깥쪽(outside)"에 블릿을 표현합니다. 다음의 예제에서 그 결과를 확인할 수 있습니다. insidelist item1list item2list item3outsidelist item1list item2list item3 2. list-style-image으로 이미지 블릿 지정하기"list-style-image" 속성은 블릭을 이미지로 표현할 수 있게 하는데, 그 이미지의 위치를 섬세하게 지정할 수는 없기 때문에 보통 실무자들은 "background" 속성을 활용하는 편입니다. "list-style-image" 속성을 사용할 경우 불러 올 이미지의 경로는 "url()"로 지정합니다. l..
2018.02.05 -
4-5. 목록(List) 스타일 - 1
1. list-style-type으로 목록 타입 지정하기목옥에는 과 이 있습니다. "비순차적"인 목록은 항목 앞에 disc, circle, square 형태의 블릿(bullet) 표시가 생깁니다. "순차적"인 목록은 각 항목 별로 숫자가 붙는데, 알파벳이나 로마숫자로 변경할 수도 있습니다. css에서는 , 관계없이 모든 형태의 블릿과 넘버가 가능합니다.1-1. 비순차적 목록(Unordered List, ul) 타입 지정하기 이때 지정할 대상은 개별 항목인 보다는 모체에 해당하는 이나 요소에 지정하는 것이 좋습니다. 이와 같은 타입들은 각 항목을 꾸미기 위한 것이기보다 항목을 그룹화(Grouping)하려는 목적이 더 크기 때문입니다. 1-2. 순차적 목록(Ordered List, ol) 타입 지정하기요소를..
2018.02.02 -
17. 한 해 지난 날 수를 계산
Q. 년/월/일을 입력받아 한 해의 지난 날 수를 계산하는 프로그램을 작성하세요.ex) 년 : 2018, 월 : 1, 일 : 20 입력 받았을 때, "2018년의 20일 째"라고 출력 S. HTML5, javascript, JQuery-3.2.1을 사용하여 작성됐습니다. Q. 년/월/일을 입력받아 한 해의 지난 날 수를 계산하는 프로그램을 작성하세요. ex) 년 : 2018, 월 : 1, 일 : 20 입력 받았을 때, "2018년의 20일 째"라고 출력년도를 입력하세요.월을 입력하세요.일을 입력하세요.결과
2018.02.02 -
4-4. 서체(font)와 글(text) 스타일 - 8
1. 수직 정렬(Vertical Align) 속성"vertical-align" 속성은 인라인 요소끼리의 위, 아래 간격을 맞출 수 있습니다. 값으로 baseline, sub, super, top, text-top, middle, bottom, text-bottom 등의 다양한 값을 가지고 있으며, 백분율(%)을 지정할 수도 있고, 정밀하게 작업할 경우 길이값을 적용할 수도 있습니다. 2. 글의 줄바꿈 처리하기인라인 요소인 "글(text)"은 자신을 감싸고 있는 상위 블록 요소의 "width(가로)"를 넘어서게 되면 자연스럽게 줄을 바꾸게 됩니다. 이렇게 줄이 바뀌는 것에 대해서 다음의 두 가지 속성을 살펴봅니다.2-1. 단어를 깨뜨려 줄바꿈을 지정하는 "word-break" 속성"width"를 지정한 영..
2018.02.01 -
16. 1000이하의 소수
Q. 1000이하의 소수를 나열하세요. S. HTML5, javascript, JQuery-3.2.1을 사용하여 작성됐습니다. Q. 1000이하의 소수를 나열하세요.결과
2018.02.01