목록WEB (171)
Jam's story
Features Basic Pro Sample text Sample text Sample text Sample text Sample text HTML 삽입 미리보기할 수 없는 소스 별점 ex10 평점 :
[CSS] 특수성(특이성)
css특수성(특이성)? 동일한 요소를 가리키는 두 개 이상의 CSS 규칙이 충돌나는 경우 어떤 규칙에 따라 우선순위가 정해진다. 특수성을 계산하는 방법 (점수) 0 부터 시작 inline CSS 적용방법: 1000점 인라인 스타일 적용방식이 가장 우선순위가 높다 . id 명 100 점 #mydiv{} 클래스명 10점 .mydiv{} 속성, 의사클래스 ,속성 선택자 각각 1점 CSS 태그명 1점. 나중이 우선순위 * (모든것을 나타내는 태그 ) 0 점 !important를 주면 제일 우선수위가 높다. ->전부다 무시되고 이것이 적용 css특수성(특이성)? 동일한 요소를 가리키는 두 개 이상의 CSS 규칙이 충돌나는 경우 어떤 규칙에 따라 우선순위가 정해진다. inline CSS 적용방법: 1000점 인라인..
HTML 삽입 미리보기할 수 없는 소스 같은 속성을 적용하면 , 맨마지막에 쓰인 속성값이 적용된다.
[CSS]속성선택자
요소 + 특정속성 또는 속성값을 가지는 요소의 스타일 지정 속성선택자(selector) { } [속성명[?]=[속성값]] = 속성을 가지고만 있으면 적용 ^= 시작하면 적용 $= 끝나면 적용 *= 포함하면 적용 (더 포괄적인 개념) ~= 특정 단어 포함하면 적용 |= 잘 안쓰인다. naver daum sist sist sist ex06.html css selector 선택자
[CSS] 이미지 스프라이트 - 아이콘
이미지 스프라이트: 단일 이미지에 넣은 이미지 모음 이미지가 많이 웹 로드할때 오랜 시간이 걸린다. 성능저하 서버 이미지 가지러 여러번 요청x -성능향상 포인트 /* 왼족으로 47px만큼 밀었다. */ background: url("../images/img_navsprites_hover.gif") -47px 0; 왼쪽으로 91px 아래로 45px 밀었다. background: url("../images/img_navsprites_hover.gif") -91px -45px; 전체코드 이미지 스프라이트 이미지 스프라이트: 단일 이미지에 넣은 이미지 모음 이미지가 많이 웹 로드할때 오랜 시간이 걸린다. 성능저하 네이버 클론코딩할 때 아이콘도 이와 같은 방법으로 처리하였다.
[CSS] 반응형 웹+ 이미지 갤러리
css 반응형 웹+이미지갤러리 Add a description Add a description Add a description Add a description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure in blanditiis perferendis reprehenderit dolorum quam fugit saepe explicabo nihil soluta cum commodi voluptate ut debitis optio perspiciatis porro quae aliquam?
[CSS] 타임라인
2021 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam. 2020 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua di..
[CSS] DropDown
Mouseoverme helloword HTML 삽입 미리보기할 수 없는 소스 포인트 .dropdown:hover .dropdown-content{ display:block; } /* positon :absolute; 들의 좌표 기준이 되게 만들기 위해 */ 전체코드 ex02_02.html Dropdown Menu Left Link 1 Link 2 Link 3 Right Link 1 Link 2 Link 3 이미지에 마우스를 대면, 더 큰 이미지를 보여주는 예제 left Link 1 Link 2 Link 3 이미지설명 ex02_04 Home News Link 1 Link 2 Link 3 dropdown Link 1 Link 2 Link 3 Lorem ipsum dolor sit. Lorem ipsum d..