웹/CSS6 CSS 박스 모델 (Box Model) Margin, Padding, border 더보기 목차 CSS 박스 모델 콘텐츠 영역 패딩(padding) 영역 테두리(border) 영역 바깥(margin) 영역 CSS 박스 모델 (Box Model) CSS 박스는 4개의 영역으로 이루어집니다. 각 영역은 콘텐츠(contents) 영역, 안쪽(padding) 영역, 테두리(border) 영역, 바깥(margin) 영역이라고 부릅니다. 콘텐츠 영역 콘텐츠 영역은 Contents edge가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함하고 있는 영역을 말합니다. 콘텐츠 영역의 크기는 contents width와 contents height로 정해지고, 배경색과 배경 이미지를 가질 수 있습니다. div { width: 160px; height: 80px; background-c.. 2023. 6. 29. CSS - 계단식 ( Cascade ) 웹 프로젝트를 진행하다 보면 요소에 적용시킨 CSS 가 제대로 작동하지 않는 현상이 발생하는 경우가 있습니다. 보통 이런 상황에서 가장 먼저 확인해야할 사항은 동일 요소에 두 가지 규칙이 작성되었는지를 확인하는 것입니다. CSS에는 동일 요소에 두 가지 규칙이 작성되었을 때 계단식(Cascade)과 밀접하게 관련된 우선 순위 개념을 사용하여 충돌을 제어합니다. 계단식 CSS에서는 규칙의 순서가 매우 중요합니다. 동일한 요소에 적용된 두 가지 규칙에 대해서 CSS는 마지막에 나오는 규칙이 사용됩니다. 아래의 예시에서는 h1에 대해 2가지의 스타일을 적용합니다. 하나는 글자의 색을 빨강으로 하나는 글자의 색을 파랑으로 설정했습니다. HTML 삽입 미리보기할 수 없는 소스 CSS는 이처럼 중첩된 단락이 본문에.. 2023. 6. 28. 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. 이전 1 2 다음
