bootstrap이란? 예쁜 CSS를 미리 모아둔 것으로 미리 완성된 부트스트랩을 가져다 사용하기 좋다. 부트스트랩 컴포넌트 5.0: https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 활용법 index.html 파일을 만들어서 연습하기! 이걸로 시작해보죠! 나는 버튼이다. 첫 번째 h1내용을 지우고 두 번째 button 내용을 붙여 넣기! 부트스트랩 사이트에서 원하는 것을 찾아 ..

로그인 페이지 좌우 여백을 설정하여 중앙으로 이동시켜보기! 페이지 가운데로 모아주기 위해서는 아래 코드를 하나의 div로 묶어 주어야 한다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 wrap 이름표를 만들어 아래 코드처럼 으로 묶어 준다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 그리고 head의 style 아래처럼 입력한다. .wrap { background-color: green; } 위 스샷을 보면 양쪽 여백이 없이 꽉 차있다는 것을 확인하였다. 영역의 가로 사이즈를 수정하자. .wrap { background-color: green; width: 300px; } 이제 저 박스 밖의 여백을 밀어주기 위해서 margin을 이용해보자. .wr..

이번 강의는 전에 만들었던 로그인 페이지에 이미지를 넣고 ID, PW를 입력할 수 있는 박스를 만들고 로그인 버튼을 만드는 내용이다. 위 스샷처럼 브라우저에 표현이 되도록 코드를 입력해보자. CSS 내용 넣기 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 로그인 페이지 제목과 설명글을 입력해 주었다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 div /div는 하나의 박스로 묶여 있다고 한다. 브라우저 색상이 흰 바탕으로 되어 있기 때문에 이것을 확인하는 방법으로 색을 넣어보면 알 수 있다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 body 안에 div를 이렇게 mytitle이란 이름표를 만들어 주고 head의 title밑에 style을 만들어 ..

오늘 드디어 1주 차 강의를 다 들었네요. 다시 한번 강의를 복습하면서 공부 일지를 작성해본다. CSS 사용법 HTML head 안에 style 공간을 만들어 사용한다. 꾸미기 위해서는 무엇을 꾸밀 것인지 지정을 해주어야 한다. Pycharm에서 연습할 HTML 파일을 만들어주었다. body에 부분에 class="mytitle"라고 이름표(꾸미기를 할 곳 지정)를 만들어 주었다. head 부분에 style 공간을 만들어 주고. mytitle { } 입력해주었는데 mytitle 이름표를 어떻게 꾸밀 것인지 이 공간에 입력을 한다. 이렇게 입력을 해주면 body에 로그인 페이지 브라우저에서 로그인 페이지 텍스트가 빨간글씨로 변한 것을 확인할 수 있다.

공부를 시작하면서 정의를 내리고 이해하면서 글을 쓰려니 어렵다. 이제 배우기 시작한 단계라서 내가 정확하게 이해하고 있는지는 모르겠지만 배워나가다 보면 알 수 있지 않을까 싶다. 나중에 다시 볼 때 현타 올지도 모르겠다. ㅎㅎㅎㅎ HTML HTML은 뼈대! 표현하고자 하는 내용을 구조화하기 위한 코드가 HTML이라고 한다. 페이지의 제목, 문단, 목록 등 데이터 표. CSS CSS는 꾸미기! 디자인, 레이아웃, 문서 등 표현하고자 하는 내용들을 강조하거나 이쁘게 스타일을 꾸밀 수 있다. JavaScript JavaScript는 실행! 콘텐츠를 정적으로만 보여주는 것이 아니라 동적으로 콘텐츠를 표현할 수 있다.