HTML5

[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 취소선 ( 취소선의 ..

[2021/12/17]국비지원 CSS3 1-(3) 하위선택자

CSS3 element와 element는 조합해서 쓸 수 있다. 상위 element의 class 또는 id와 하위 element 조합 방식도 가능하고, 상위 element 중위 element 하위 element 이런 방식 역시 ok 하위선택자 하위 선택자에 대해 알아봅시다. 2선택자와 선택자는 서로 조합하여 사용할 수 있다. 3이 때 하위 선택자 방식을 이용할 경우 특정 선택자 안에 포함된 하위 요소들을 선택하여 스타일을 지정할 수 있습니다. 결과물

[2021/12/17]국비지원 CSS3 1-(2) 표시 우선순위

CSS3 무엇도 설정하지 않은 단순 element, type : 우선순위 1점 class : 우선순위 10점 id : 우선순위 100점 style="" : inline 스타일로 따로 지정한 경우 우선순위 1000점 중괄호 { } 안에 항상 ; 필수 css 디자인 표현 css는 기본적으로 선택자, 속성, 값을 가진다. 내부 스타일시트, 외부 스타일시트, 인라인 스타일, 태그에 직접 삽입하기 선택자에는 스타일 적용대상 지정하고 {} 안에 적용할 스타일을 넣는다 스타일은 속성을 기록하고 :로 구분한 후 값 입력한다 값을 기록한 뒤에 ;로 마무리 하고 추가로 다른 속성과 값을 계속 넣을 수 있다 ▶ CSS3, javascript 등 다른 언어의 텍스트 양이 얼마 되지 않을 때는 html과 같은 창에 입력해도 괜..

[2021/12/17]국비지원 CSS3 1-(1)

CSS3 css 주석 /* */ selector { property : value ; } 동일한 property에서 값만 다르게 반복할 경우 최종 값으로 출력 단계적으로 적용되는 스타일 단계적으로 적용되는 스타일 단계적으로 적용되는 스타일 결과물