본문 바로가기

css4

[CSS] position 속성 1. position 속성 ① relative ② absolute ③ fixed ④ sticky 1. position 속성 CSS에서 position 속성은 웹 문서상에서 요소를 배치하는 방법을 지정하는 속성이다. 사용가능한 속성 값으로는 'static', 'relative', 'absolute', 'fixed', 'sticky'가 존재한다. position 속성을 통해 요소를 배치할 방법을 지정한다면 top, bottom, left, right 속성을 통해서 해당 요소의 상하좌우 위치 값을 입력하는 것으로 요소를 배치할 위치를 지정할 수 있다. position 속성 값 설명 static 요소를 문서의 흐름에 맞춰서 배치한다. (기본 값) relative 요소를 문서의 흐름에 따라, 상하좌우 속성 값에 .. 2023. 8. 9.
[CSS] 박스 모델 (Box Model) 1. 박스 모델의 정의 (Box Model) 2. 박스모델 영역 별 속성 ① content 속성 ② padding 속성 ③ border 속성 ④ margin 속성 ⑤ box-sizing 속성 3. 마치며 1. 박스 모델의 정의 (Box Model) Box란 HTML 문서가 랜더링될 때 각 요소가 사각형 형태로 차지하고 있는 영역을 말한다. 위의 소스 코드를 복사해서, html 문서로 만들고 이를 웹 브라우저에서 열어보자. 이제 여기서 '개발자 도구'를 한 번 열어서 요소를 클릭해보자. 그러면 아래와 같은 형태로 해당 요소에 하이라이트가 들어온 것을 확인할 수 있다. 태그는 블록 레벨 요소를 만드는 블록 태그이기 때문에 웹 브라우저의 한 영역을 사격형의 형태로 전부 차지하고 있다. 여기서 HTML 요소가 .. 2023. 4. 5.
[CSS] 선택자 1 (기본, 그룹 선택자) 목차 1. 선택자 ① 선택자의 정의 ② 기본 선택자 (전체, 태그, Class, ID) (1). 전체 선택자 (Universal Selector) (2). 태그 선택자 (Type Selector) (3). Class 선택자 (Class Selector) (4). ID 선택자 (ID Selector) ③ 그룹 선택자 2. 마치며 1. 선택자 (Selector) ① 선택자의 정의 - 웹 페이지의 HTML 요소를 대상으로, CSS 스타일을 지정하려고 할 때 사용된다. (이번 장에서는 CSS 스타일을 지정하는 선택자 중 '전체', '태그', 'class', 'id', '그룹' 다섯 가지만 다루고, 나머지 선택자들은 추후에 다루도록 하겠다.) - 선택자에 의해 선택된 요소들은 '선택자의 주체'로 지정된다. [in.. 2023. 3. 24.
[CSS] CSS 개요 (CSS 정의, 기본 문법) 목차 1. CSS 개요 2. CSS 기본 문법 ① 'style' 속성으로 CSS 스타일 정의 ② '' 태그로 CSS 스타일 정의 ③ HTML 문서에 스타일 시트 파일(*.css)을 연결해서 CSS 스타일을 정의 3. 마치며 1. CSS 개요 - CSS => Cascading Style Sheets, 계단식으로 스타일을 정의하는 문서 (HTML은 태그가 태그를 포함하는 계단식 구조를 가지고 있다.) - HTML 문서에 스타일을 추가하는 언어 - '*.css' => 파일 확장자 명 - CSS는 HTML 문서의 스타일을 정의하는 것이 목적이기 때문에 HTML 문서와 같이 사용해야 하며, 그렇지 않다면 단순한 텍스트 문서에 불과하다. - HTML이 프로그래밍 언어가 아니라 마크업 언어인 것처럼 CSS는 프로그래.. 2023. 3. 20.

티스토리툴바