1. 여백설정
margin: 20px;
margin: 0px 30px, 0px, 30px;
margin: auto;
padding: 20px;margin은 바깥여백, padding은 안쪽 여백이다.
margin: 20px 이라는 말은 모든 바깥 여백을 20px로 설정하라는 의미이며
margin: 20px(상) 20px(우) 20px(하) 20px(좌) 과도 같은 말이다.
margin: auto 는 상하좌우 바깥 여백을 최대한 밀게 설정하는 것이다.
padding: 20px 은 안쪽 여백을 20px 만큼 벌려달라고 설정하는 것이다.
2. font 적용
Google Fonts
여기서 언어에 맞는 폰트들을 다운 받을 수 있다.
<title>
</title>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Gamja Flower', cursive;
}
</style>link 버전으로 복사 해 오면 되지만 이 때 3번째에 하이퍼링크로 걸려있는 코드를 가져와야 적용이 된다.
이 링크를 title 태그 아래에 넣은 다음, style 태그 아래에 열어주고, *와 {중괄호} 를 열어서 font_family에 있는 코드를 넣어주면 웹 페이지 전체에 동일한 폰트로 적용이된다.
3. 버튼 생성
<div class="mytitle">
<button>버튼입니다</button>
</div>기본적인 버튼생성 태그는 이렇다.
만약 여기서 button에 css 적용을 하고 싶으면 따로 class를 적용해도 되지만.mytitle > button{ width: 200px; height: 50px; background-color: transparent; }위와 같이 "mytitle" 안에 있는 button에 대한 스타일만 따로 적용도 가능하다.
background-color: trasperant 는 투명색을 적용하는 코드로, 버튼에 색이 채워지는걸 원하지 않으면 위 코드로 투명색을 적용시키면 된다.
만약 버튼에 마우스를 올렸을 때 나타낼 반응을 추가 하고 싶으면 아래와 같은 코드를 입력하면 된다.
.mytitle > button : hover{ border : 2px solid white; }이 코드는 button에 마우스를 hover, 즉 올렸을 때 나타낼 반응을 적용한 것으로, border 은 테두리를 만드는 코드이며 2px의 하얀(white) 실선(solid)이 나타나도록 설정해 놓았다.
4. 선형 그래디언트
<style>
background: linear-gradient(진행방향, 색상1, 색상2);
//혹은
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
</style>첫번째 코드는 뒤쪽 배경 색상을 색상1과 색상2로 그라데이션 효과를 준 것으로, 앞선 진행방향은 작성 안할 경우 기본적용으로 위에서 아래 방향으로 그라데이션이 적용되고, 만약 방향을 변경하고 싶으면 시작지점은 생략, 도착지점에만 to 를 붙여서 to top, to bottom, to right, to left 등으로 변경가능하고 deg를 적용하여 각도로도 방향지정이 가능하다.
ex)
0deg : 아래에서 위 방향
45deg : 하단 왼쪽에서 상당 오른쪽 방향(45도)
90deg : 왼쪽에서 오른쪽 방향
180deg :상단에서 하단 방향
물론 음수값도 적용 가능하다.
두번째 코드는 이미지 위에 그라데이션 효과를 적용한 것으로, 크게 보면 구성은 같으나 색상지정을 할 때 rgba 값을 적용시켰다.
red, green, blue값과 a(알파) 값을 지정한 것인데, 이 때 마지막 알파값은 완전투명한 0부터 불투명한 1 사이의 값으로 적용 가능하다.
