| 일수 | 일자 | 교과목 | 내용 | 편성시간 |
|---|---|---|---|---|
| 16 | 24/12/11 | 프론트엔드 | HTML/CSS | 8 |
| 17 | 24/12/12 | 프론트엔드 | HTML/CSS | 8 |
들어가기 전에
vscode에서 !를 누르고 엔터를 치면 기본적인 틀이 완성된다.
Live Server를 설치하고 Open with Live Server를 열면 html 문서를 수정한 후 저장할 때마다 실시간으로 반영되는 html 페이지를 확인할 수 있다. (매번 새로고침을 해줄 필요가 없어서 편하다.)
HTML
태그
a 태그
radio
name을 맞추고 value를 각자 주면 원하는 radio 하나를 선택할 수 있다.
checkbox
checkbox는 name을 맞추면 나중에 db에 전송될 때 하나로 묶여서 전송된다.
(데이터 관리 편의성을 위해)
button
버튼에서 type을 submit으로 두면 서버로 데이터가 전송된다.
이때 서버는 상단에 <form action="ex08.html" method="POST">으로 명시한 곳이다.
서버로 전달해야할 정보가 있을 경우 form 태그는 GET보다는 POST로 두는 걸 추천 (url이 표시되는 곳에 사용자가 입력한 데이터가 함께 나오기 때문에)
그냥 button은 아무런 기능이 없다.
file
만약 파일을 첨부해야 한다면 form 태그에 enctype="multipart/form-data" 을 추가해야한다.
placeholder
이름은 value값을 주었기 때문에 이미 채워진 상태이며, 아래는 placeholder만 써서 회색으로 안내만 되어있다.
div
span
속성
주석
/* 내용 */
개발자 도구에서 Ctrl+/로 쉽게 사용 가능
개발을 끝내고 실제로 배포할 때는 가급적 주석을 지워야 한다.
-> 이름을 보고 내용을 예측하는 사람이 있을 수 있으므로 (변수 이름도 마찬가지로 예측할 수 있는 이름은 피하자)
+)
name
추후, name=" "는 jsp코드에서 request.getParameter(" ")의 내용값과 서로 맞춰줘야하는 곳이다.
playload
개발자도구(f12) - network - payload 에서 서버로 전송한 데이터와 값을 볼 수 있다.
단위
css에서 사용하는 단위: px, %, rem, em, vh, vw
rem : 루트 글꼴 크기에 비례하여 상대적으로 바뀌는 단위 (루트 기준)
em : 자기 바로 위의 것을 기준으로
px, %, rem 정도는 외워두자.
자식과 자손
/*자식 */
div > span {
background-color: greenyellow;
}
/*자손*/
div span {
background-color: blue;
}
아래는
로 감싸져있으므로 자식태그에는 적용이 안되고 자손태그에만 적용됨
(자식은 직계, 자손은 아래 전체)
focus, active, hover
focus : 커서가 있을 떄
active : 마우스로 누르고 있을 때
hover : 마우스가 올라가있을 때
child
:nth-child(" ")
몇 번째 혹은 짝수나 홀수 등 지정된 속성에만 css를 줄 수 있다.
list-child(" "), first-child(" ") 와 같은 선택자도 있다.
css
css와 html 분리
<link rel="stylesheet" type="text/css" href="./test.css" />와 같은 내용을 head에 추가해서 css 부분을 따로 분리할 수 있다.
block
block : 하나의 칸을 다 차지하고 무조건 다음줄 표시
inline-block : 같은 줄에 표시
block:부모의 전체 너비를 차지
inline: 내용의 크기만큼 차지, 같은 줄에 표시
inline-block : inline처럼 같은 줄에 표시하고 칸이 부족하면 다음줄로
none
none : 화면에는 안 보이지만 코드상으로는 존재
position
relative, absoulte, fixed
