본문 바로가기

CSS6

[CSS] Grid 활용법 📝 그리드 사용법 그리드 선언 그리드는 display 속성을 사용해 설정할 수 있다. 설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정 가능하다. 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다. 예시) .grid-container { display: grid; /* grid 또는 inline-grid 설정 가능 */ } grid cell 그리드를 선언한 레이아웃 태그 내부에 포함한 자식요소는 grid cell로 변환된다. (자식 요소가 아니면 grid cell이 아닙니다) grid cell에 설정된 float 속성은 적용되지 않는다. 💡 grid cell에 설정된 display 속성은 모두 무시된다. 💡 요소가 아닌 텍스트가 자식으.. 2023. 2. 9.
[CSS] CSS 첫걸음 📖 CSS 정의 Cascading Style Sheets의 준말. HTML이 웹페이지의 내용을 담당한다면, CSS는 웹페이지의 디자인을 담당한다. 정의하는 방법으로는 내부 스타일시트 외부 스타일시트 인라인 스타일시트 등이 있다. 🤔 CSS를 적용하는 3가지 방법 ✅ Inline 방식 해당하는 Tag안에 style 속성을 통해 적용하는 방법 하이 💡 css 속성뒤에 마무리로 세미콜론을 넣어준다. 제일 마지막 속성에는 세미콜론을 안 넣어도 동작은 하나 넣어주는 게 명시적으로 좋다. ✅ Style tag 방식 head 태그 안에 style태그를 선언하여 적용하는 방법 하이 💡 style tag는 왜 head 안에 선언해야 될까? html 문서는 위에서부터 아래로 읽기 때문에 style tag가 body태그의 .. 2023. 2. 7.