Egomi Space

이미지를 집어넣기 위한 방법에는 3가지가 있다.1. img 태그2. 태그의 background 속성에 이미지를 추가해주기3. picture태그 미디어 쿼리 이용 시, background 속성을 바꿀 수 있지만 이미지 태그의 이미지 소스는 바꿀 수 없었다.그러나 html5에서 지원하는 picture태그는 css의 미디어쿼리로 이미지 변경이 가능하다.(기존에는 호환성 문제가 되었으나, 브라우저가 업데이트 되면서 사용성이 높아졌다.) 태그에는 media 쿼리에 한하여 이미지를 설정할 수 있고, 태그에는 default이미지를 설정할 수 있다. srcset 속성에는 밀도(dp)에 따른 밀도를 결정할 수 있는 기능이 있다.ex ) srcset="url-xdpi x1"

높이를 80px로 고정하고 Padding을 30px로 주면 위처럼 고정 높이가 깨진다.이런 건 Box-sizing 이 content-box로 되어있어서 콘텐트 높이에 맞추기 때문이다. box-sizing : border-box로 고치면 고정 높이가 안깨지게 된다.

index.html 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 window.addEventListener("load",function(){ var visual = document.querySelector("#visual"); var banner = document.querySelector(".banner"); var prevButton = document.querySel..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 window.addEventListener("load",function(){ var visual = document.querySelector("visual"); var banner = document.querySelector(".banner"); var prevButton = document.querySelector(".move-button .prev-button"); var nextButton = document.querySelector(".move-button .next-butt..

background로 이미지를 주는 경우, 크기가 제멋대로이다.이러한 경우 설정이 필요한데, 이 때 사용하는 설정이 background-size 옵션이다.123456789101112131415 신규 강좌목록 Colored by Color Scriptercs위의 코드에서 background-size 옵션을 바꿔주자.참고 : 큰 따옴표 안에 작은 따옴표 쓸 때'background:url("/MavenPrj/resource/images/lecture/banner-javascript180.png")'js 와 css는 "", ''를 구분하지 않아, 위와 같이 섞어서 사용한다. ("''"또는 '""' 또는 \"로 표시)그러나 JSON의 경우 ""로만 표현이 되므로, 태그 안에 작은 따..

ul태그는 기본으로 사용할 경우, 앞에 동그라미 표시가 따라온다.그럴 경우, margin 이나 padding을 0 으로 주어 없애준다.(인터넷에 떠도는 reset.css 파일을 이용해도 된다. 그러나 다른 속성을 제거할 수 있으므로 본인이 직접 제거해줘도 된다.)

Html5에는 Semantic(의미를 갖는 태그)하게 영역을 나누는 8가지 태그가 있다.- Header- Nav- Article- Section- Aside- Footer- Main- Body 여기서 Header, Body, Footer 는 페이지를 나누는 영역이다. Header, Body, Footer를 제외한 나머지 태그는 Section을 나누는 역할을 한다. Section을 나누는 태그에는 제목을 달아줘, 무슨 역할을 하는지 명시해둔다.