본문 바로가기

CSS9

CSS 선택자 정리 CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg.. 2023. 10. 19.
CSS의 Display 정리 블록(Block) 위에서 아래로 차례대로 배치되는 요소입니다. 크기를 지정할 수 있습니다. 다음 태그들은 기본적으로 display 값이 block입니다. , , …, 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치됩니다. 블록과 달리 크기를 지정할 수 없습니다. 다음 태그들은 기본적으로 display 값이 inline입니다. 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있습니다. 인라인 블록 (Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다. float 속성 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다. 블록, 인라인 .. 2023. 10. 19.
CSS 패딩과 마진 내용 정리 padding과 margin은 각각 안쪽 여백, 바깥 여백을 넣을 때 쓴다고 배웠습니다. 이것들의 사용법을 복습해보고, 좀 더 복잡한 방법도 알아볼게요. Padding 영역 안쪽에 여백을 넣을 때 사용했습니다. 상하좌우 한 번에 padding: 8px; 상하, 좌우 각각 padding: 16px 8px; 상, 좌우, 하 padding: 16px 8px 24px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 순서로 외우시면 됩니다. 상, 우, 하, 좌 padding: 16px 8px 24px 10px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 → 9시 순서로 외우시면 됩니다. padding- 속성 패딩 값을 각각 주고 싶을 때 쓰는 속성들입니다. 앞에서 상, 우, 하, 좌 값을 따로 썼던.. 2023. 10. 18.
CSS 배경 관련 속성 정리 배경 이미지 background-image url(...)이라는 문법으로 배경 이미지를 넣습니다. background-image: url('flowers.png'); 참고로 배경 이미지는 여러 개 넣을 수 있습니다. 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png가 깔리고, 맨 밑에는 c.png가 깔립니다. background-image: url('a.png'), /* 제일 위에 보이는 이미지 */ url('b.png'), url('c.png'); 배경의 위치 background-position 기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 쓰면 됩니다. background-position: top; /* 위 */ background-position:.. 2023. 10. 18.

티스토리툴바