※ 읽기 전 주의사항 ※
1. 정보글 적을 때 도움이 되길 바라며 쓴 글임
2. 코알못이 구글링해서 적는 내용임 맹신하지 말 것
3. 아카라이브에서 작동되지 않는 기능은 뺐음
목차
0. 기초 테크닉
1. 틀 테두리 만들기
2. 틀 색칠하기
3. 틀 배경 이미지 삽입하기
0. 기초 테크닉
먼저, html 틀 코드는 이렇게 구성돼있어
<div>내용</div>
만약 틀에 어떤 기능을 넣고싶다면 이렇게 삽입하면 돼
<div style="기능1:설정; 기능2:설정; ... 기능n:설정;">틀 안의 내용</div>
이 글에서 소개하는 기능들의 예시는 문장 전체 기준이니 그 점 주의해서 봐줘 :)
1. 틀 테두리 만들기
틀에 테두리를 넣고싶다면, 이 코드를 넣으면 돼
관련 코드는 빨강색으로 색칠해놨어
만약 틀의 모서리를 둥글게 하고 싶다면, 위의 코드에 border-radius를 넣어줘
틀의 크기를 조절하고 싶다면, width나 height를 넣어주면 돼
둘 중에 하나만 적는 경우 반대쪽은 auto로 설정 돼
<div style="width:○; height:◇;">틀 안의 내용</div>
○와 ◇에는 다음과 같은게 들어갈 수 있어
| 종류 | 해석 |
| auto | 걍 알아서 맞춰준다는 뜻 |
| % | 백분율로 맞춰줌 |
| px | 픽셀 단위로 직접 지정 가능 |
2. 틀 색칠하기
먼저 틀 배경에 단색으로 색칠하는 코드는 다음과 같아
만약 그라데이션을 넣고 싶다면, background에 gradient를 추가로 넣어주면 돼
추천 그라데이션 사이트 : https://uigradients.com
먼저 선형은 linear-gradient를 사용해
□에는 그라데이션의 각도를 숫자로 넣어주면 돼
a
원형 그라데이션을 넣고싶다면 radial-gradient를 대신 넣으면 돼
모양 크기 위치는 기본적으로 적지 않아도 돼
적는 경우, 모양은 원으로 하고 싶다면 circle, 타원 모양은 ellipse로 적어주면 되는데...
적지 않는 경우 ellipse로 자동 설정돼
크기는 그라데이션의 크기를 정하는건데, 설정별로 이렇게 세팅 돼
(circle / 10% 20%로 설정)
| closest-side 그라데이션이 그라데이션 가장자리가 중심에서 가장 가까운 모서리와 만나는 곳까지만 존재 | closest-corner 그라데이션이 그라데이션 가장자리가 중심에서 가장 가까운 꼭짓점과 만나는 곳까지만 존재 |
| farthest-side 그라데이션이 그라데이션 가장자리가 중심에서 가장 먼 모서리와 만나는 곳까지만 존재 | farthest-corner 그라데이션이 그라데이션 가장자리가 중심에서 가장 가까운 꼭짓점과 만나는 곳까지만 존재 |
□% △%은 그라데이션 중심의 위치를 정하는거야 원하는 숫자를 넣어주면 돼
3. 틀 배경 이미지 넣기
틀에 단색/그라데이션 색칠 대신 이미지를 넣고 싶다면 이 코드를 넣으면 돼
<div style="background-image:url('이미지 주소'); background-repeat:no-repeat; background-size:cover;">틀 안의 내용</div>
내용
내용
내용
내용
내용
내용
내용
내용
내용
내용
background-image:url('이미지 주소'); 부분은 배경에 어떤 이미지를 넣는건지 설정하는 부분이고,
background-repeat:no-repeat; 부분은 이미지를 반복하지 않는다는 설정,
background-size:cover; 은 이미지를 틀에 꽉 채운다는 설정이야
만약 이미지를 패턴처럼 반복해서 넣고 싶다면 background-repeat:no-repeat; 를 삭제하면 돼
이미지의 크기를 조절하고 싶다면 background-size:cover; 에서 cover를 백분위라던가...px같은걸로 적어주면 돼
색상코드는 구글에 [ Hex Color ] 라고 검색하면 돼
궁금한거 있으면 댓글로 물어봐
아는건 최대한 답 해줄게 :)
