본문 바로가기

SOMEDAY/HTML | CSS | JS56

[HTML] div 박스 css design (box-shadow) 💾 Editor: VSCode 🔎 div 네모 박스를 넣고 싶다면 'div' 사용 index.html style.css .box { width: 100px; height: 100px; background-color: aqua; } 네모 박스가 하나 추가됨 style.css .box { width: 100px; background-color: cadetblue; margin: 30px; /* 상하좌우 여백 */ padding: 40px; /* 상하좌우 안쪽 여백 */ /* border: 4px solid black; 테두리 */ border-radius: 15px; /* 테두리 둥글게 */ /* 가운데 정렬 */ /* display: block; 생략 가능, div가 박스 특징 */ margin-left:.. 2022. 12. 29.
[HTML] selector 선택자 (tag, class, id) + style 💾 Editor: VSCode 👉 기존 html 코드 devje Front-end Developer I want my dream to come true. The future is mine. 기존 html 코드에서 style 속성으로 넣었던 것을 모두 style.css 로 옮긴다. html 파일 안에 html과 css를 연결하는 link 태그를 head 안에 작성한다. 👉 index.html => style.css (스타일 속성 옮기기) index.html style.css .profile { width:100px; display:block; margin-left:auto; margin-right:auto; } img 태그에 class 속성 추가 style.css 파일에 코드 옮기기 html 태그에 sty.. 2022. 12. 28.
[JavaScript] 챗봇 내 스크롤링 기능 on/off K사의 챗봇에는 2가지가 있다. K사의 기본 챗봇과 고객사의 요청이 있을 시, 고객사의 홈페이지에 맞게 커스터마이징 해서 사용할 수 있는 챗봇. 기본 챗봇은 어차피 톡 내에서 사용이 되기 때문에 크게 신경 쓸 것은 없다. 하지만 커스터마이징 해서 사용하는 챗봇의 경우에는 고객사의 요구에 맞게 수정되어야 할 부분들이 몇 가지 있다. 크게 어려운 부분들은 아니겠지만, 그럼에도 실제 프로젝트에서 역할을 맡아 해보니 확실히 이론으로 배우기만 하는 것보다는 얻는 게 많다고 생각했다. 개발자에게 필요한 것 중에 하나가 구글링이라고 하던데, 이번 기회를 통해 열심히 구글링을 하며 찾아낸 자료를 실제 코드 안에 삽입하기도 했다. 그 기회를 통해 "아! 이렇게 하면 되는구나!"라는 걸 살짝 맛 본(?) 것 같다. 완전히.. 2022. 12. 27.
[HTML] STYLING 웹페이지 스타일링 💾 Editor: VSCode 🔎 STYLING 👉 text style font-size: 글자 사이즈 font-family: 폰트 종류 color: 폰트색 letter-spacing: 자간 조절 👉 강의 듣는 중 완성 devje Front-end Developer 👉 실습 :: 소개글 알아서 완성 devje Front-end Developer I want my dream to come true. The future is mine. 이번 강의에서는 태그 내에 style 속성을 넣어서 스타일링 하는 실습을 했다. div 태그 활용해서 프로필 이미지와 텍스트 뒤에 백그라운드 컬러를 넣었다. 컬러는 gold! 그리고 mine 글자에 blue 컬러 지정! 코딩애플 공부 기록 2022. 12. 26.
[HTML] tag 태그 💾 Editor: VSCode 📢 HTML Hyper Text Markup Language 웹페이지 만들 때 사용 자료들이 어떻게 생겼나 구조를 표현하기 위한 언어 👉 index.html 생성 안녕하세요 body tag 안에 텍스트를 넣는다. 🔎 TAG 글을 적을 때는 tag 안에 적음 p(paragraph) h(heading) 실습 시작 안녕 버튼 링크 1 2 👉 정리 웹페이지를 만들 때 모든 요소는 태그 안에 넣음 일부 태그는 속성 기입 가능함 태그 안에 태그도 가능함 👉 실습 :: 글자 일부 클릭하면 웹페이지 이동 글자를 클릭하면 네이버를 새창으로 이동합니다. target 속성을 이용해 새창으로 이동하게 했다. 코딩애플 공부 기록 2022. 12. 25.
[자바스크립트] localstorage 로컬스트리지 쓰기 읽기 제거 쓰기 localStorage.setItem("username","nana") 읽기 localStorage.getItem("username") 제거 localStorage.removeItem("username") key 값을 여러 곳에서 사용 시에는 변수로 만들어서 활용함. 오타를 줄이는 방법임. // 변수 활용 전 localStorage.setItem("username","nana") // 변수 활용 후 const USERNAME_KEY = "username"; // 변수명은 대문자로 씀 localStorage.setItem(USERNAME_KEY,"nana") 2022. 12. 5.

티스토리툴바