HTML&CSS20 CSS: 스프라이트 이미지 적용하기 html에서 이미지를 이용하는 경우는, image를 직접 연결해주는 것과, background를 이용하는 것이 있다. 관리자가 바꿔야하는 이미지의 경우에는 image로 적용하고, 사이트를 만들때 필요한 이미지는 background에 넣는다. (바꿀필요가 별로 없는 것) css에서는, background: url(~.jpg) no-repeat; 를 이용하여 이미지를 적용시키고, background-position: -30px -39px; 이걸로 x축과 y축의 좌표를 설정해준다. html이 이럴때, css에서는 이렇게 적용할 수 있다. 좌표는 이미지를 간편하게 자를수있는 사이트도 있는데 까먹었다.. 일단 포토샵으로 할때는, a의 좌표 -> 빨간영역의 좌표만큼 -(마이너스) -> -30px -39px b의 좌.. 2020. 6. 5. HTML&CSS: 테이블(표) 만들기(팁) 홈페이지에 나와있는 표들도 페이지를 만들 때 코딩하게 되는데, 테이블을 만들때 순서는 이렇다. 표의 행, 열을 센다. 전체 틀을 잡는다. (너무 많을 시에는 반정도 틀을 잡는다.) 셀을 한줄씩 병합한다. 내용을 입력한다. 스타일 꾸미기 ( 설명은 display:none으로 가림 ) .. thead와 tbody의 안에 입력 방식은 이렇다. 이름 나이 김멍멍 16 곰돌이 13 한줄씩 생각하면 된다. 병합시에는, 예를들어 위아래로 두칸을 합칠경우 rowspan="2"와 같이 입력후 다음의 줄을 지운다. 가로로 두칸을 합칠경우 colspan="2"를 입력후 바로 밑의 를 지운다. 2020. 5. 23. HTML: 페이지 구성시 기본적으로 지켜야할 것 # 제목태그의 적절한 사용 메인 제목에 을 써준다. 한개여야 한다. 전체적으로 봤을 때, 섹션별로 나뉜 것이라면 글자크기가 다르더라도 같은 h태그를 쓸 수 있다. 글씨가 크다고 h1이 아니다. h1~6을 뒤죽박죽 사용할 수 없다. 태그안의 내용은 사용자들이 알기 쉽게 작성해야 한다. sns아이콘이나 기타 아이콘들도 태그로 감싸줘야 한다. 연관성이 없으면, 같은 제목태그를 쓸 수 있다. (하위메뉴가 아닌거 같을때) # Entity code > > ;;;;;;;; · """"" " (공백) # table : 표의 제목 : 제목부분 : 결과(합계같은) : 데이터부분 : 하나의 행 : 제목 셀 : 내용 셀 colspan="" : 가로로 합칠때 rowspan="" : 세로로 합칠때 * 합칠때는 셀 태그도 삭제해줘.. 2020. 5. 19. CSS: 애니메이션 적용하기 애니메이션은 무언가를 움직이게 해줄수 있는 효과이다. html에는 박스를 하나두고, style에서 작성한다. @keyframes ani { from { transform: translate(0,0) } to { transform:translate(300px,0) } } @keyframes 애니메이션이름 { } 괄호안에는 from,to도 가능하지만 0% 30% 70% 100%처럼 구간설정도 가능하다. transform에는 적용할 효과를 작성해주면 되고, translate(이동)외에도 rotateY,X(회전), opacity, color등 다양하게 지정이 가능하다. 적용을 할 때는 .box { width:100px; height:100px; background-color:darkseagreen; animat.. 2020. 5. 14. 이전 1 2 3 4 5 다음
