FE/CSS4 [CSS] Display 블록 (block) 위에서 아래로 차례대로 배치되는 요소이며 크기를 지정할 수 있다. ex) ~ , , 인라인 (inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치되며 블록과 달리 크기를 지정할 수 없다. ex) , , , 단, 이미지와 같이 외부 데이터를 보여주는 태그는 인라인이지만 크기를 지정할 수 있다. 인라인 블록 (inline-block) 인라인처럼 배치되지만 블록 처럼 크기를 가지고 싶을 때 사용하는 속성이다. float 속성 (float) float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고 그 주변으로 인라인 요소들을 배치할 수 있다. 의사 클래스 의사 클래스는 특정 상태나 위치에 있는 요소에 스타일을 적용하기 위해 사용한다. 1) :hover 요소가 마우스 오버되었을 때 .. 2024. 1. 20. [CSS] 박스 모델 박스 모델 박스 모델은 웹 페이지에서 HTML 요소가 브라우저에 표시될 때 각각의 요소가 사각형 상자로 간주되는 개념이다. 이 사각형 상자는 해당 요소의 내용, 안쪽 여백, 테두리, 그리고 바깥 여백으로 구성된다. Content (내용) 요소의 실제 내용이 위치하는 영역으로 width와 height 속성으로 크기를 조절할 수 있다. 여기서는 빨간색 선 사이에 들어 있는 글자들이 내용이다. Padding (안쪽 여백) content와 border 사이의 여백으로 padding의 속성을 사용하여 조절할 수 있다. padding : 8px; 이는 상하좌우 안쪽 여백을 한번에 8px로 설정한다. padding : 16px 8px; 이는 상하, 좌우 안쪽 여백을 각각 설정하며, 상하를 16px로 좌우를 8px로 .. 2024. 1. 19. [CSS] 배경 이미지 배경 이미지 삽입 (background-image) background-image라는 속성에 url(...)이라는 문법으로 배경 이미지를 삽입한다. 배경 이미지는 여러개를 삽입할 수 있다. 배경의 위치 (background-position) 기본 값은 left top (왼쪽 위)이고 가운데 정렬을 하기 위해서는 center을 쓰면된다. background-position : top; background-position : right; background-position : center; 배경의 반복 (background-repeat) 기본 값은 repeat이고, no-repeat으로 하면 반복되지 않게 할 수 있다. 배경의 크기 (background-size) 직접 가로 세로 크기를 지정할 수도 있고, .. 2024. 1. 19. [CSS] 기본 개념 CSS 규칙의 구조 CSS는 문서의 표현을 꾸미기 위한 스타일 규칙을 정의하는 스타일 시트 언어로, CSS 규틱은 선택자와 선언부로 구성된다. 선택자 (h2) 스타일을 적용할 HTML 요소를 선택하는 부분이다. 속성 (font-size) 선택한 HTML 요소에 적용할 스타일의 속성을 지정한다. 여기서 font-size는 글꼴 크기를 의미한다. 값 (value) 속성에 적용할 값으로 스타일의 구체적인 특성을 결정한다. 여기서는 글꼴 크기를 24픽셀로 지정한다는 뜻이다. CSS 선택자 CSS 선택자는 규칙에서 스타일을 적용할 HTML 요소를 선택하는 부분으로 태그이름, ID, 클래스가 있다. 1) 태그 이름 특정 태그에 해당하는 요소들에 모두 스타일을 적용한다. 모든 h4 태그(부산 동네 한바퀴, 맛집 추천.. 2024. 1. 19. 이전 1 다음
