1. px, %, em, rem 차이점
- px은 고정값
- %는 사용자가 보이는 화면에서 차지하는 비중 부모에 대해 상대적인 비율로 볼 수 있음
- em은 기준이 되는 값에 대해 배수로 적용해주는 것
ex) 기준값 16px일때, 1em=16px, 2em=32px - rem은 문서의 기본값의 배수 rem의 r은 root로 뿌리는 문서 전체인 html 값이 기준이 됌
em이나 rem을 사용하면 대표값만 변경해줘도 하위의 값들이 비율은 유지하면서 자동 변경되므로 전체값 변경이 쉽다.
2. grid로 레이아웃 잡기
그리드는 플렉스보다 최신이고, 실제로 현업에서도 많이 쓰인다고 한다.
학습하면서 적용해보니 구조도 깔끔하게 잡을 수 있고 편한 것 같다.
네이버 메인페이지를 예로 grid를 활용해서 레이아웃을 잡으면 아래의 코드와 같다.
html
구조를 잡아준다.
상단 중앙부 하단 이렇게 잡아서 총 4행2열의 그리드를 만들어준다.
<div class="container">
<div class="top"></div>
<div class="middle-lt"></div>
<div class="middle-rt"></div>
<div class="bottom-lt"></div>
<div class="bottom-rt1"></div>
<div class="bottom-rt2"></div>
</div>css
아래와 같이 css로 레이아웃을 한번에 잡을 수 있다.
4행 2열이므로 원하는 배치의 크기를 고려해서 비율만큼 숫자를 위와 같이 가져가면 된다.
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 0.65fr 0.35fr ;fr이란 유연한 크기를 갖는 단위이다. 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 낸다.
고정된 px값을 부여하는 것도 가능하고, px값을 일정 영역에 주고 나머지 영역에 fr값을 주는 것도 가능하다.
<style>
.container{
width:1200px;
height: 800px;
margin:0 auto;
border:1px solid #333;
opacity: .5;
/* 그리드 사용 */
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 0.65fr 0.35fr ;
grid-template-areas:
"top top"
"middle-lt middle-rt"
"bottom-lt bottom-rt1"
"bottom-lt bottom-rt2";
}
.top{
grid-area: top;
background-color: red;
}
.middle-lt{
grid-area: middle-lt;
background-color: blue;
}
.middle-rt{
grid-area: middle-rt;
background-color: greenyellow;
}
.bottom-lt{
grid-area: bottom-lt;
background-color: yellow;
}
.bottom-rt1{
grid-area: bottom-rt1;
background-color: purple;
}
.bottom-rt2{
grid-area: bottom-rt2;
background-color: aqua;
}
</style>
위의 코드를 실행하면 이와같은 결과값을 얻을 수 있다!
3. form태그 그리고 get, post
폼태그 속성에는 name, action, method, target 등이 있다. 폼 속성을 이용해서 전송할 때 어디로, 어떻게 보낼지 정한다.
- action:폼을 전송할 서버 쪽 스크립트 파일을 지정한다.
- name: 폼을 식별하기 위한 이름을 지정한다.
- accept-charset : 폼전송에 사용할 문자 인코딩을 지정한다.
- target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
- method : 폼을 서버에 전송할 http 메소드를 정한다. (GET 또는 POST)
GET과 POST 차이점
텍스트전송할 http 메소드 종류인 GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만 다른 방식으로 처리된다.
참고 사이트
- GET : URL 끝에 폼 데이터를 붙여서 눈에 보이게 보낸다.
- POST : 내부적으로 보이지 않게 보낸다.
+ HTML/CSS 관련 도움되는 사이트 :)
-
css diner
https://flukeout.github.io/
게임처럼 css 선택자에 대해 학습할 수 있어서 재밌는데 은근 도움이 많이된다.
-
Bootstrap Icons
https://icons.getbootstrap.kr
아이콘을 따로 이미지로 저장하지 않아도 코드를 불러와서 추가할 수 있다. 매우 간편함! -
Font Awesome
https://fontawesome.com
폰트어썸 역시 부트스트랩 아이콘이랑 비슷한 방식이다.
그리드 예시 쏘 귣👍