[CSS] CSS 구성 요소
in Study on Web
CSS는 HTML로 이루어진 홈페이지를 예쁘게 꾸며주는 요소이다.
margin, flex, border 등 요소가 많은데 하나씩 알아보자.
기본적으로 CSS 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style></style> -->
<style>
/* 모든 span 태그에 대해 해당 스타일을 적용한다. */
span{
color:blue;
font-size: larger;
}
</style>
<!-- 외부 파일 불러오기 방식 -->
<!-- <link href="css경로" rel="stylesheet"> -->
<link href="./style.css" rel="stylesheet">
</head>
<body>
<!-- inline 방식 style="" -->
<div style="color:red;">
텍스트1
</div>
<span>
반갑습니다.
</span>
<span>식곤증</span>
<h1>외부 CSS</h1>
</body>
</html>
style 태그를 이용하거나, 아니면 외부 파일로 불러오는 방식을 사용할 수도 있다.
혹은 태그에다가 직접 요소를 부여할 수도 있다.
선택자 (class, id)
<style>
/* 모든 태그에 적용한다 */
*{
color:navy;
}
/* div 태그에 대해서 적용한다 */
div{
font-size: xx-large;
}
/* class 선택자 : 다중 지정 가능 */
.my-class{
color:brown;
}
.aa{
font-style: italic;
}
/* id 선택자 중복 id를 부여하면 안됨. #으로 가져옴. */
#atta{
color:red;
}
</style>
...
<body>
헬로헬로
<div class="my-class aa">
안녕하세요
</div>
<h1 class="my-class">
감사해요
</h1>
<span id="atta">
잘있어요
</span>
</body>
class랑 id를 이용하여 선택자를 지정할 수 있다.
차이점이라면 class는 다중 선택이 가능하지만, id는 그렇지 않다.
그리고 css에서 작성할 때 클래스는 .을 써야하고, id는 #을 사용한다.
폰트
<style>
.font-wrapper{
/* color -> 폰트의 색 */
color: red;
/* font-size -> 폰트의 크기 */
font-size: 30px;
/* font-weight -> 폰트의 두께 */
font-weight: bold;
font-family: 'Noto Sans KR', sans-serif;
}
</style>
폰트는 위와 같이 할 수 있다.
- color : 폰트의 색 지정
- font-size : 폰트의 크기 지정
- font-weight : 폰트의 두께 지정
- font-family : 폰트 종류 지정
텍스트 정렬
<style>
.text-left{
text-align:left;
}
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
</style>
text-align 을 사용해서 지정이 가능하다.
테두리 (border)
<style>
/* border : 두께, 유형, 색상 */
.border-test{
border : 1px solid red;
border-radius : 50%;
}
</style>
border을 통해서 테두리를 지정할 수 있으며,
두께, 유형, 색상 순서대로 구성을 시킨다.
그리고, border-radius 속성을 이용하면 모서리를 둥글게 만들 수 있다.
배경색깔 채우기
<style>
.box{
background-color: red;
}
</style>
background-color 속성을 이용해서 사용이 가능하다.
배경을 사진으로 채우기
<style>
.image-wrapper{
background-image: url("./images/img3s.jpg");
width: 400px;
height: 400px;
/* 이미지 크기가 모자라기 때문에 부족한 만큼 이미지를 반복해서 채운다. */
/* 이미지 반복 설정 */
background-repeat: no-repeat;
/* background-size : 이미지 크기 맞춤 설정 */
/* contain : 가로 세로 비율을 맞춰서 확대/축소 */
/* cover : 비율 상관없이 꽉채우기 */
background-size : cover;
}
</style>
이미지로 배경을 채우는 것도 가능하다.
여기서
- background-repeat : 배경을 반복해서 나열시켜서 너비와 높이를 꽉 채운다.
- backgrount-size : cover로 하면 비율 상관없이 꽉채우고, contatin으로 하면 비율을 맞춰 확대, 축소한다.
flex
<style>
/* flex는 부모에서 부여한다.
flex는 메인축과 교차축이 존재한다.
메인축이 flex-direction이며, 기본값 : row(횡), 그리고 column(종)이 있다.
*/
.a-wrapper{
display: flex;
/* flex-direction은 메인축의 방향을 결정한다. */
height: 300px;
background-color: black;
/* 메인축 정렬 */
/* justify-content: center; */
justify-content: space-between; /*일정한 간격에 따라서 배치*/
/* 교차축 정렬 */
align-items: center; /*가운데로 정렬*/
}
.box{
width:80px;
height:80px;
border: 1px solid blue;
background-color: aqua;
}
.b-wrapper{
background-color: azure;
display: flex;
}
</style>
정렬을 하는 부분에 있어서 핵심이라고 할 수 있다.
display : flex 태그를 통해서 flex지정을 한다.
flex-direction : 메인축의 방향을 지정한다.
- row : 횡 정렬
- column : 종 정렬
그리고 justify-content 를 통해서 메인축 내 아이템들의 정렬 방식을 지정한다.
- center : 가운데 정렬
- space-between : 아이템 사이의 일정한 간격에 따라 정렬
- space-evenly : 아이템 사이와 아이템과 벽면 사이의 간격이 모두 일정.
align-items는 컨테이너, 박스 내부에서 주축의 위치를 설정한다.
- flex-start : 교차축에서 컨테이너의 끝 지점 (row:위, column:왼쪽)
- center : 교차축의 가운데
- flex-end : 교차축에서 컨테이너의 끝 지점 (row:아래, column:오른쪽)
나머지는 MDN 사이트에서 참고해볼 수 있다.
z-index
<style>
.b1{
z-index:1;
}
.b2{
z-index:2;
}
/*b2클래스가 b1보다 더 위로 오게 됨.*/
</style>
CSS에서 3차원 요소를 부여하여 겹치는 상황이 오면 무엇이 제일 위로 올지 정하는 것이다.
값이 클수록 더 잘보인다.
