캡스톤 프로젝트 중에 특정 구역 내에서 스크롤을 기능할 일이 생겨서 작성해보는 포스팅! 채팅창을 만드는데 채팅창에 있는 채팅 메세지 내용들만 스크롤이 가능하도록 할 것이다. 방법 tailwindcss 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } overflow-y-scroll 을 이용해서 스크롤이 필요한 컨텐츠를 감싸준다. 기본 css 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } 마찬가지로 overflow-y : 'scroll' 속성을 추가해준다. 스크롤이 넘치지 않도록 하고..
다시 초심(?)으로 돌아가 html과 css 만을 이용해서 당근마켓 사이트를 클론코딩해보는 미니 과제! 일단 내가 구현하고자 한 사이트는 아래와 같다. https://www.daangn.com/ 당신 근처의 당근마켓 중고 거래부터 동네 정보까지, 이웃과 함께해요. 가깝고 따뜻한 당신의 근처를 만들어요. www.daangn.com 일단 여러 탭 메뉴 중에 '중고거래'에 해당하는 페이지만 클론코딩해보았다. Javascript 를 활용한 기능은 한가지만 넣었는데, 검색창에 무언가를 입력하고 채팅하기 버튼을 눌렀을 때 alert 으로 무슨 input 을 넣었는지 띄워주는 기능이다(정말 별거 아니지만 넣어보았다) 코드 코드는 아래와 같다. 파일을 따로 분리하지는 않았고 index.html, index.css 에 ..
vscode의 마켓플레이스에서 open in browser을 검색해서 설치한다. alt + shift + b 를 누르면 어떤 브라우저에서 실행할지 선택할 수 있다. 평소에 웹브라우저에서 실행할 때에는 alt + b 만 누르면 됨. 맨날 직접 들어가서 html 파일 직접 열다가 편하게 열기 위해서 설치함!
웹 페이지의 타이틀을 달고 싶을 때에는 태그를 이용한다. 페이지에 타이틀을 다는 예제 입니다. 타이틀은 브라우저의 타이틀바에 보여집니다. ... 태그로 문단의 제목을 달아보자 1장 홈페이지 만들기 1절 HTML 언어 1. 웹 1.1 인터넷 1.1.1 네트워크 1.1.1.1. 통신 title 속성으로 툴팁을 달 수도 있다. (툴팁이란 마우스를 갖다 댔을 때 나오는 것) 1장 홈페이지 1절 HTML 언어 단락을 나눌 때에는 태그를 이용한다. 2 개의 단락 나누기 HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS 스타일을 사용하면 단락 단위로 내어 쓰기와 들여 쓰기가 가능하다. 여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다. 수평선을 그을 때에는 태그를 사용한다. 수..
이 화면을 구현하는게 이번 과제! html 한국어 English 로그인 로그인 상태 유지 더욱 간편한 로그인 QR코드 로그인 일회용 번호 로그인 아이디 찾기 | 비밀번호 찾기 | 회원가입 css body{ background-color:#f5f6f7; } .select{ margin-top:5%; margin-left:70%; } .form-group{ width:350px; margin-left:auto; margin-right:auto; } .btn.btn-primary{ border:1px solid #03c75b; background-color: #03c75b; width:350px; margin-left:auto; margin-right:auto; } .form-check{ display..
색을 바꾸고 싶을 때 (html 문법에서) 이렇게 말고 이제는 CSS에서 디자인하기 아래 소스코드에서 주석 써놓은 곳 보기 1. style 태그를 쓰는 방법 밑줄을 없애주려면 text-decoration: none 여기서 a는 selector color:red는 declaration color는 property red는 value WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the vis..
오늘은 학회에서 우리가 흔히아는 Google의 첫화면 만들기를 해보았다. html 파일에는 이렇게작성해주고 Google 저기 style.css 에 커서를 갖다대면 새 파일을 만들수 있는데 새파일을 만들고 그 css 파일에는 이렇게 작성한다. h1{ text-align:center; margin-top: 200px; font-size : 80px; } h1 span:nth-child(1){ color:#4285f4; } h1 span:nth-child(2){ color:#ea4336; } h1 span:nth-child(3){ color:#fbbc05; } h1 span:nth-child(4){ color:#4285f4; } h1 span:nth-child(5){ color:#34a853; } h1 s..
이제는 학회세미나를 웹/앱으로 나누어 공부하기로 했다.(20.11.10) 나는 웹파트를 골랐다! 뭔가 앱을 배우기 전에 웹이 전체적인 기초, 기반이 될 것만 같아서? 동기 말로는 웹을 하다가 앱을 할 수는 있는데, 앱을 하다가 웹은 못한다고..? 잘 모르겠지만 암튼! 한번 공부해보고 싶었던 거니까 잘 해봐야지. 선배님이 과제를 내주셨다. 구글링, 강의 뭐든 상관없으니 참고해서 html을 사용해서 사진을 구현해보기가 과제. 일단 유튜브 영상부터 보고 공부해보기로 했다. https://youtu.be/IZX7zE_DOb8 일단 html은 웹의 구조, 컨텐츠 css는 웹의 디자인 Java script는 웹의 동작, 웹의 모든것을 말한다고 한다. 기본 네이버 메인 페이지 구성을 한번 살펴보려면 F12..
block element 예) div, h1, p, li 최대한 많은 가로 길이 차지(가로 전체) inline 예) span, a, b, i, img, button 다른 요소들과 같은 줄에 머무려하는 성향, 필요한 길이 만큼의 가로 길이 차지 태그는 inline 요소이지만 widthm height를 설정할 수 있다. inline-block 요소와 같다고 할 수 있다. inline-block 요소 : 다른 요소들과 같은 줄에 머무르지만 block 요소처럼 가로 세로 길이도 설정해주고 싶다면 css에서 설정하기 inline 요소는 auto로 설정 block 요소는 넓이와 높이 값을 가짐
태그 : 표를 만드는 태그 태그의 내부태그 내용(표의 제목) 내용(가로줄 만듦) 내용(셀을 만듦) 번호 이름 1 서다원 2 홍길동 결과 의 속성중 colspan : 셀(가로줄) 합치는 개수적기 '이름'을 지우고 번호 --> 번호 로 바꾸면 결과 rowspan : 셀(세로줄) 합치는 개수 HUFS 서다원 홍길동 결과 border : 테이블 경계선 굵기 (border = "10") width : 테이블 너비 height : 테이블 높이 태그 : 입력 양식 전체를 감싸는 태그 form은 컨트롤 요소로 구성된다. 체크박스나 라디오 버튼을 클릭하고 제출버튼을 주르면 백엔드 서버에 form data가 전달되어 정보를 처리하게 된다 속성 name : 이름 action : 전송되는 ..
태그를 이용해 링크 만들기 하이퍼링크 : 하이퍼 텍스트 문서 안에서 직접 모든 형식의 자료를 연결하고 가리킬 수 있는 참조고리. 클릭하면 웹사이트나 프로그램으로 이동. 태그는 href 속성을 갖는다. 내용 링크는 두가지로 분류 외부페이지와 연결하는 링크 내부페이지와 연결하는 링크 외부페이지 링크연결(새로운 탭X) 구글로 가는 링크 외부페이지 링크연결 (새로운 탭O) 구글로 가는 링크 속성 target = "_blank" 를 추가해주면 새로운 탭이 생기는것임 내부 페이지 간의 이동 한 사이트 안에서 내부적으로 왔다 갔다 하는 링크 1. 상위 하위 폴더를 만들어준다 2. 각 폴더에 만들고자 하는 html 파일을 생성해준다. 그리고 태그를 이용하여 링크를 생성 *상위폴더 파일에 접근할때는 ...
목록 태그에는 가 있다 : 순서가 없는 목록 : 순서가 있는 목록 이건 h1이고요 이건 h2이고요 이건 h3입니다 구역1 구역2 span1 span2 span3 이 벽화가 그려진 시기는 청동기 구석기 시대이다. 이 벽화가 그려진 시기는 청동기 구석기 시대이다. 목록1 목록2 목록1 목록2 목록3 목록3-1 목록3-2 : 이미지 태그 3가지 속성을 가진다 scr : 이미지의 경로 height : 이미지의 세로크기 width : 이미지의 가로크기 alt : 이미지가 열리지 않았을 때 대신하여 출력하는 문장 이미지 경로에는 2가지 경로가 있음. 절대 경로와 상대경로 절대경로 : 웹 페이지나 이미지의 고유한 경로 로컬에서 파일을 작성할 때 절대 경로는 C:/Users/..로 시작하는 파일경로 전체..
*태그 HTML은 태그 이름을 꺽쇠 괄호로 감싸서 표현 -> 이렇게 시작태그와 종료태그가 있다. 시작태그만 있는 건 빈 태그 라고 한다. ex) 이미지 태그 줄바꿈 태그 가로줄 태그 *요소 태그의 이름을 말한다. 태그의 요소는 title 이다. *속성 시작 태그안에 들어가는 내용으로 해당 요소의 성격 등을 설정하는 상태구분값이다. 의 속성은 lang 이다 *속성값 속성이 취하는 값. 따옴표로 감싸야 한다 의 속성값은 en 이다. *문단태그 - : 제목을 나타내는 태그 h옆에 붙는 숫자가 작을 수록 상위 문단, 글자의 크기가 커진다. 이건 h1이고요 이건 h2이고요 이건 h3입니다 - : 문단을 정의 텍스트는 여기에 담는게 좋아요 위 아래에 여백 자동으로 추가(css의 margin 속..
*HTML 구성요소와 속성 웹페이지의 구성요소는 3가지 HTML, JS, CSS 이다 HTML은 뼈대 - 무엇을 어디에 넣을지 CSS는 살 - 웹페이지 꾸미기 JS(Java Script)는 움직임 - 웹페이지의 움직임 *HTML 이란? Hyper Text Markup Language -HyperText : 웹페이지와 연결된 링크를 하이퍼링크라고 하듯이 링크가 포함된 개념. -Markup : Markup은 꺽쇠()로 이루어진 태그로 문서나 데이터의 규격을 정의하는 언어. *HTML 만드는 방법 vscode를 열고 extensions를 연다(ctrl+shift+x or 사이드바에 최하단 아이콘) beautify 를 검색하고 설치한다. 설치하고 ctrl+shift+p 로 comm..
