전체 글
-
[HTML] 태그 (기본 ,강조, 첨자, 취소, 인용)웹/HTML 2023. 1. 6. 02:50
1. 기본 태그 - h1~6, p, br, span, div 등등 - 모르는 태그는 mdn 사이트 검색하기 예시 : br mdn 사이트 : 줄바꿈 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다. developer.mozilla.org 2. 강조 태그 HTML 태그는 정보의 종류를 구분하는데만 사용합니다. (오늘날 스타일 정보는 CSS로 분리) 태그설명비고 b 글자를 굵게 (구버전 HTML) 👉 사용 일람 보기 strong 중요한 내용임을 명시 warning i 글자를 기울임 (구버전 HTML) 👉 사용 일람 보기 em 강조할 내용임을 명시 3. 첨..
-
[HTML] 기본 VS Code 실습 환경 구축웹/HTML 2023. 1. 6. 02:10
필자는 제대로 파는 HTML & CSS - 웹 퍼블리싱 끝.장.내.기로 강의로 HTML 복습을 시작했다. 학교 수업에서 듣긴 했지만 가물가물하기도 하고 기초부터 제대로 학습하고 싶은 생각이 들어서였다. 현재 포스팅하고 있는 내용은 lesson 3 내용이며, 본격적인 html 시작 전 세팅설정에 대해서 알려준다. 탭 사이즈 && 자동 줄바꿈 설정 VS Code 설정 창 열기 윈도우: Ctrl + , 맥: Command + , Tab Size 항목 2로 설정 Word Wrap 항목 on으로 설정 플러그인 설치 플러그인설명비고 Korean Language Pack 에디터 한글화 Material Icon Theme 탐색기 아이콘 테마 One Dark Pro 에디터 색 테마 Live Server 새로고침 없이 코..
-
[라온] 홍보 프로젝트 개발 - article 페이지Vue.js/Raon 2022. 12. 21. 16:52
홍보 사이트 제작 3일차 - 2022.12.21 수 [오늘한 것] - ul 생성 : 컨텐츠와 active 이벤트 - 클릭 이벤트 : ppt로 이미지 ui 만들기 - api : postman으로 mockserver 만들기 [리팩토링할 것] - article 나열 height 조절 >> ul과 li에서 조절이 되지 않음 - script setup에서 api 받아오기 : 아래 코드에서 console창에 article이 출력되는 것까지는 확인함 import { ref } from 'vue'; const active= ref(0); // let articles=[]; // async function getList() { // articles = await this.$api( // "https://317063c7-..
-
[라온] 홍보 프로젝트 개발 - intro 페이지Vue.js/Raon 2022. 12. 20. 18:22
홍보 사이트 제작 2일차 - 2022.12.20 화 - intro 페이지 화면 구성 - 스크롤 이벤트 [시도한 것] 1. div 영역의 레이아웃 grid로 설정 .container { display: grid; place-items: center; height: 100vh; max-width: 100%; position: relative; } 2. 텍스트 그라데이션 #raon{ background: -webkit-linear-gradient(-70deg,#e23a3a97 40%,orange 60%,rgba(233, 242, 102, 0.859)90% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: trans..
-
[라온] 홍보 프로젝트 개발 - home 페이지Vue.js/Raon 2022. 12. 20. 18:12
홍보 사이트 제작 1일차 2022.12.20 - 부트스트랩 적용 - 홈페이지 꾸미기 [의문점] 1. css에서는 :hover 효과가 적용이 되는데 template 안에서 background-color hover 효과를 주면 되지 않는다. 이유가 궁금하다. - hover 이벤트 작동되지 않음 (생략) button:hover { background-color: white; color:#ff7f00; } - hover 이벤트 작동됨 (생략) button{ font-size:0.8em; font-weight:bolder; background-color: #ff7f00; color:white; width:8em; } button:hover { background-color: white; color:#ff7f00; }