[Front-End 기본] CSS의 기본 문법(2) - feat. 나만의 MBTI 테스트 만들기
- 박스 모델과 관련된 CSS 속성들
- .html 파일에서 .(dot)을 입력하고 내가 사용할 class의 이름을 입력하게되면 자동완성 기능을 통해 사용할 클래스 이름의 div 태그가 자동완성된다.
.container {
background-color: orange;
height: 200px;
padding-top: 30px;
padding-left: 30px;
width: 70px;
}
.item {
background-color: royalblue;
height: 70px;
max-width: 150px;
margin-bottom: 30px;
border: 4px solid red;
border-radius: 30px;
box-shadow: 30px 10px 30px rgba(0,0,0,0.5);
}- border-radius는 사각형 박스의 모서리 부분의 둥근 부분을 조절하는 기능을 한다.
- border는 요소의 선을 그리는 기능으로 선의 두께, 선의 종류, 선의 색깔 정보를 갖고 있다.
- box-shadow를 통해서 x축, y축의 거리, 흐림 효과, 그림자의 색상을 추가할 수 있다.
- rgba는 rgb+alpha로 alpha 부분은 그림자의 투명도를 나타내는 부분이다.
- 글자의 모양을 정하는 글꼴, 문자 속성
.container {
font-size: 22px;
font-weight: 900px;
font-family: Arial, Helvetica, sans-serif;
line-height: 2;
text-align: center;
color: red;
text-decoration: underline;
word-break: keep-all;
}- font-weight: 은 글자들의 가중치( 글자의 두께 )를 의미한다. 사용값은 100부터 900까지 사용가능하다. 디폴트=400
- font-family: 는 글자의 글꼴을 선택할 수 있는 속성이다. 대표적으로 sans-serif (고딕체) 글꼴을 사용한다.
- line-height: 글자들의 행간 ( 줄 높이 ) 를 설정하는 속성, 줄높이는 font-size * line-height 높이의 px만큼 줄높이가 생긴다.
- text-align: 글자 정렬을 설정하는 속성, center, right, left가 있다. left는 디폴트 값
- text-decoration: 글자를 꾸밀 때 사용하는 속성, underline 등 으로 글자들의 밑줄과 같은 꾸밈을 줄 수 있다.
- word-break: 영 단어는 띄어쓰기를 기준으로 페이지를 늘리고 줄일 때 줄바꿈 처리가 되지만 한글은 글자 1개를 기준으로 하나의 단어로 인식되기 때문에 word-break: keep-all 속성을 사용해 한글도 띄어쓰기를 기준으로 줄바꿈을 실행한다.
- CSS 배경과 관련된 속성들
.back_ground {
width: 300px;
height: 150px;
background-color: blue;
background-image: url("https://tistory1.daumcdn.net/tistory/5782638/attach/7407fb0e17904e14ad5caecdccd881f6");
background-size: 100px;
background-repeat: no-repeat;
background-position: right center;
}- 배경에 이미지를 추가하는 방법은 background-image: url ("사용하려고하는 이미지의 주소") 을 사용한다.
- background-image를 사용해서 이미지를 넣게 되면 배경의 크기 만큼 배경 이미지의 사이즈가 반복되서 출력하는데 이 반복되는 것을 하지 않으려면 background-repeat: no-repeat을 사용한다.
- background-position을 사용해서 이미지의 위치를 조절할 수 있다.
- 박스 요소들의 수평 정렬
.box_model {
height: 200px;
border: 4px solid black;
display: flex;
justify-content: center;
align-items: start;
gap: 10px;
}
.box_model .item {
width: 100px;
height: 100px;
background-color: royalblue;
display: flex;
justify-content: center;
align-items: center;
}- .box_model 클래스에서 height, border 속성을 제외한 나머지 속성들은 .item 자식 요소에 적용되는 속성들이다.
- display: flex;는 수직으로 정렬되는 박스 요소들을 수평으로 정렬하기 위해 사용한다.
- 수평으로 정렬하고자 하는 요소의 부모 요소에서 사용해야 한다.
- justify-content: 는 가로 축을 기준으로 start (왼쪽), center, end(오른쪽)으로 정렬할 수 있다.
- align-items: 는 세로 축을 기준으로 start (맨 위), center, end(맨 아래)로 정렬할 수 있다.
- .box_model .item은 box_model 클래스 내에 있는 모든 .item 요소를 의미한다.
- 모든 .item 요소에 있는 내용에 수평과 중앙 정렬을 하고 있다.
- 변환 효과 - 이동, 회전, 크기 비율 지정
.changeEffect {
height: 100px;
border: 4px solid black;
}
.changeEffect .new_item {
width: 100px;
height: 100px;
background-color: royalblue;
transform:
translateX(50px)
translateY(50px)
rotate(45deg)
scale(1.5);
border-radius: 10%;
}- transform 속성을 이용해서 다양한 변환함수를 통해 요소에 변환 효과를 지정할 수 있다.
- translateX, Y는 부모 요소를 기준으로 X축(오른쪽), Y축(아래쪽)으로 50 px 만큼 이동한다.
- rotate() 는 입력 크기 만큼 회전을 시켜준다. deg는 degree(도)의 약자
- scale() 입력 크기 만큼 배율로 요소의 크기를 조절할 수 있는 변환 함수이다.
- border-radius: 속성은 입력 %만큼 박스 요소에 모서리 부분을 다듬어준다.
- 전환 효과 - 애니메이션 기능을 하는 transition
.Animation {
height: 100px;
border: 4px solid black;
}
.Animation .Ani_item {
width: 100px;
height: 100px;
background-color: royalblue;
transition: 0.4s ;
}
.Animation .Ani_item:hover {
transform: rotate(45deg);
background-color: orange;
border-radius: 50%;
}- 자연스러운 애니메이션 효과를 적용시키기 위해서는 반드시 요소가 동작하기 전 상황에 transition: 속성과 값을 넣어야 한다.
- Animation .Ani_item이 동작 전, Animation .Ani_time:hover가 동작 후 상황이 된다.
- 사용자 화면 크기에 맞게 CSS를 바꾸는 media query
.change_CSS {
height: 100px;
border: 10px solid black;
}
.change_CSS .CSS_item {
width: 200px;
height: 100px;
background-color: royalblue;
}
@media (max-width: 700px) {
.change_CSS {
height: 200px;
border: 10px solid red;
background-color: orange;
}
.change_CSS .CSS_item {
width: 100px;
height: 300px;
}
}- 사용자 화면 크기에 따라 다르게 반응하는 media query
- @media (조건) 는 () 안에 특정 조건을 만족하는 경우에는 새로운 내용을 보여줄 수 있다.