본문 바로가기

CSS25

css 문제풀이2 - div과 span을 구분하여 css적용 # 문제 코딩 연습 확인사항: CSS - Common 스타일 속성 임무: 모든 div 요소에 다음 목록의 것을 갖도록, CSS 파일인 "styling.css"를 채우세요. 1. 오렌지색 배경 2. 파란 텍스트 색상 3. 너비가 20인 점선 테두리 두 번째로, 모든 span에 빨간색 텍스트 색을 설정하세요. 그런 다음 최소 2개의 div와 하나의 span 요소가 포함되도록 HTML 파일인 'index.html'을 채우세요. 텍스트는 원하는 것을 선택할 수 있습니다! 평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요. 중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다! 이에 대.. 2022. 9. 28.
css 문제풀이1 - h1영역에 색상, 백그라운드 색상 입히기 # 문제 코딩 연습 확인사항: CSS - 스타일링 기초 및 색상 임무: 이 연습에서는 여러분의 첫 번째 CSS 파일을 빌드합니다. 모든 h1 헤딩을 빨간색으로, 모든 단락의 배경을 녹색이 되도록 CSS 파일인 "styling.css"를 확장하세요. 그런 다음 한 개의 h1 제목과 한 개의 단락이 포함되도록, HTML 파일인 'index.html'을 채우세요. 텍스트는 원하는대로 선택하시면 됩니다! 평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요. 중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다! 이에 대한 해답은 다음 강의에 있습니다. # 내 답안 # index.html.. 2022. 9. 28.
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.

티스토리툴바