지노스_ZNOS

부트스트랩 연습하기 스파르타코딩클럽 | 부트스트랩 연습하기 Card title that wraps to a new line This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. s3.us-west-2.amazonaws.com 수업시간에 진행했던 '메모장 만들기' 연습이다. 이걸 만드는 연습을 해보자 우리는 부트스트랩을 이용하여 위와 같은 형태의 웹페이지를 만들 것이다. 의 구조를 보면 이 과 가 감싸는 것을 볼 수 있다. select로 화면을 클릭해 보면 윗쪽 부분은 jumbotron이고, 아래쪽은 card-columns로 이루..

아래에다가 버튼을 넣을 겁니다 위의 예제를 실행시켜 보자 이제 ~사이에 아래에 다음 코드를 넣어보자 버튼입니다 그러면 다음과 같이 나온다 이 버튼은 아무런 디자인이 되어 있지 않은 버튼이다. 하지만 우리는 미리 디자인된 프레임워크를 가져다가 쓸 수 있다. 프레임워크는 코드의 '구조와 틀'정도로 우선 이해하면 될 것 같다. https://getbootstrap.com/docs/4.5/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template..

CSS파일 분리하기 지금까지 CSS를 안에 부분이 매우 길어지면서 가독성이 떨어질 것이다. 이럴 땐 아래와 같이 파일을 분리해둘 수 있다 위와 같이 CSS파일을 따로 저장해둘 수 있다 공감 부탁 드려요 :)

구글 웹폰트 : https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1) 마음에 드는 폰트를 클릭한다 2) [ + Select this style ]을 클릭한다 3) 우측 상단의 모음 아이콘을 클릭한다 4) Embed 탭을 클릭한다 5) link 태그를 복사해서 사이에, CSS를 복사해서 사이에 넣는다 Single Day이라는 폰트를 예제로 추가해보면, 아래와 같다 유노나띵 존스노우 아무것도 모르고 시작하는 코딩 ID: PW: 로그인하기 적용한 화면을 보면 아래와 같다 공감 부탁 드려요 :)

Margin은 그림의 바깥쪽 여백, Padding은 그림의 안쪽 여백을 의미한다. 유노나띵 존스노우 아무것도 모르고 시작하는 코딩 ID: PW: 로그인하기 위의 글을 메모장에 복사하여 .html로 저장해서 들어가보자 태그를 보면 "login-title" 클래스에 적용된 여러가지 스타일을 볼 수 있다. color: white; →글씨는 하양 width: 300px; →출력 사이즈 폭 300픽셀 height: 200px; →출력 사이즈 높이 200픽셀 background-image: url('https://i.imgur.com/CBNb9fM.gif'); →이미지 주소 background-position: center; →이미지 정렬 중앙 background-size: cover; →이미지 크기를 출력 사이즈..

코드에 주석 달기 주석은 언제 사용하나 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것이다. PyCharm 에서 주석 달기 : 주석처리하고 싶은 라인들을 선택(블록처리) → ctrl(또는 command) + / (슬래시) (* 주석 단축키가 안되면 한/영 버튼을 눌러보자) CSS부분 주석 태그 내부에서 주석을 달고 싶으면 /* 내용 */ 도 가능하다(내용이 여러줄이어도 된다) JAVASCRIPT 주석 안에 태그 내부에서 주석을 달고 싶으면 문장 앞에 // 를 붙이면 된다 코드정렬하기 코드정렬은 사람이 코드를 읽기 쉽게 하기 위해 ..

CSS란? CSS(Cascading Style Sheet)는 스타일이 적용되는 방식이 단계적으로(Cascading) 적용된다고 해서 붙여진 이름이고, 여기서 스타일이란 html 문서의 글꼴이나 색상 등을 의미한다. 단계적으로의 의미는 내가 태그에 스타일을 적용하였는데 그 안에 태그가 있는 경우, 역시 스타일이 적용된다는 것을 의미한다. (Sheet가 붙은 이유는 Style을 관리하기 쉽게 모아놨기 때문이다) 선택자(selector)란? 스타일을 적용하기 위해선 대상을 '선택'하는것 부터 시작해야 한다. 선택은 html 페이지 내 모든 태그를 선택할 수도 있고, 특정 태그를 선택할 수도 있고, 클래스를 선택할 수도 있다. 클래스(class)란? '이름표'라고 생각하면 된다. CSS 적용 로그인 페이지 ID..

로그인 페이지 ID: PW: 로그인페이지 지난시간에 포스팅했던 로그인페이지 만들기에 부분을 보면 라는게 있는데, 이게 뭔지 알아보자 VIEWPORT란? meta viewport 태그는 모바일 브라우저의 뷰포트 크기 조절을 위해 만들어졌다. 여기서 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 의미한다. 여기에서 뷰포트는 화면에서 내가 스크롤을 움직이지 않고 볼 수 있는 빨간네모 안쪽 영역을 의미한다 전체화면을 풀었을 때, 역시 뷰포트는 스크롤을 움직이지 않고 볼 수 있는 빨간네모 안쪽 영역을 의미한다 즉, PC에서는 브라우저의 크기를 변경함에 따라서 view port의 크기를 바꿀 수 있다. 반면 모바일에서는 화면크기가 고정되어 있기 때문에 뷰포트의 배율을 조절하여 내용을 봐야 한다. (스크롤을 움직이는..

오늘은 스파르타코딩에서 실습했던 로그인박스 만들기를 해볼거다 이런 모양의 웹페이지를 만들면 된다 로그인 페이지 ID: PW: 로그인하기 기본 형식은 위와 같다. 여기에서 화면을 꾸미고, 더 많은 기능들을 넣으면 좀 더 그럴싸한 로그인페이지를 만들 수 있다. 꾸미는 것들에 대한 코드는 구글에서 검색하여 사용할 수 있으므로 여기선 구조를 이해하는데만 집중하자 (위 코드를 복사하여 메모장에 붙여넣고, 확장자를 .html로 저장하면 파일을 클릭하여 웹페이지를 들어갈 수 있다) 에선 meta name이라는게 새로 나왔는데, 이건 다음 포스팅에서 다루겠다 에서 로그인페이지이 있는데, 저번 포스팅에 얘기했던대로 h1,h2 등의 tag는 제목을 붙일때 주로 사용한다. 그리고 낮은 숫자로 갈 수록 글씨 크기도 자동으로 ..

저번 포스팅에서 매우매우매우매우 단순한 구조의 HTML 형태를 만들었다. HTML 구성(head, body) | 아무것도 모르고 시작하는 코딩 이번에는 TAG에 대해서 알아보겠다. 안녕하세요 위에서 안에 들어있는 것들이 TAG 이다. 그리고 위의 식은 기본식이기 때문에 tag명을 바꿀 수 없다. (는 tag가 아니라 "이 문서는 html 형식을 사용합니다"라는 의미이다.) tag : 웹 페이지의 시작과 끝을 표시하는 태그 사이에 넣습니다. 이렇게 씁니다. 경로는 웹페이지에 있는 경로일수도 있고, 내컴퓨터에 저장된 이미지일수도 있습니다. div처럼 컨텐츠를 구분할 때 사용합니다. 두 개의 차이라면 div는 div를 여러개 썼을 때 문단 문단 문단 줄바꿈이 되는데 span은 옆으로 붙습니다. 그리고 div는..