grid와 flex의 차이
flex는 1라인만을 정의를 하거나 한 축에 있는 한 영역을 정의해서 그 영역안에서 요소를 배치합니다.
grid는 가로축과 세로축 영역을 동시에 활용할 수 있습니다.
저런식으로 flex는 가로면 가로 세로면 세로로 구성 할 수 있지만 grid는 가로와 세로를 동시에 구성할 수 있습니다.
그렇다고 flex도 grid 처럼 구성은 할 수 있습니다.
.flex-container{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
이런식으로 구성은 가능합니다.
하지만 grid와 flex에 가장 큰 차이점은 불규칙적으로 구성을 바꿀 수 있다는 점인 거 같습니다.
.second-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px,auto);
margin-top: 50px;
}
.one{
grid-column: 1/3;
grid-row: 1;
}
.two{
grid-column: 2/4;
grid-row: 1/3;
}
.three{
grid-column: 1;
grid-row: 2/5;
}
.four{
grid-column: 3;
grid-row: 3;
}
.five{
grid-column: 2;
grid-row: 4;
}
.six{
grid-column: 3;
grid-row: 4;
}
이런식으로 grid는 구성에서 좀 더 디테일하게 요소를 배치 할 수 있습니다.
회원가입
form은 정보를 서버 컴퓨터쪽에 전달하기 위한 html의 형태입니다. 대표적으로 회원가입 페이지가 있습니다.
<form action="">
<label for="username">이름</label>
<input type="text" id="username" name="username" placeholder="이름을 입력해주세요.">
<br>
<label for="email">이메일</label>
<input type="text" id="email" name="email" placeholder="이메일을 입력해주세요">
<br>
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요">
</form>name은 흔히 코딩에서 말하는 변수를 의미합니다. label에 for에 같은 name값을 사용하면 연결이 됩니다.
placeholder는 검색창 같은 곳을 보면 입력을 안 해도 입력이 되있는 희미한 텍스트입니다.
input같은 경우는 여러가지 type이 있는데 text는 말 그대로 text를 입력할 수 있는 공간입니다. 이를 password로 하면 대부분에 사이트에서 비밀번호는 중요한 정보라 안 보이게 만드는 것입니다.
radio 버튼
input에 type을 radio로 하면 버튼이 만들어집니다. 이 때 name값으로 묶여서 같은 name에 radio버튼은 하나 밖에 선택이 안됩니다.
<p>성별을 입력해 주세요.</p>
<input type="radio" name="gender" value="male" id="option-1">
<label for="option-1">남자</label>
<input type="radio" name="gender" value="female" id="option-2">
<label for="option-2">여자</label>
name을 만약 다르게 하면
<p>성별을 입력해 주세요.</p>
<input type="radio" name="gender" value="male" id="option-1">
<label for="option-1">남자</label>
<input type="radio" name="gender2" value="female" id="option-2">
<label for="option-2">여자</label>
이런식으로 둘 다 체크할 수 있습니다.
select
select는 선택지를 고를 수 있게 해주는 요소입니다.
<select name="age" id="age">
<option value="age1">18~29</option>
<option value="age2">30~50</option>
<option value="age3">51~70</option>
</select>이런식으로 본인이 값을 option으로 두면 사이트에 option에 개수 만큼 생성이 되고 사용자는 선택지 안에서 선택을 할 수 있습니다.
textarea
textarea는 어찌보면 input과 비슷하게 text를 작성할 수 있는 공간을 의미합니다.
<label for="introduce">자기소개해주세요</label>
<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
file올리기
input 타입을 file로 하면 파일 첨부하기 버튼 또한 만들 수 있습니다.
<input type="file">
반응형
화면 크기에 맞춰 요소들에 CSS가 바뀌는 것을 말합니다. 가끔 모바일로 사이트를 들어가면 pc처럼 화면이 넓어서 보기 힘든 페이지들을 보실 수 있는데 그런 사이트는 반응형이 적용이 안 된 사이트들입니다.
반응형을 적용 하는 법은 다음과 같습니다.
@media screen and (max-width: 700px) {
.welcome{
position: relative;
font-size: 30px;
}
.welcome br{
display: none;
}
}
@media screen and (max-width: 560px) {
.welcome{
font-size: 15px;
position: relative;
text-align: center;
}
.welcome br{
display: none;
}
}해당 코드는 사이트에 width값이 700px일 때와 560일 때 사이트에 다음과 같은 효과가 부여됩니다.
애니메이션?
애니메이션이 변하는 시간을 설정하는 transition과, 마우스를 올렸을 때 설정한 속성이 나오게 하는 hover가 있습니다.
Transition
transition에 코드는
.box{
background-color: blue;
transition: 1.5s;
}이런식으로 작성하면 설정한 애니메이션이 나오기 까지 걸리는 시간이 1.5초 걸린다는 뜻입니다.
Hover
이제 애니메이션이 발동하기 위해 hover를 설정하면
.box:hover{
background-color: orange;
}box라는 요소에 마우스를 가져다 댔을 때 orange색으로 변하는 코드가 완성됩니다.
이를 한번에 작성하면
.box:hover{
background-color: orange;
transition: 1.5s;
}마우스를 가져다 댔을 때 orange색으로 서서히 바뀌면서 1.5 뒤에는 orange색으로 바뀌는 코드가 완성됩니다
