분류 전체보기
-
로그인 페이지를 꾸미기 위해서 폰트를 바꾸고 주석 처리에 대해서 알아보자! 구글 웹폰트 입히기 구글 웹폰트 링크: https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크를 클릭하여 방문 한 귀 마음에 드는 폰트를 선택하자. 세 가지 링크 중 세 번째 링크를 복사하기! 로그인 페이지 head의 title 밑에 붙여 넣기! CSS rules to specify families 내용도 복사하기! * { font-family: 'Black Han Sans', sans-serif; } style 밑에 * { }..
구글 웹폰트, 주석 처리 알아보자!로그인 페이지를 꾸미기 위해서 폰트를 바꾸고 주석 처리에 대해서 알아보자! 구글 웹폰트 입히기 구글 웹폰트 링크: https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크를 클릭하여 방문 한 귀 마음에 드는 폰트를 선택하자. 세 가지 링크 중 세 번째 링크를 복사하기! 로그인 페이지 head의 title 밑에 붙여 넣기! CSS rules to specify families 내용도 복사하기! * { font-family: 'Black Han Sans', sans-serif; } style 밑에 * { }..
2022.08.31 -
로그인 페이지 좌우 여백을 설정하여 중앙으로 이동시켜보기! 페이지 가운데로 모아주기 위해서는 아래 코드를 하나의 div로 묶어 주어야 한다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 wrap 이름표를 만들어 아래 코드처럼 으로 묶어 준다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 그리고 head의 style 아래처럼 입력한다. .wrap { background-color: green; } 위 스샷을 보면 양쪽 여백이 없이 꽉 차있다는 것을 확인하였다. 영역의 가로 사이즈를 수정하자. .wrap { background-color: green; width: 300px; } 이제 저 박스 밖의 여백을 밀어주기 위해서 margin을 이용해보자. .wr..
자주 쓰이는 CSS 연습해보기(2)로그인 페이지 좌우 여백을 설정하여 중앙으로 이동시켜보기! 페이지 가운데로 모아주기 위해서는 아래 코드를 하나의 div로 묶어 주어야 한다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 wrap 이름표를 만들어 아래 코드처럼 으로 묶어 준다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 그리고 head의 style 아래처럼 입력한다. .wrap { background-color: green; } 위 스샷을 보면 양쪽 여백이 없이 꽉 차있다는 것을 확인하였다. 영역의 가로 사이즈를 수정하자. .wrap { background-color: green; width: 300px; } 이제 저 박스 밖의 여백을 밀어주기 위해서 margin을 이용해보자. .wr..
2022.08.31 -
이번 강의는 전에 만들었던 로그인 페이지에 이미지를 넣고 ID, PW를 입력할 수 있는 박스를 만들고 로그인 버튼을 만드는 내용이다. 위 스샷처럼 브라우저에 표현이 되도록 코드를 입력해보자. CSS 내용 넣기 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 로그인 페이지 제목과 설명글을 입력해 주었다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 div /div는 하나의 박스로 묶여 있다고 한다. 브라우저 색상이 흰 바탕으로 되어 있기 때문에 이것을 확인하는 방법으로 색을 넣어보면 알 수 있다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 body 안에 div를 이렇게 mytitle이란 이름표를 만들어 주고 head의 title밑에 style을 만들어 ..
자주 쓰이는 CSS 연습해보기(1)이번 강의는 전에 만들었던 로그인 페이지에 이미지를 넣고 ID, PW를 입력할 수 있는 박스를 만들고 로그인 버튼을 만드는 내용이다. 위 스샷처럼 브라우저에 표현이 되도록 코드를 입력해보자. CSS 내용 넣기 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 로그인 페이지 제목과 설명글을 입력해 주었다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 div /div는 하나의 박스로 묶여 있다고 한다. 브라우저 색상이 흰 바탕으로 되어 있기 때문에 이것을 확인하는 방법으로 색을 넣어보면 알 수 있다. 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 body 안에 div를 이렇게 mytitle이란 이름표를 만들어 주고 head의 title밑에 style을 만들어 ..
2022.08.31 -
오늘 드디어 1주 차 강의를 다 들었네요. 다시 한번 강의를 복습하면서 공부 일지를 작성해본다. CSS 사용법 HTML head 안에 style 공간을 만들어 사용한다. 꾸미기 위해서는 무엇을 꾸밀 것인지 지정을 해주어야 한다. Pycharm에서 연습할 HTML 파일을 만들어주었다. body에 부분에 class="mytitle"라고 이름표(꾸미기를 할 곳 지정)를 만들어 주었다. head 부분에 style 공간을 만들어 주고. mytitle { } 입력해주었는데 mytitle 이름표를 어떻게 꾸밀 것인지 이 공간에 입력을 한다. 이렇게 입력을 해주면 body에 로그인 페이지 브라우저에서 로그인 페이지 텍스트가 빨간글씨로 변한 것을 확인할 수 있다.
CSS 기초오늘 드디어 1주 차 강의를 다 들었네요. 다시 한번 강의를 복습하면서 공부 일지를 작성해본다. CSS 사용법 HTML head 안에 style 공간을 만들어 사용한다. 꾸미기 위해서는 무엇을 꾸밀 것인지 지정을 해주어야 한다. Pycharm에서 연습할 HTML 파일을 만들어주었다. body에 부분에 class="mytitle"라고 이름표(꾸미기를 할 곳 지정)를 만들어 주었다. head 부분에 style 공간을 만들어 주고. mytitle { } 입력해주었는데 mytitle 이름표를 어떻게 꾸밀 것인지 이 공간에 입력을 한다. 이렇게 입력을 해주면 body에 로그인 페이지 브라우저에서 로그인 페이지 텍스트가 빨간글씨로 변한 것을 확인할 수 있다.
2022.08.31 -
이번 강의는 간단한 로그인 페이지를 만들어보는 것! Pycharm에서 login.html을 만들어 준다. 강의 시작 2분 만에 퀴즈 타임이 나와버렸다. ㅎㅎㅎㅎ 위 스샷 처럼 로그인 페이지를 만들기!! HTML 기초 학습에서 배운 내용과 코드스니펫을 이용해서 만들어보자. 위 스샷처럼 body에 h1을 이용하여 제목을 먼저 입력해주기! Pycharm에서 코드 줄을 맞출 때 정렬할 부분을 드래그한 후 Ctrl + Alt + L 키를 누르면 좌측 끝으로 이동하며 줄이 맞춰지고 Tab 키를 누르면 우측으로 이동하고 Shift + Tab 키를 누르면 좌측으로 이동한다. 맥에서는 command + option + L 키를 누르면 좌측 끝으로 이동하며 줄이 맞춰진다. 브라우저에 로그인 페이지라는 제목이 입력되었다. ..
간단한 로그인 페이지 만들기이번 강의는 간단한 로그인 페이지를 만들어보는 것! Pycharm에서 login.html을 만들어 준다. 강의 시작 2분 만에 퀴즈 타임이 나와버렸다. ㅎㅎㅎㅎ 위 스샷 처럼 로그인 페이지를 만들기!! HTML 기초 학습에서 배운 내용과 코드스니펫을 이용해서 만들어보자. 위 스샷처럼 body에 h1을 이용하여 제목을 먼저 입력해주기! Pycharm에서 코드 줄을 맞출 때 정렬할 부분을 드래그한 후 Ctrl + Alt + L 키를 누르면 좌측 끝으로 이동하며 줄이 맞춰지고 Tab 키를 누르면 우측으로 이동하고 Shift + Tab 키를 누르면 좌측으로 이동한다. 맥에서는 command + option + L 키를 누르면 좌측 끝으로 이동하며 줄이 맞춰진다. 브라우저에 로그인 페이지라는 제목이 입력되었다. ..
2022.08.30 -
HTML은 크게 head와 body로 구성된다. Pycharm에서 html 파일을 생성하면 위 스샷처럼 head, body로 구분하고 html로 끝나는 것을 볼 수 있다. head 부분에는 title 내용이 있고 body에는 내용이 없다. 브라우저를 열어 보면 페이지 상단 파비콘 옆에 Title이라는 내용을 확인할 수 있다. 브라우저에서 title의 노출 부분을 확인할 수 있는 부분이다. Pycharm에서 head 안에 있는 Title을 welcome으로 수정하였다. 브라우저에서 어떠한 변화가 있는지 알아보자! 브라우저를 보면 Title에서 welcome으로 변화된 것을 확인할 수 있다. head에는 meta 태그를 이용해 정보를 입력하고 검색엔진이 정보를 더 쉽게 찾을 수 있도록 해준다. 그럼 이제 b..
HTML 기초 학습 head와 bodyHTML은 크게 head와 body로 구성된다. Pycharm에서 html 파일을 생성하면 위 스샷처럼 head, body로 구분하고 html로 끝나는 것을 볼 수 있다. head 부분에는 title 내용이 있고 body에는 내용이 없다. 브라우저를 열어 보면 페이지 상단 파비콘 옆에 Title이라는 내용을 확인할 수 있다. 브라우저에서 title의 노출 부분을 확인할 수 있는 부분이다. Pycharm에서 head 안에 있는 Title을 welcome으로 수정하였다. 브라우저에서 어떠한 변화가 있는지 알아보자! 브라우저를 보면 Title에서 welcome으로 변화된 것을 확인할 수 있다. head에는 meta 태그를 이용해 정보를 입력하고 검색엔진이 정보를 더 쉽게 찾을 수 있도록 해준다. 그럼 이제 b..
2022.08.30 -
공부를 시작하면서 정의를 내리고 이해하면서 글을 쓰려니 어렵다. 이제 배우기 시작한 단계라서 내가 정확하게 이해하고 있는지는 모르겠지만 배워나가다 보면 알 수 있지 않을까 싶다. 나중에 다시 볼 때 현타 올지도 모르겠다. ㅎㅎㅎㅎ HTML HTML은 뼈대! 표현하고자 하는 내용을 구조화하기 위한 코드가 HTML이라고 한다. 페이지의 제목, 문단, 목록 등 데이터 표. CSS CSS는 꾸미기! 디자인, 레이아웃, 문서 등 표현하고자 하는 내용들을 강조하거나 이쁘게 스타일을 꾸밀 수 있다. JavaScript JavaScript는 실행! 콘텐츠를 정적으로만 보여주는 것이 아니라 동적으로 콘텐츠를 표현할 수 있다.
HTML, CSS, JavaScript란 무엇일까?공부를 시작하면서 정의를 내리고 이해하면서 글을 쓰려니 어렵다. 이제 배우기 시작한 단계라서 내가 정확하게 이해하고 있는지는 모르겠지만 배워나가다 보면 알 수 있지 않을까 싶다. 나중에 다시 볼 때 현타 올지도 모르겠다. ㅎㅎㅎㅎ HTML HTML은 뼈대! 표현하고자 하는 내용을 구조화하기 위한 코드가 HTML이라고 한다. 페이지의 제목, 문단, 목록 등 데이터 표. CSS CSS는 꾸미기! 디자인, 레이아웃, 문서 등 표현하고자 하는 내용들을 강조하거나 이쁘게 스타일을 꾸밀 수 있다. JavaScript JavaScript는 실행! 콘텐츠를 정적으로만 보여주는 것이 아니라 동적으로 콘텐츠를 표현할 수 있다.
2022.08.30 -
나이를 먹으면서 발에 각질이 생기기 시작했네요. ㅠ,.ㅠ 그래서 발각질 제거기를 검색해서 찾아보다가 구입한 휴대용 발각질 제거기 추천해볼까 합니다. 일주일 사용 후 제품이 좋아서 이렇게 후기를 남겨요. 주문 후 다음날 빠르게 제품이 도착했습니다. 휴대용 발각질 제거기 상세 사진 휴대용 발각질 제거기 사용 리뷰 굳은살과 각질에 건조하다 보니 갈라지는 부분도 있었어요. 우선 두꺼운 부분으로 발각질이 있는 부분을 살살 밀어주고 촘촘한 부분으로 마무리해주면 되는데요. 슥삭 하는 소리와 함께 위 사진처럼 각질이 잘 제거가 됩니다. https://tv.kakao.com/channel/3154840/cliplink/426349557 각질 제거기 사용 영상을 업로드하려는데 계속 첨부가 되질 않아서... 그리고 발각질 ..
휴대용 발각질 제거기 추천나이를 먹으면서 발에 각질이 생기기 시작했네요. ㅠ,.ㅠ 그래서 발각질 제거기를 검색해서 찾아보다가 구입한 휴대용 발각질 제거기 추천해볼까 합니다. 일주일 사용 후 제품이 좋아서 이렇게 후기를 남겨요. 주문 후 다음날 빠르게 제품이 도착했습니다. 휴대용 발각질 제거기 상세 사진 휴대용 발각질 제거기 사용 리뷰 굳은살과 각질에 건조하다 보니 갈라지는 부분도 있었어요. 우선 두꺼운 부분으로 발각질이 있는 부분을 살살 밀어주고 촘촘한 부분으로 마무리해주면 되는데요. 슥삭 하는 소리와 함께 위 사진처럼 각질이 잘 제거가 됩니다. https://tv.kakao.com/channel/3154840/cliplink/426349557 각질 제거기 사용 영상을 업로드하려는데 계속 첨부가 되질 않아서... 그리고 발각질 ..
2022.02.15