겨리의 개발일기

display 속성 ✅ 모든 요소는 자기가 기본적으로 가지고 있는 display값이 있다. ✅ Display값에 따라 블록레벨, 인라인레벨 등 렌더링 박스의 유형이 결정된다. ✅ Display 속성으로 해당 요소의 렌더링 박스의 유형이 결정되고 렌더링 여부 또한 결정할 수 있다. 속성 값 none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 cf) height 나 width 등과 같은 박스모델 속성을 적용할 수 있음 ✅ 이외에도 list-item, flex, inline-flex, table, table-cell 등..

HTML&CSS 2023. 4. 16. 23:07

가상클래스(Pseduo class) ✅ 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스 ✅ 직접 요소에 클래스를 선언하는 것이 아니다. ✅ 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다. ✅ 가상클래스는 :(콜론)기호를 써서 나타낸다. 문서 구조와 관련된 가상 클래스 :first-child - 첫 번쨰 자식 요소 선택 :last-child - 마지막 자식 요소 선택 앵커 요소와 관련된 가상 클래스 :link - 하이퍼 링크이면서 아직 방문하지 않은 앵커 :visited - 이미 방문한 하이퍼 링크를 의미 사용자 동작과 관련된 가상 클래스 ✅주로 태그에 많이 쓰인다. :focus - 현재 입력 초점을 가진 요소에 적용된다. - 현재 선택 받는 것을 의미한다. :hover - 마우스 포..

HTML&CSS 2023. 4. 13. 17:39

✅ 자손 선택자 div span { color: red; } /* : 의 자손 요소인 를 선택하는 선택자 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분 */ ✅ 자식 선택자 div > h1 { color: red; } /* : 의 자식 요소인 를 선택하는 선택자 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관없음 */ ✅ 인접 선택자 div + p { color: red; } /* 선택자 사이에 + 기호를 넣는다. 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없음 인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다. */ ✅ 문서 구조 관련 선택자는 위의 선택자들을 조합하여 ..

HTML&CSS 2023. 4. 10. 00:14

CSS구문 h1{color:yellow; font-size:2em;} ✅ CSS 파일은 여러 개의 규칙으로 이루어져있다. ✅ 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만 속성 이름과 속성 값 사이에는 개행을 하면 안 된다. CSS 적용하는 방법 네 가지 Inline ✅해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법 ✅ 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. ✅ 코드의 재활용이 되지 않기 때문에 자주 사용 X 내용입니다 Internal ✅ 문서에 External ✅ 외부 스타일 시트 파일을 이용한 방법 ✅ 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식 ✅..

HTML&CSS 2023. 4. 10. 00:09