Coding/HTML CSS5 CSS Image Sprite를 이용한 유령 잡기 게임 ~ ! 안녕 ~! 오늘은 이미지 스프라이트를 이용해서 유령 잡기 게임을 만들었다 ! 이미지 스프라이트란 ? 여러개의 이미지들을 합쳐서 하나의 이미지 파일로 만들어서 관리하는 것입니다 ^^ 예시를 한 번 볼까요 ~? 저기 용맹하게 싸우고 있는 용사는 좌, 우, 정지 시에 보여지는 모습이 다른데, 이것은 놀랍게도 ?!?! 단 한장의 이미지 !!!! 이렇게 붙어있는 이미지를 첨부하는 것입니다 ! 그렇다면 어떻게 하는 것이냐 ? 빈 태그에 이미지를 첨부한 뒤, width와 height를 지정하여, 원하는 모습만 보여주는 아주 음흉한 수법을 취합니다 ! 이렇게 하나의 이미지로 여러 이미지를 보여주면, 로드 시에 끊김이 발생하지 않는다는 사실 ! 하지만 너무 많은 이미지를 담다간 로딩이 길어질 수 있으니 주의하시길 바랍니.. 2022. 6. 2. inline, block, inline-block 이란 뭘까 ? 1. inline span, a, em 등등.. 한 줄 내에 여러 요소가 표시될 수 있다 ~! 인라인은 본인 컨텐츠만큼의 공간만 차지한다. 따라서 높이나 길이를 직접 설정해도 무시한다 margin/padding을 설정해도 좌우간격만 적용되고, 상하 간격은 적용되지 않는다 ! line-height로 글자의 줄 간격을 설정할 수 있지만, 전체의 높이는 설정할 수 없다 줄이 늘어나면 높이도 늘어나기 때문이다 ! 2. block div h1 p 등등... 하나의 요소가 한 줄 전체를 차지하는 것이다 ! 전혀 문제 없이 높이나 길이 마진 패딩을 적용할 수 있다~! 3. inline-block display: inline-block ; 으로 설정해야하고, inline과 block의 특징을 모두 가진 요소이다 내가 .. 2022. 5. 24. position 속성 - relative, absolute, fixed 기본 값 : static -> 문서 흐름에 맞춰 배치 / 조정 불가능~ relative : 원래의 위치부터 계산하여 배치 absolute : 원래 위치와 별개로 부모 요소 기준으로 계산하여 배치 fixed : 부모 요소와 관계 없이, 브라우저 화면의 상대 위치를 기준으로 계산하여 배치 부모요소인 회색 박스 안에서 각각 relative / absolute / fixed를 right : 10px ; bottom : 10px ; 를 하여 나타내보았다 1. relative는 원래 위치인 왼쪽 끝에서 오른쪽과 아래쪽으로 10px씩 밀려서 이동했다 2. absolute는 부모 요소인 회색박스에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다 ( 주의 : 부모 position이 relative가 아니라면 부모 .. 2022. 5. 24. HTML/CSS 기초 정리 1 태그 head - 헤드 태그, 사이트 제목, 설명, 부가정보, 기술적 내용 body - 헤드 태그 다음에 위치, 화면에 보이는 컨텐츠 h1~5 - 제목 같은 텍스트를 보여줄 때 사용. 1이 제일 큼 span : 인라인 태그 div : 블록 태그 p : 문단 태그 a : 링크 태그 속성 id - 각 태그의 이름을 지정함. 하나만 지정 가능한 고유한 값 class - 각 태그의 이름을 지정함. 여러 태그에 중복하여 지정할 수 있는 값 CSS 적용 인라인 스타일 - 태그 안에 직접 style 작성 내부 style 태그 - HTML 파일 내 head에 style 작성 외부 CSS 파일 작성 - HTML 파일과 분리하여 style.css 파일 작성하여 참조 폰트 스타일 font-family - 폰트 스타일 ( 폰.. 2022. 5. 23. Semantic Web, Semantic Tags 1. Semantic Web Semantic Web이란 ? - '의미론적 웹'이라는 뜻으로, 컴퓨터가 이해할 수 있는 방식으로 인터넷 웹사이트를 제작함으로써 인터넷에 존재하는 다양한 정보를 컴퓨터가 쉽게 이해하고 해석할 수 있도록 하는 것 Semantic Web의 목적 - 사람만이 웹에 산재한 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단이 되는 것. HTML5에서의 Semantic Web - HTML5에서는 Semantic Web을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 이것이 Semantic Tag이다 2. Semantic Tags Semantic Tag ,,,, 등의 태그 자체의 의미를 가진 태그 Non-Semantic Tag.. 2022. 5. 23. 이전 1 다음 반응형
