📘 html 태그
<p> : 문단 태그 <br> : 줄바꿈 태그 <h1>~<h6> : 제목 태그 <ol> : 순서 목록 태그 <ul> : 순서가 없는 목록 태그 <li> : 목록 내용 <b> : 단순하게 글자를 굵게 해줌 <img> : 이미지 태그 <a> : url 태그 <i>, <svg> : icon, 이모티콘 태그
📘 단위
px : 가장 기본이 되는 픽셀
em : 부모 태그에 font-size 있으면 그것을 1em으로 계산
rem : html font-size를 1rem으로 사용 (16px = 1rem)
vh, vw : 전체를 100등분으로 나눠 사용 (100vh = 전체 길이)
보통 수치를 나타낼 때 px, %를 씁니다. 그 중에서도 %를 쓰는 방법은 부모 태그인 parent 클래스의 넓이가 100px로 정의되어 있고 자식 태그인 child 클래스의 넓이가 60%로 지정되었다면 그 60%는 바로 부모 태그의 100px에서의 60%를 의미하기 때문에 child클래스의 수치는 60px로 설정됩니다.
📘 display:flex;로 가운데 위치하게 하는 법
.child {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
📘 display:grid;를 이용해 레이아웃 구역 나누기
<div class="container">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
.container {
width: 100px;
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr; /*가로 나누기*/
grid-template-rows: 1fr 1fr 1fr; /*세로 나누기*/
grid-template-areas:
"top top"
"right right"
"bottom bottom";
}
.top {
grid-area: top;
}
.right {
grid-area: right;
}
.bottom {
grid-area: bottom;
}
grid-template-columns: 3fr 1fr;
이렇게 설정한다면 가로가 3:1로 두 부분으로 나눠진다.
물론 grid-template-columns: 100px 100px 100px;로도 가능하다.
📘 select, type 별 input 태그
📘 textarea 태그 고정시키는 resize: none;
<textarea style="width:300px; height: 200px; resize:none;"></textarea>
📘 input에 값이 입력되지 않았는데 버튼을 누르면 경고 알람이 뜨게 하는 required
<form class="form" action="">
<input class="input-style" type="text" placeholder="휴대폰 번호 또는 이메일 주소" required>
<input class="input-style" type="text" placeholder="성명">
<input class="input-style" type="text" placeholder="사용자 이름">
<input class="input-style" type="password" placeholder="비밀번호" required minlength="5">
<input type="submit" class="submit-style" value="가입">
</form>
📘 position
position: absolute;
부모 태그나 클래스를 기준으로 함
position: fixed;
브라우저를 기준으로 함
position: relative;
원래 자신의 위치
position: static;
기준 X
📘 position를 이용해 스크롤을 내려도 고정되도록
.aa {
position: fixed;
z-index: 1; /*z축에서 숫자가 높을수록 위로 나타난다.*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
📘 가상 클래스, 가상 요소
:hover
마우스가 올라가면 작동
p:nth-child(n)
p 태그 중에서 n 번째 선택
p:not(.a)
p 태그 중에서 a 클래스가 아닌 것만 선택
.a:nth-of-type(n)
a 클래스 중에서 n 번째 선택
.a::first-line
a 클래스에서 첫 번째 줄만 선택
.a::first-letter
a 클래스에서 첫 번째 문자만 선택
.a::before{ content:"안녕"; }
a 클래스 문자가 시작되기 전 content 출력
.a::after{ content:"종료"; }
a 클래스 문자가 출력되고 마지막에 출력
📘 투명한 버튼을 만들자
.book button{
background-color : inherit;
}book 클래스 안에 있는 button 태그의 색을 book 클래스와 동일하게 하거나 투명하게 하고 싶다면 백그라운드 컬러를 inherit로 설정하면 된다.
📘 정해진 규격을 벗어났을때 자동적으로 변하게 해주자
.book {
overflow : auto;
}브라우저 스스로 스크롤을 만들어준다. 만약 스크롤을 자동적으로 만들고 싶지 않고 보여지게 하고 싶지 않으면 overflow : hidden;으로 설정해주면 된다.
📘 변수 사용하기
$color : "#111";
color : $color;
📘 extend - css 스타일 확장
<button class="btn"></button>
<button class="btn-1"></button>.btn {
padding : 10px 2px;
cursor : pointer;
background-color : red;
}
.btn-1 {
@extend .btn;
background-color : blue;
}
📘 %button - 임시 클래스 설정
%button { /*버튼이라면 보통 따라야한다고 설정해두는 임시클래스*/
background-color : black;
}
.btn-1 {
@extend %button;
border: 1px solid red;
}
📘 마우스를 올리면 애니메이션 효과
transition으로 애니메이션 효과를 줄 수 있다. 아무런 동작이 없을때 top으로부터 100px이 떨어져 있도록 설정해줬고, box-2에 hover가 되면 top으로 부터 0px이 되면서 box-2가 box자리로 올라오면서 채워지는 효과를 볼 수 있다.
