본문 바로가기

css4

CSS - 속성(3) CSS 리스트 CSS에서 사용할 수 있는 list-style 속성 1. list-style-type 2. list-style-image 3. list-style-position list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다. list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있습니다. list-style-type 속성을 이용한 마커의 변경 사과 멜론 바나나 수박 참외 옥수수 감자 상추 고구마 오이 배추 시금치 list-Style-image list-style-image 속성을 이용하면 마커로 자신만의 이미지를 사용할 수 있습니다. list-style-position list-style-position 속성을 이용하면 리스.. 2023. 6. 27.
CSS - 속성(2) CSS 글꼴 (font) - generic family : 비슷한 모양을 가지는 글꼴 집합("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("TImes", "Courier" 등) font-family : 해당 속성은 하나의 글꼴만을 설정 할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다. font-family 속성값이 여러개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 옵니다. 사용자에게 해당 글꼴이 있는지 여부를 판단하고 존재하면 해당 글꼴로 존재하지 않으면 다음 글꼴을 가져와 확인합니다. 글꼴의 이름은 반드시 따옴표로 둘러 쌓아야 하고 여러 개의 글꼴을 나열할 때는 쉼표로 구분 짓습니다. font-style : 주로 이탤.. 2023. 6. 26.
CSS - 속성 CSS 색 색상 이름으로 표현 RGB 색상 값으로 표현 16진수 색상 값으로 표현 CSS 배경 background-color : 해당 HTML 요소의 배경색을 설정 background-image : 해당 HTML 요소의 배경 이미지를 설정 background-repeat : 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다. 하지만 이 속성을 사용하면 배경 이미지를 한 방향으로만 반복되도록 설정할 수 있습니다.(repeat - x (수평), repeat - y(수직), no-repeat(반복 x)) background-position : 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다. background-position 에서 사용할 수 있는.. 2023. 6. 26.
CSS CSS란 HTML이나 XML과 같은 구조화된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. HTML의 각 요소(element)의 style을 정의하여 화면에 어떻게 표현할 것인지를 나타냅니다. CSS 사용 이유 HTML 요소의 세부 스타일을 일일이 따로 지정하고 유지 보수 해야되는 문제점을 해소하기 위해 만들어진 언어 웹 페이지의 스타일을 별도의 파일로 저장해서 사이트의 전체 스타일을 쉽게 제어 가능 웹 사이트의 스타일을 일관성 있게 유지해주고 유지 보수 또한 쉽게 가능 CSS 문법 a{ background-color:yellow; font-size: 16px;} CSS 의 문법은 선택자(selctor) 와 선언부 (declaratives)로 구성됩니다. 선택자 : CSS를.. 2023. 6. 26.