웹/html, css (11) 썸네일형 리스트형 모달과 모달리스 css 선택자 클릭하기 전 태그의 선택자 tag:link 클릭한 후 태그의 선택자 tag:visited 인접 형제 선택자 = tag1 요소 다음 tag2요소만 선택 tag1 + tag2 일반 형제 선택자 = tag1 요소 와 형제인 tag2 요소 전체 선택 tag1 ~ tag2 자식 선택자 = 자식의 요소만 선택 (자손이 아님) tag1 > tag2 속성 선택자 tag[속성] = 해당하는 속성값을 포함한 tag 선택 tag[속성='값'] = 해당하는 속성값이 '값'인 tag 선택 tag[속성~='값'] = 해당하는 속성값이 '값'을 포함하고 있는 tag 선택 tag[속성^='값'] = 해당하는 속성값이 '값'으로 시작하는 tag 선택 tag[속성|='값'] = 해당하는 속성값이 '값' 이거나 '값'을 포함하는 tag .. 페이지를 만들 때 팁 0. 영역 리셋 * { margin:0 ; /* 마진 리셋 */ padding:0 ; /* 패딩 리셋 , auto를 넣으면 각 영역의 중앙에 배치가 되버린다.*/ box-sizing: border-box; /* 박스 영역은 테두리까지 */ } 1.중앙배치 너비값이 있어야지 중앙정렬이 된다. #container { margin:0 auto; /* 화면 중앙에 배치 */ width:1200px; /* 너비 */ } 2. a 태그 밑줄 없애기 a { text-decoration:none; /* 텍스트 링크 밑줄 없애기 안하면 한번 클릭할 시 밑줄이 생긴다. */ } 3. ul 리스트 표시 없애기 ul은 보통 nav 에 많이 쓰인다. ul { list-style: none; } web workers 쓰레드와 같은 역할 web storage 쿠키와 같은 역할을 한다. html 5에서 나온 기능 쿠키와는 다르게 각 윈도우에 독립적인 값을 저장할 수 있다. 여기서 윈도우란. 각 페이지를 보여주는 창이다. 자바스크립트의 window 객체라 생각하자. 자바스크립트로 조작한다. 웹 스토리지의 특징 1. 문자열만 저장 가능 2. 맵 형식의 데이터로 저장 A>종류 - 윈도우에 웹페이지가 로드되면 세션 스토리지와 로컬 스토리지가 자동 생성된다. 1. 세션 스토리지 - 윈도우에 웹 사이트가 로드 될 때 생성됨 - 윈도우마다 세션 스토리지 별도 생성 - 현재 띄워져 있는 탭에서만 유지가 됨 - 로드된 웹사이트의 모든 웹페이지들이 스토리지 공유 (= 다른 웹사이트도 세션 스토리지에 접근 가능) - 윈도우 닫힐 때 소멸됨 2. 로컬 스토리지 - 윈도우에 상관없이.. 크기 조정 A>박스 1.블록 박스 - height 와 width 값을 가진다. - 넓이가 100%이다. - padding과 같은 여백으로 인해 다른 요소가 밀려난다. - 새 행에 배치된다. ( = 아래로 배치된다.) 2. 인라인 박스 - 옆으로 배치된다. 3.박스 속성의 변경 -flex 같은 것은 외부 요소는 블록이지만 내부요소는 가변가능한 요소로 된다. B>크기 수평 정렬 수직 정렬 이전 1 2 다음
