[새싹 프론트엔드] 22.10.25
* 리스트 ( list )
ol type을 A가 아닌 숫자 1로 했을 때는
A~D가 아니라 1~4로 나타난다
li로 했을 때는 앞에 조그만한 검정색 점이 생기는데
CSS에서 이걸 바꿀 수도 있다
정의 리스트라고 한다
대충 이런 느낌인 것 같다
* 리스트 꾸미기
여기서 ul에다가 list-style-position : inside; 를 입력해주면
앞에 마커들이 li의 영역에 들어간다
여러가지 형태들인데 none이랑 square를 제일 많이 사용할 것 같다
이런 식으로 이미지도 마커로 넣을 수 있다
* 네이게이션 바
ul 에 margin:0 , padding:0 을 주는 이유는 안주면 뭔가 투명인간이 있는거처럼 흰 공간이 생겨서
아무래도 예민한 사람들에겐 불편해서 그런 것 같다
이렇게 display: inline을 주어도 옆으로 줄을 서지만
float: left 라는 설정을 주어도 옆으로 줄을 선다
float를 사용하면 그 부모에게 overflow: hidden을 반드시 주라는 내용이다
float는 솔직히 말하면 나에겐 아직 어려운 개념이다
얘 때문에 맘고생한게 한두번이 아님 말썽꾸러기 특성이다
* Form 태그
로그인, 회원가입 같은거 할 때 자주 볼 수 있는 화면들이다
아무 생각없이 회원가입하던 난 이게 이렇게 복잡하게 되어있는지 몰랐다
이런게 있다고 한다
여기서 중요한건 input type = password 이다
이걸 입력하면 문자 대신 *을 출력해서 뭘 눌렀는지 남들은 모르게 할 수 있다
체크박스와 라디오버튼의 차이는 체크박스는 중복 선택이 가능하지만
라디오버튼은 한가지만 선택이 가능하다는 점이다
* Label 태그
하나로 묶어버리는 태그이다
예를 들어
이런 그림이 있다고 하면 저 조그만한 체크박스만 눌러야 체크되는게 아니라
라벨로 그림을 같이 묶어버리면 그림을 눌러도 체크가 된다
radio를 사용할 때는 반드시 name을 동일한 것으로 묶어줘야한다
* fieldset
placeholder는 힘줄 끊긴 느낌으로다가 약하게 글씨가 적혀진다
따라쓰라는 느낌이다
* 폼 꾸미기
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