본문 바로가기

분류 전체보기718

css 기초3 가상 클래스 hover,active,nth-child 등 # 가상 클래스 1.HOVER ABC:hover 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택 좀 더 쉽게 표현하자면, ABC요소에 대해서는 마우스 오버가 되어있는 동안에는 작동된다. 예시 a:hover 2.ACTIVE ABC:active 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 hover와 다른점은 마우스 오버가 아닌 ‘클릭’이라는 점이다. 예시 a:active 3.FOCUS ABC:focus 선택자 ABC 요소가 포커스 되면 선택 이것도 기본 기능은 active와 동일하다. 차이점은 input의 경우 정보 입력을 위해 마련된 공간안에서 쓰인다는 점 같고 active의 경우는 하이퍼링크 같은 원리로 작용하는 것 같다. 다시 말해서 focus는 활용이 가능한 요소인 input등에.. 2022. 9. 5.
css 기초2 복합 선택자 # 복합 선택자 1)ABCXYZ - 일치 선택자 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 예시 ul.orange 2)ABC > XYZ - 자식 선택자 선택자 ABC의 자식요소 XYZ선택 예시 ul > .orange 3)ABC XYZ - 하위(후손)선택자 사실상 2)와 기능은 같다. 예시 ul .orange 4)ABC + XYZ - 인접 형제 선택자 선택자 ABC의 다음 형제 요소 중 XYZ를 선택 이 개념이 설명이 없다면 약간 난해하다. 예시 .orange + li 오렌지 망고 이렇게 있을때, 선택자 적용은 망고에만 된다. 이유는 선택자 ornage클래스의 다음 형제줄에 나오는 것 중에서 li가 있는 것이 망고 이기 때문이다. 5)ABC ~ XYZ - 일반 형제 선택자 선택자 ABC의 다음 형.. 2022. 9. 5.
css 기초1 기본 선택자 (html에 작성된 것중 어떤것에 css 속성을 입히는지) 1. ABC - 태그 선택자 2. .ABC - 클래스 선택자 3. #ABC - 아이디 선택자 4. * - 전체 선택자 2022. 9. 5.
html 기초3 body태그 안에 들어가는 '구조태그' 태그 안에는 문서의 구조를 나타내는 범위 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위 body태그 안에 들어가는 요소들 1.div, hn # 제목을 의미, h1은 제목의 사이즈, h1부터 h6까지 있다. 오늘의 날씨 중부 집중호우, 남부는 열대야, 12호 태풍 북상 중.. # 이미지가 정상적으로 출력될때는 img src 경로에 설정된 이미지가 표출되고 # 이미지가 정상적으로 출력되지 않을때에는 alt에 설정된 글씨가 출력된다. (대체 텍스트) 2.ul, li # ul은 순서가 필요없는 목록의 집합을 의미한다 (unordered list) # 목록 내 각 항목(list item) 사과 딸기 수박 오렌지 3.a # 쉽게 이.. 2022. 9. 5.

티스토리툴바