728x90 반응형 프론트엔드19 비주얼 스튜디오 코드⑪ 네비게이션, 이미지 넣기 #header = = = : header의 역할만 함 : div와 똑같은 역할 border: 테두리선 wrap에 높이값 넣지 않는다. 그 이유는 wrap의 높이 값이 고정되어있으면 유동적으로 수정이 불가능 01 웹디자인 참고 사이트 본문 폰트크기 : 13px -14px 눈누: 눈누 (noonnu.cc) 구글폰트: Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Color - Materialize (materializecss.com) Color - Materialize To apply a background color, jus.. 2023. 5. 26. 비주얼 스튜디오 코드⑩ 레이아웃 심화 index: 홈페이지 주소 뒤에 index.html이 숨어있음, 홈페이지 창을 불러오겠다는 뜻 https://www.naver.com/index.html 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com body: 골격 css: 골격을 꾸미는 스타일 언어 스크립트: 동작하게 하는 언어 padding: 안 쪽 여백, 블럭이 패딩값만큼 늘어남 그래서 패딩값만큼 포함해서 블럭 w / h 조정해야함 box-sizing: border-box; padding 값 계산없이 w / h를 패딩값 포함하여 알아서 크키조정해줌 *{} 전체 태그에 적용해줌 margin: 바깥 쪽 여백 모두 0으로, 즉 초기화 해줘야 위치계산할 때 편리함 margin=0; padding=0; *{} 전.. 2023. 5. 26. 비주얼 스튜디오 코드⑧ 영역의 레이어를 바꿔주는 명령어 margin: 50px auto; 위쪽에서 50픽셀 띄워주고 auto는 좌우 자동으로 맞춰줌 01 float float: 띄워서 오른쪽이나 왼쪽으로 위치시킴 float을 하게 되면 2층으로 보내지기 때문에 가상요소로 넣어줌으로써 테두리선이 위로오게됨 가상요소 명령어 #wrap::after{ content:""; display: block; clear:both; } 반응형으로 인해 부모에 기준점을 잡아서 위치를 시켜줘야함 기준점은 부모자리에 position: realative; 으로 잡아준다. 임의지점은 자식자리에 position: absolute; 0,0의 자리를 먼저 알아두면 객체 위치시킬 때 편리하다. 02 영역의 레이어 층을 바꿔주는 명령어 z-index : 레이어 층을 바꿔준다. position:.. 2023. 5. 24. 비주얼 스튜디오 코드⑦ border 사용법 div:nth-child(1) - div 의 첫번째 div를 뜻함 = div:first-child - first도 사용가능 div:nth-child(2) - div 의 두번째 div를 뜻함 div:nth-child(3) - div 의 세번째 div를 뜻함 = div:last-child - 마지막 div를 뜻함 01 border border style : 한번에 지정 가능함 border: 10px dashed #000 / 보더크기 스타일 색 02 블럭구조와 인라인 구조 블럭요소 태그는 자동줄바꿈됨 p태그: 블럭구조 다음줄로 내려가게됨 , 한 단락씩 표시됨 span태그 : strong태그: 글자 굵게 em태그: 비스듬한 글자 span, strong, em: 인라인 구조라서 옆으로 이어지게 됨, 한 줄에 들어.. 2023. 5. 23. 비주얼스튜디오코드⑥ 주문서 작성하기 thead tfoot tbody tbody가 추가 될 수 도 있기 때문에 나중에 넣는 편임 class> style 적용할 때는 . 으로 시작 .table2 명령어를 중복되어 쓸때는 ,(쉼표)를 써주고 같이 적용할 부분을 써주면 된다. *주문서 작성하기 랩 wrap: 웹페이지를 감싸는 역할을 함 큰덩어리이이기 때문에 id를 부여해준다. *{} : 전체적용 margin: 0; : 상단 여백 없애줌 여백없이 랩 적용 h태그: h1- 로고 적용 시 사용 h1은 로고에 사용하지만 로고가 없으니 h1 사용 p태그: 단락 태그 줄 칸 띄우기 padding: 안쪽 여백/ 칸 포함해서 적용됨, 박스 넓이 높이가 같이 늘어남 margin: 칸 제외됨, 칸이 안늘어남 **wrap: height 높이값 적용 안 하는게 좋음,.. 2023. 5. 22. 비주얼 스튜디오 코드⑤ 폼태그 01 폼태그 label: 아이디, 비밀번호 란을 만들 때 사용 input: text 넣는 란 br: enter input type="password" > 텍스트가 가려서 나옴 폼태그 인포박스 chekbox: 여러개 선택하는 체크박스 radio: 선택란 중 하나만 선택할 수 있는 체크박스일 때 사용 name="a" 이름을 부여해서 하나만 선택할 수 있게 할 수 있다. value: 원하는 데이터 수집할 때 용이 color h구조는 블록구조 h4태그로 br 대신에 줄바꿈을 사용할 수 있다. date: 날짜박스 file: 첨부파일을 넣을 수 있음 input type="file" button : 버튼 박스 input type"button" value="클릭" submit: 전송단추 셀렉트문: 패밀리로 탭구성 예제.. 2023. 5. 19. 이전 1 2 3 4 다음 728x90
