저장소

구현목표 내가 만들고자 하는 것은 마크업언어로 #in(textarea) 에 작성을 하면 #out에 html로 자동 변환되고 여기서 변환된 #out의 html 문법을 보고 목차를 자동으로 만드는게 목표이다. 작업을 하면서 구글에 많은 티스토리 블로그 자동 목차만들기를 활용해서 사용하면 되겠다고 생각하였다. 여기서는 자동목차 만들기만 확인할것이다. html 기본 구조 # 뉴스 제목 1 ## 부제목 1 ### 소제목 1.1 # 또 다른 주제 다운로드 Markdown Markdown HTML ×> 위는 기본적인 html의 뼈대이다. 생략된 css난 html 부분이 많이있다. (참고용) 결과페이지 미리보기 자바스크립트 전체 $(document).ready(function () { // 여기에 Markdown 콘텐..

✔ 템플릿 엔진 템플릿 엔진 - 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어 - 서버 템플릿 엔진 - velocity : 과거 스프링에서 많이 사용하던 엔진. 현재 권장하지 않음 - freemarker : 템플릿 엔진으로 많은 기능을 지원. Apache 템플릿 엔진으로 템플릿 및 변경 데이터를 기반으로 텍스트, 메일, 파일등을 생성하는 Java 라이브러리를 제공 - thymeleaf : 스프링 부트에서 적극 지원하고 있는 엔진. 문법이 쉽지 않음. react, vue의 경험이 있다면 최적의 템플릿 엔진 - mustaches : 문법이 다른 템플릿 엔진보다 쉽다. 비즈니스 로직을 사용할 수 없음. view의 역할과 서버의 역할이 명확하게 구분됨 타임리프(Thymeleaf) 타임..

✔ 전체 화면 ✔ HTML * 회원가입 - 아래 필수 입력사항을 모두 입력해 주십시요. 아이디 최소 3자이상 입력하세요. * 영문자, 숫자,_만 입력 가능, 최소 3자이상 입력하세요 패스워드 패스워드 확인 이름 *공백없이 한글만 입력 가능 별명 *공백없이 한글, 영문, 숫자만 입력가능 (한글2자, 영문자 4자 이상) *별명을 바꾸시면 앞으로 60일 이내에는 변경할 수 없습니다. 이메일 : 생년월일 성별 선택하세요 남자 여자 전화번호 핸드폰번호 주소 -우편번호검색 서명 자기소개 메일링서비스 정보 메일을 받습니다 SMS 수신여부 핸드폰 문자메세지를 받겠습니다. 정보공개 다른 분들이 나의 정보를 볼 수 있도록 합니다. 정보공개를 바꾸시면 앞으로 0일 이내에는 변경이 안됩니다. 추천인아이디 자동등록방지 *왼 쪽..

구 GitHub 클린코딩 국비지원 과제로 한 내용이지만 필요없는데 있는 내용이나 이상한 부분이 많습니다. 개인 복습용 저장공간입니다. ✔ HTML 부분 Personal Open Source Businees Explore pricing Blog Support sign in sign up How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. Use at least one letter, one numeral, and seven characters Sign up for GitHub..

