CSS (5) 썸네일형 리스트형 CSS 미리어 쿼리 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. 미디어쿼리(Media Queries)는 CSS에서 사용되는 기술로, 미디어의 특성에 따라 스타일을 다르게 적용할 수 있게 해준다. 이를 통해 다양한 기기와 화면 크기에 대응하여 웹페이지의 디자인을 최적화할 수 있다. 미디어쿼리는 주로 반응형 웹 디자인을 구현하는 데 사용된다. ex) 화면을 작게 만들면 웹 요소들도 작아진다. 1. 미디어 쿼리의 구문 - 미디어쿼리는 @media 규칙을 사용하여 정의된다. @media media-type and (media-feature) { /* 스타일 규칙 */ } - media-type : 미디어 타입을 지정한다. 주로 screen, print, speech 등이.. CSS 그리드 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS에서 그리드(Grid)는 웹페이지의 레이아웃을 구성하는 데 사용되는 강력한 레이아웃 시스템이다. 그리드를 사용하면 웹페이지를 행과 열로 나누어 유연하고 일관된 레이아웃을 쉽게 설계할 수 있다. CSS 그리드는 CSS의 일부로서, 그리드 레이아웃을 정의하기 위한 다양한 속성들을 제공한다. 1. 컨테이너(Container) - 그리드를 정의하기 위한 부모 요소를 컨테이너라고 한다. - display: grid; 속성을 사용하여 해당 요소를 그리드 컨테이너로 지정한다. .container { display: grid; } 2. 행과 열 정의 - grid-template-rows 및 grid-templ.. CSS 박스 모델 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS의 박스 모델(Box Model)은 웹 페이지의 요소(element)들을 박스 형태로 구성하는 모델이다. 이 모델은 각 요소를 content, padding, border, margin으로 나누어 각각의 역할을 정의한다. 1. Content (콘텐츠 영역) - 요소의 실제 내용이 들어가는 부분이다. - 크기는 width와 height 속성을 통해 지정된다. 2. Padding (패딩) - 콘텐츠 영역과 테두리(border) 사이의 여백 영역을 말한다. - padding 속성을 사용하여 조절할 수 있다. -> 적용시 남았던 여백이 사라진다. 3. Border (테두리) - 패딩 영역 주위에 그려진.. CSS 타이포그래피(font-size, color, text-align, font) 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS에서 타이포그래피는 문서의 텍스트를 스타일링하는데 사용되는 속성들의 모음을 의미한다. 글꼴, 글자 크기, 줄 간격, 글자 간격 등과 같은 텍스트의 시각적인 특성을 다루는데 중점을 둔다. 다양한 CSS 속성을 사용하여 웹 페이지의 텍스트를 보다 독특하고 가독성이 좋은 스타일로 꾸밀 수 있다. 1. font-size 값의 종류 - px (절대 크기 단위) : 고정된 크기로, 화면 픽셀을 기준으로 한다. - em (상대 크기 단위) : 부모 요소의 크기에 상대적인 크기를 나타낸다. - rem : 루트 요소 (일반적으로 )의 크기에 상대적인 크기를 나타낸다. - % : 부모 요소의 크기에 상대적인 백분.. CSS 기본 개념과 tag, id, class, 가상class 선택자 정리 이 글은 작성자의 개인 공부를 위해 작성한 글입니다. 실제 이론, 실습과 다른 부분이 있을 수 있습니다. CSS(Cascading Style Sheets)란? HTML이나 XML과 같은 마크업 언어로 작성된 문서의 표현을 디자인하는 스타일 언어이다. CSS는 웹 페이지의 레이아웃, 색상, 폰트 등을 지정하여 문서의 시각적인 표현을 담당한다. 여러 웹 페이지에서 일관된 디자인을 유지하고, 문서의 내용과 표현을 분리함으로써 유지보수를 용이하게 한다. ⦁ 글씨를 원하는 색으로 바꾸기 1. 안에다가 사용할 때 웰시코딩의 블로그의 오신 여러분 반갑습니다! 2. 3. 원하는 부분을 한꺼번에 바꾸기 HTML CSS JavaScript ⦁ 아이디선택자 (하나하나 관리를 하기 위함, ex) 학번, 주민등록번호) HTML.. 이전 1 다음