padding 글자 문단과 경계 테두리 사이의 간격 border 패팅을 감싸는 경계 테두리 margin 전체 웹 페이지와 border 사이의 거리

폰트 설정 구글웹폰트를 사용하여 원하는 폰트 설정 가능 하단 링크 접속 https://fonts.google.com/?subset=korean&noto.script=Kore 원하는 폰트 설정 후 굵기 등을 정하고, 두 가지 코드를 복사하여 style tag 자리에 입력 style 코드 font 선언 코드 완성도 높은 CSS 사용: 부트스트랩 버튼이나 카드 등 완성도 높은 디자인을 사용할 수 있음. 위와 같이 head tag 안에 link, script에 부트스트랩 사용을 위한 코드를 넣어줌. https://getbootstrap.com/docs/5.0/components/buttons/ 위 link에 접속하여 원하는 스타일을 선택하여 해당 tag를 붙여넣어줌. ...내용... -> 해당 내용을 부트스트랩..

사용방법 head 안에 style tag 생성 css 이름 설정 및 내용 입력 로그인 페이지 ID: PW: 로그인하기 CSS 종류 배경관련 background-color background-image background-size 사이즈 width height 폰트 font-size font-weight font-family color 간격 margin padding reference 스파르타코딩클럽_웹개발종합반_강의자료

Cascading Style Sheets : 웹 페이지의 디자인적 요소를 설명하는 스타일 시트 언어 HTML, JS와 같이 사용 됨. 기타 관련 용어 정리 XML(eXtensible Markup Language)기계가 읽을 수 있는 형식으로 문서를 인코딩하는 규칙/언어. 마크업/마크다운 언어 차이: 마크업이 좀 더 복잡하고 css,JS등과 함께 사용가능. 마크다운(웹사이트, 노션, ReadMe파일...)은 더 간단하지만 사용 범위가 좁음. 스타일시트언어 종류 SASS(Syntactically Awesome Style Sheets) LESS(Leaner Style Sheets) Stylus XSL-FO(eXtensible Stylesheet Language Formatting Objects)

head: 페이지 속성 정의, 필요한 스크립트 불러옴 body: 본문내용 예시 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? reference Chat GPT 스파르타코딩클럽_웹개발 종합반_강의노트

Tag란? : HTML등의 마크업 언어의 가장 기본적 속성으로 웹페이지 구조 정의 사용방법 내용 종류 h1: 제목, h6 까지 있음 p: 문단 나누기 a: 하이퍼링크 img: 이미지 ul: 리스트, 중간 li: 리스트, 최하위 ol: 리스트, 최상위 div: 내용 나눔 span: 특정 글자 꾸미기 hr: 구분선 br: 줄바꿈 input: 사용자 입력란 script: JS 언어로 된 명령 referance Chat GPT