배경 및 테두리 - CSS배경과 테두리로 할 수 있는 창의적인 작업을 살펴보자. - 그라데이션(gradients? gradation?), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS의 많은 스타일 질문에 대한 답이다. 배경 색상 - background-color 속성은 CSS의 모든 요소에 대한 배경색을 정의한다. 이 속성은 유효한 를 허용한다. - background-color 는 요소의 내용 및패딩 박스 아래로 확장된다. 배경 색 배경색을 바꿔 보자. 배경 이미지 - background-image 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있다. - 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑..
- 글꼴 굵기, 종류 및 스타일, 글꼴 약식(shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 등을 설정할 수 있다. - 텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지로 분류된다. 글꼴 스타일 - 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성. 텍스트 레이아웃 스타일 - 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있다. 글꼴 예제 코드 애국가 동해물과 백두산이 마르고 닳도록... 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세..
CSS 기본 박스 모델 - 문서의 레이아웃을 께산할 때, 브라우저의 표준 CSS 기본 박스 모델에 따라 각각으ㅟ 요소를 사각형 박스로 표현한다. - CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. - 하나의 박스는 네 부분(영역)으로 이뤄진다. - 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 바깥 여백(마진) 영역이라고 부른다. 컨텐츠 영역(Content area) - 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다. - 컨텐츠 영역의 크기는 컨텐츠 너비(컨텐츠 박스 너비)와 컨텐츠 높이(컨텐츠 박스 높이)이다. - 배경색과 배경 이미지를 가지고 있기도 하다. - box-sizsing 속성의 값이 기본값인 content-box이며, 요소가 블록 레..
CSS 속성(Properties) - 화면에 어떠한 요소들을 꾸며주는 역할 - 제어 요소 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델 - 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. 2. 글꼴, 문자 - 텍스트 꾸미기. 글꼴과 볼드체, 이탤릭체, 줄 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링이 가능하다. 3. 배경 - 그라데이션(gradients), 배경 이미지, 둥근 테두리 등을 추가할 수 있다. 4. 배치 - 요소들의 위치를 지정할 수 있다. 5. 플렉스 - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공..
CSS 우선순위 - 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선함. 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함. - 점수 ID 선택자 : 100 Class 선택자 : 10 tag 선택자 : 1 전체(*) 선택자 : 0 인라인 선언 : 1000 - 스타일 속성에 " !important " 를 입력하면 우선순위가 0순위로 적용됨. ex) .green{ color: green !important; } - 다음과 같이 스타일 적용 시 div 태그 안의 글자는 어떤 색으로 표시되는가? .green{ color: green; } 우선순위! => 인라인으로 선언한 속성이 우선이므로 orange 색으로 표시됨.
상속(Inheritance) - 부모 요소에서 설정된 일부 CSS 속성 값이 자식 요소에게 상속되며, 일부는 그렇지 않다. - 상속되는 CSS 속성들 -> 글자/문자 관련 속성들 ( 모든 글자/문자 속성은 아님 ) font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 ... 예) 스타일 상속 1 .parent1{ color: red; } 조부모 부모1 자식1 자식2 자식3 부모2 => 결과
- Total
- Today
- Yesterday
- httpServletRequest
- CSS
- 미들웨어
- 리액트
- script element
- Servlet
- Spring
- HTML
- CSS 속성
- 네트워크
- Cookie
- 세션
- 스프링
- el
- react
- html css
- 서블릿
- 내장객체
- nodejs
- Java Server Page
- a 태그
- Network
- JSP
- Redux
- FMT
- Binding
- Session
- javaserverpage
- 서브넷팅
- 제이쿼리
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |