1-5~6 CSS 기초

tjdalfo127·2022년 5월 22일
0

웹 배우기

목록 보기
4/5
로그인페이지

하나의 이미지(결과물)을 만들려면 div 안에 묶어서 만들어야 한다.
body에서 div로 묶어준 내가 만들 애들의 'class="이름"' 로 이름을 정하고(<div">" 안에 클래스 가 들어가 있어야 함)
헤드에서 '.이름 {}' 를 적고 {}안에다가
width(가로)
height(세로)
background-color(배경색)
text-alighn(글자정렬)
border-radius(배경색의 네모박스의 모서리 둥글기 정도)

등등

필요에 따라 태그를 적고
: 숫자 적고 단위는 주로 px


html 글자 보기 편하게(깔끔하게) 정렬하기
'ctrl+A > ctrl+alt+l'
그리고 필요한 부분들은 'tap'으로 한줄 오른쪽 밀어주기


<정렬 효과내는 여백주는 방법>
padding: 안쪽 여백(네모 박스 안쪽 글자와 네모 사이 공간)주는 것

margin: 바깥쪽 여백(흰 빈공간)주는 것
+margin: auto; 로 설정하면 좌우 빈 여백이 같아지면서 가운데 정렬 효과
+박스형태는 옮겨지는데 버튼이나 안 옮겨질 경우 display: block를 .이름 {} 안에 넣어서 강제로 정렬해주기


스타일 두가지 이상 중첩하는 방법
class="이름1 (띄우고) 이름2"> 설정 하면 끝.

profile
배워가는 코딩 어린이

0개의 댓글