css3

[2021/12/20]국비지원 CSS3 2-(4) list-style

목록에는 총 3종이 있는데, 비 순서형 ul 순서형 ol 정의형 dl 이 중에서 이 list-style이 통용되는 목록은 ul과 ol이다. list-style-position : list 심벌(지금으로 치면 검고 작은 원)의 위치 outside : default. list 항목은 그대로 있고 그 앞에 심벌이 나타남. inside : 심볼이 붙을 경우 항목들이 들여 쓰기 됨 list-style-type : 심벌의 모양 disc : default. 상기의 심볼형태 circle : 속이 빈 원형 심벌 square : 검은 사각형. default 사이즈 upper-alpha : 영어 알파벳 대문자 lower-alpha : 영어 알파벳 소문자 list-style-image : 잘 쓰이지는 않지만 이미지로 심벌을 ..

[2021/12/20]국비지원 CSS3 2-(3) overflow

overflow : 일정한 박스, 영역 안의 내용이 그 바깥까지 과하게(over) 넘치는(flow) 것에 대한 속성. x축, y축 통합 설정 overflow-x : x축으로 넘침 overflow-y : y축으로 넘침 hidden : 무조건 숨김 scroll : x축 y축 둘 다 스크롤바가 생김 auto : 자동으로 조정 (x축으로 넘칠 것 같으면 x축 스크롤바, y축으로 넘칠 것 같으면 y축 스크롤바) visible : default. 영역 무시하고 전체 표시 overflow 속성의 적용 결과 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스 크기만큼만 보이고 나머지 콘텐츠는 보이지 않도록 숨길 수 있다. 박스의 크기와 콘텐츠의 내용과 상관없이 박스에 스크롤바를 생성할 때는 overflow:scroll;..

[2021/12/20]국비지원 CSS3 2-(2) Background

background property : 통합 가능하며, 그 순서는 color부터 attachment의 순으로 이뤄짐 background-color : 배경색. 색상은 red blue black과 같은 naming color 또는 rgb, rgba, hsl, hsla과 같은 색상코드로 입력 가능 background-image : 배경에 넣을 이미지 background-repeat : 배경이미지 등을 반복적으로 표현할 것인가, 에 대한 것 한번만 하겠다 : no-repeat 반복적이어야 한다 : repeat x축반복 : repeat-x y축 반복 : repeat-y background-position : 위치값 설정 default = left top, 0 0 50% 50% = center center 100..

[2021/12/20]국비지원 CSS3 2-(1) sprite img

sprite img : icon 사이즈의 작은 이미지들을 동일 간격으로 띄워 배치하여 하나의 파일로 만든 이미지파일 ex ) 위와 같은 이미지파일을 포토샵 등에서 X축 Y축 안내선을 이동시켜가면서 원하는 위치의 시작점을 잡고, 전체 이미지사이즈의 모서리에서 거리가 얼마나 떨어졌는지 계산하여 그 거리만큼의 마이너스값을 입력해주면 원하는 이미지만 골라서 출력할 수 있음 이 이미지를 이용하기 위해 나는 하기와 같이 코드를 짰다. 날씨 비 맑음 구름 번개 결과물 일일이 거리를 재서 입력한다는 게 좀 많이 귀찮긴 한데 (포토샵 등의 이미지 편집 프로그램이 매우 필요해서) 특히 N사 메인의 경우 거의 sprite 이미지로 구성되어 있음

[2021/12/17]국비지원 CSS3 1-(4) font 스타일 property

CSS3 font 스타일 property , (comma) : 그룹 선택자 body default font-size : 16px, 100%, 1em 기본 글꼴 : 굴림, serif명조, sans-serif고딕 font property들을 { font : ; }으로 한 번에 정리하고자 할 경우 : font-weight font-style font-variant font-size line-height font-family → font property에 대해서는 이렇게 쓰지 않는 것이 낫다. 문단 첫 줄만 들여 쓰기 하려 할 경우 text-indent : 0px ( 내어쓰기 -0px ) text-decoration : underline 밑줄, overline 윗줄, line-through 취소선 ( 취소선의 ..