✔ CSS 다단레이아웃 다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count : 단의 갯수를 설정 - column-rule : 단과 간사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap : 단과 단사이의 여백을 설정 - column-span : 단과 안의 포함된 요소를 다단편집에서 해제 ✔ CSS 다단레이아웃 코드 DOCTYPE html> 다단 레이아웃 div, h2, p{margin: 0; padding: 0;} body {margin: 10px;} h2 {padding: 0 0 20px; text-align: center;} div.col{ text-align: justify; pad..

✔ CSS 박스 모델 박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 ✔ CSS content 내용(content) - 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ✔ CSS 패딩 패딩(padding) 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽 안녕하세요 div#padding { padding: 20px 50px 30px 10px} 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px div#padding { padding: 20px 50px 30px } 위 20p..

✔ CSS 위치 CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(stataic)위치 지정방식 - 기본값 - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름을 따라 요소들이 위치를 결정하는 방식 ✔ CSS 상대위치 2. 상대(relative)위치 지정방식 - HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 - top, left, right, bottom 속성 값을 사용할 수 있음 ✔ CSS 상대위치 코드 DOCTYPE html> 상대위치지정방식 .relative1 { width: 200px; background-color: deeppink; padding: 20px; } .relative2 { position: relativ..

✔ CSS 배경 CSS 배경 background-color HTML 요소의 배경색을 설정 ✔ CSS 배경 코드 DOCTYPE html> CSS 배경 1 body {background-color: deepskyblue;} div {background-color: white;width: 60%;padding: 20px;border: 3px dotted red;} CSS 배경 1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse eligendi molestiae harum deserunt vel. Sequi illo illum maxime labore. Sapiente cupiditate explicabo perferendis arc..

✔ 아이프레임 아이프레임 - inline frame의 약자 - 웹사이트 안에 또 다른 웹사이트를 삽입 ✔ 아이프레임 코드 아이프레임 홈페이지 &nbsp뉴스기사(새탭)&nbsp이력서(새탭) 즐겨찾기 ✔ 폼 태그 폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 - 데이터를 묶어 보낸다. form 태그 안에 form 요소를 통해 데이터를 서버로 전달 입력 상자 type 속성 text : 문자를 입력받는 글상자 password : 비밀번호를 입력받는 글상자 radio : 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있도록 하는 버튼 - 그룹을 맺기 위해서 name 속성의 값이 동일해야 함 checkbox : 여러개의..

✔ FTP FTP(File Transfer Protocol) - 클라이언트-서버(c/s)용 프로토콜 - 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공 - 클라이언트가 서버로 파일을 전달 - 주로 대량의 파일을 처리할 때 사용 - 기본포트 : 21 ✔ 파일질라 설치 - Downlodad FILEZILLA CLIENT ✔ 호스팅 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스 https://www.dothome.co.kr/ // 호스팅 무료 사이트 https://filezilla-project.org/ // 기업에서 많이 활용하는 사이트 -> Download FileZilla Client for Windows (64bit x86) 선택 ✔ 닷홈 호스팅 주의사항 - html ..

과제 1. 인터넷 뉴스 페이지를 HTML 문서로 작성해보기. DOCTYPE html> 연합뉴스 의무경찰과 함께하는 마지막 경찰의 날…'굿바이, 의경 40년' 송고시간:2022-10-21 06:10 김윤철 기자 마지막 기수 내년 5월 전역…'최후의 의경부대'선 특식 제공 "자식처럼 함께 생활…경찰관 1인몫 해낸 의경 그리울 것" (서울=연합뉴스) 김윤철 기자 = 의무경찰 제도가 내년 5월 폐지됨에 따라 21일은 의경과 함께 맞는 '마지막' 경찰의 날로 기록된다. 경찰 관계자는 "의경과 같이하는 마지막 기념일인 만큼 각 부대에서는 출장 뷔페 등 특식을 제공해 대원들을 격려하고 '경찰 생일'의 의미를 함께 기릴 예정"이라고 말했다. 경찰의 날은 1945년 10월 21일 미군정청 경무국 창설을 기리기 위해 제정..

6. 테이블 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표 : 행을 생성 : 셀을 생성 : 셀의 제목, 가운데 정렬, 굵은 글씨 예제 기본 테이블 테이블1 첫번째 셀 첫번째 셀 두번째 셀 첫번째 셀 두번째 셀 세번째 셀 네번째 셀 이름 국어점수 수학점수 김사과 100 80 반하나 90 70 colspan 속성 - 셀을 가로로 합침(열) rowspan 속성 - 셀을 세로로 합침(행) 예제 테이블 colspan, rowspan DOCTYPE html> 테이블 2 table { width : 600px; border: 1px solid black; } td{ border : 1px solid black; } th{ border : 1px solid black; } 테이블2 1 2 4 5 6 7 8 9 ..

3. 이미지 태그 1) 비트맵 이미지 - 픽셀이 모여 만들어진 정보의 집합 - "레스터 이미지"라고 부름 - 픽셀 단위로 화면에 랜더링함 - 그림판, 포토샵등 틀로 편집 2) 백터 이미지 - 수학적 정보의 형태들이 만들어내는 결과물 - 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 - 확대 및 축소를 해도 이미지가 깨지지 않음 - 일러스트 같은 툴로 편집 jpg(jpeg) - 압축률이 훌륭하여 사진이나 예술분야에 많이 사용 - 가장 널리 쓰이는 이미지 포맷 - 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합 - 손실 압축 gif - 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일 - 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움..

1. 서식 태그 : 텍스트를 굵게 표현 : 텍스트를 이탤릭체로 표현 // html1 버전 웹 접슨성을 위한 태그이다. : 텍스트를 굵게 표현, 리더기에서 거쎈 발음 : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음 //html5 버전 여러분 아녕하세요. 오늘은 HTML에 데헤서 베워볼게요 https://validator.w3.org/ 잘못된 스크랩트나 토드가 있는지 확인하는 사이트 예제 서식태그 DOCTYPE html> 서식태그 서식태그 b태그는 단순히 글자가 굵게> 표현됩니다 strong 태그는 중요한 글자를 굵게 표현됩니다 i 태그는 단순히 글자를 이탤릭채로 표현합니다 em 태그는 중요한 글자를 이탤릭체로 기울여 표현합니다. del 태그는 글자를 지운 것처럼 표현합니다. ins 태그를 사용하면 중요..

클라이언트 사이드 랭귀지 HTML : 웹사이트의 틀을 작성하는 언어 (제어문이나 로직은 없으며 명령어로만 사용 가능, 골격을 만든다, 프로그래밍 언어 X) - 이런 형태를 마크업언어라고 한다. CSS : HTML 문서를 시각적으로 만들어주는 언어 (HTML을 보조하며 시각화에 도움을 준다, 프로그래밍 언어 X) JavaScript : HTML문서의 컨텐츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어 (웹사이트를 동적으로 표현하는 언어) 서버가 클라이언트에게 전달해줄 수 있는것은 html, css, js이다 브라우저를 통해 클라이언트에게 전달한다. --------------------------------------------------------------------- 서버 사이드..