클래스 선택자는 보통 미리 만들어놓고 html에 적용하는 편이다.
id 선택자는 따로 수정할때 많이 사용한다.
background-color는 상속불가.
함수이름() -> 함수호출(함수사용)
ex> url() -> url을 지정하는 함수라고 생각하면 됨.
배경을 꾸며주는 CSS속성들
background-color속성 : 웹 문서(HTML)의 요소(태그) 배경색을 지정할때 사용.
background-image속성 : 배경 이미지를 파일로 지정
background-repeat속성 : background-image속성과 함께 사용. 배경 이미지 반복 여부 및 반복 방향 지정
background-size속성 : background-image속성과 함께 사용. 배경 이미지 사이즈를 조절
background-position속성 : 배경이미지를 반복하지 않을 경우에, 배경 이미지를 표시할 위치를 지정
background속성 : 배경관련된 속성을 줄여서 표기, 각 속성값이 다르므로 표기 순서는 상관없음.
/* 색상 지정시에 rgba함수로 작성시에 (red,green, blue, 투명도*/
background-color: rgba(11, 18, 26, 0.5);
/* background-image: url("파일경로");
이때 파일경로는 문자열('' 혹은 "") 안에 입력되어야 한다. */
background-image: url("../logo.png");
background-repeat: no-repeat;
/* background-size에서 사용되는 속성들
auto : 원래 배경이미지 크기만큼 표시(기본값)
contain : 요소안에 배경 이미지가 다 들어오도록 확대/축소
cover : 배경이미지로 요소를 모두 덮도록 확대/축소
임의의 크기로 지정 : 백분율(%) 혹은 상수값 으로 지정가능 */
/* background-size: auto; */
/* background-position: <수평위치> <수직위치>;
수평위치 : left, center, right, 백분율, 상수값으로 지정가능
수직위치 : top, center, bottom, 백분율, 상수값으로 지정가능 */
/* background-position: center center; */
/* background: url(../logo.png) no-repeat right */
}
리스트(목록)을 꾸며주는 CSS속성들
- list-style-type속성 : 목록의 글머리 형태 설정
- list-style-image속성 : 목록의 글머리 형태를 외부 이미지로 바꾸는 속성.
- list-style-type속성의 값이 none이어야 함.
- list-style-position속성 : 글머리 아이콘이나 번호를 들여쓰거나 내어쓸 수 있음.
li{
/* list-style-type의 다양한 속성값들
disc : 채워진 원(기본값)
circle : 빈원
square : 채워진 사각형
decimal : 1로 시작하는 숫자
none : 목록을 나타내는 블릿 제거 */
list-style-type: none;
list-style-image: url("../img/rec.png");
}
.list-position{
/* inside, outside(기본값) 둘 중 하나 지정 가능 */
list-style-position: inside;
박스모델과 디스플레이 관련 css
1. 테두리(경계선)에 관련된 css속성들
- border-style속성 : 화면에 표시되는 테두리의 스타일 설정
- border-width속성 : 화면에 표시되는 테두리의 굵기 설정
- border-color속성 : 화면에 표시되는 테두리의 색상 설정
- border속성 : 테두리의 스타일, 굵기, 색상을 묶어서 표기(순서는 상관없음)
- border-radius : 모서리를 둥글게 처리
- box-shadow : 테두리의 그림자효과
border는 속성을 한꺼번에 지정하는 편이다.
p{
width: 300px;
height: 200px;
/* border-style: solid; */
/* 테두리의 두께 설정: border-width(네방향 모두 균일하게 설정)
테두리의 두께를 하나씩 조정가능
방향 : top, right, bottom, left
border-width : 상수값, thin, medium, thick
border-방향-width : 상수값, thin, medium, thick */
/* border-width: 5px; */
/* border-top-width : 10px;
border-bottom-width : 0px;
border-left-width : thin;
border-right-width : thick; */
/* border-width 속성은 두가지(방향)씩 묶어서 표현도 가능*/
/* border-width: 1px 10px; */
/* border-width 속성으로도 네가지 방향을 하나씩 설정 가능 */
/* border-width: 1px 10px 15px 20px; */
/* border-color : 색상지정 -> 네가지방향을 하나의 색으로 설정
border-방향-color : 방향별로 색상을 따로따로 지정 가능 */
/* border-color : red; */
/* border-top-color : red;
border-right-color : blue;
border-bottom-color: green;
border-left-color: yellow; */
/* 테두리의 형태, 굵기, 색상 한번에 지정 - border 속성 */
/* border : solid 2px blue; */
/* border-top : solid 1px red;
border-right : dotted 10px blue;
border-bottom : double 15px green; */
border : solid 1px black;
/* border-radius : 네 방향의 모서리를 둥글게 처리
border-방향(상하)-방향(좌우)-radius : 특정 방향의 모서리를 둥글게 처리 */
/* border-radius: 20px; */
border-top-right-radius: 5%;
border-bottom-left-radius: 5%;
/* box-shadow: 5px 10px 15px 20px; */
2. 여백지정하기(요소간의 여백) margin속성
- margin을 이용하면 요소(태그)와 요소(태그)간의 간격 조절 가능
- 현재 요소의 주변여백
마진 중첩현상:
요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진값이 큰 쪽으로 겹쳐지는 현상
요소를 가로로 배치할 경우에는 상관없음.
#box-margin{
width: 200px;
height: 150px;
border: solid 1px red;
margin: 0px 5px 10px 20px;
/* margin : 전체적으로 적용, 두방향씩 묶어서 설정, 네방향 각각 지정 가능
margin-방향 : 상하좌우 각각 margin값 지정가능 */
}
3. 여백지정하기(박스 내부의 간격) padding속성
- 요소 내부의 콘텐츠 영역과 테두리(border)사이의 여백
padding : 전체 여백설정, 두방향씩 묶어서 제어, 네방향을 각각 제어 가능
padding-방향 : 특정방향에 대해서 각각 제어가 가능
4. display속성 : 요소들의 배치 방향 설정을 보조하는 역할
[상단메뉴 UI만들기 함]
ul li 태그(display속성)를 inline방식으로 수정해서 메뉴 많이 만드는 편.
display속성이 inline 방식인 태그를 block방식으로 수정함.
display: inline; -> display: block;
display속성의 대표적인 속성값
- inline : 수평으로 디스플레이(배치), 컨텐츠에 해당하는 크기만큼 영역을 가진다.
요소들의 크기를 설정할 수 없다. - block : 수직으로 디스플레이(배치), 한 줄씩 영역을 가진다.
요소들의 크기를 설정할 수 있다. - inline-block : 수평으로 디스플레이(배치)하면서 요소들의 크기도 조절이 가능.
/* * : 모든 태그를 의미 */
테이블 관련 css들
- border : 테이블의 테두리와 셀의 테두리 지정(두가지 전부 지정해야한다.)
- border-collapse : 테이블의 테두리와 셀 테두리를 합칠지 여부를 설정
- empty-cell : 테이블 테두리 설정을 분리시켜준 상태에서 내용이 없는 빈 셀들의 표시 여부를 설정
'Java > UI구현' 카테고리의 다른 글
| 윈도우에서 자주 사용되는 단축키 (0) | 2023.03.21 |
|---|---|
| 2023.03.20 (0) | 2023.03.21 |
| 2023.03.16 (0) | 2023.03.16 |
| 2023.03.15 (0) | 2023.03.15 |
| vsCode에서 자주 사용하는 단축키 (0) | 2023.03.15 |