My Tech Blog (HTML)

✨커스텀 전 기본 헤더 티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다.  🧞‍♀️헤더 커스텀 완성작  이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.헤더 좌측 상단에 아이콘 추가카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어  앞으로 나오는 것이 더 낫기 ..

티스토리 블로그는 html/css/js로 얼마든지 커스텀 할 수 있기 때문에 폰트도 수정 가능해요 오늘은 구글 폰트에서 제공하는 무료 폰트를 이용해서 코드블럭의 글씨체를 바꿔보겠습니다.  https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com  저는 Montserrat 체가 마음에 들어서 이걸로 골랐어요 ㅎㅎㅎ원하는 폰트 정했으면 화면 상단 Get Font 클릭해주세요.그러면 1 font family selected 화면으로 넘어오는데요 Get embed code를 클릭해주세요  web용 선택 해 주고 Copy..

[자바스크립트] html/css/js로 계산기 만들기 제1탄자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.나중에 전체 소스만 깃허브로 보내기 1. 버튼 16개 만awesomepossum.tistory.com 여기서 손을 좀 대겠습니다 ㅎㅎㅎ기능 추가랑 계산기 색상 추가  1. 숫자 지울 수 있는 backspace 버튼2. 그리고 다중 계산을 위해 숫자와 연산자 입력을 이어서 받을 수 있도록 로직 개선.3. 계산기에 색상 입히기 1. backspace 기능 추가 버튼을 어디다 넣을까 div 태그 한 줄 더 써서 추가할까 하다가 그냥 첫번째 row에 집어 넣어주기로 함...    7    8    9    +    ← 스크립..

자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.나중에 전체 소스만 깃허브로 보내기 1. 버튼 16개 만들기 7 8 9 + 4 5 6 - 1 2 4 / C 0 = x  여기까지 html로 버튼 16개 만들기이제 script 태그 안에 각 버튼마다 이벤트 리스너 달아줘야 함#num-0과 #num-1에 대해서만 이벤트 리스너 달아주면 이런 식으로 동작함d..

ttps://www.tablesgenerator.com/html_tables  HTML Tables generator – TablesGenerator.comYou can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Exwww.tablesgenerator.com프론트엔드 개발 작업 하시다보면 테이블을 만들어야 하는 경우가..

1. CSS 선택자 한 눈에 보기 선택자예시설명태그 선택자h1태그로 요소를 선택전체 선택자* (유니버셜 선택자)모든 요소를 선택div *특정 요소의 자식 요소 모두 선택클래스 선택자.slide클래스명으로 요소를 선택아이디 선택자#logo아이디명으로 요소를 선택후손 선택자.slide h2, .slide .btn후손(자손) 요소를 선택자식 선택자.slide > div앞 선택자의 바로 밑 자식 요소 선택인접형제 선택자.banner + div앞 선택자의 형제 요소 바로 다음 요소 선택.banner ~ div앞 선택자의 형제 요소 중 두 번째 요소 모두 선택그룹화h1, h2color: red콤마로 선택자를 나열하여 선택속성 선택자a[target], a[target="_blank"]속성명 또는 속성명의 값으로 요소..

⚡리스트 태그 사용해서 서브메뉴 만들기 연습⚡ 메뉴에 마우스 올렸을 때 다음과 같이 서브메뉴가 나타나도록 하기 위해 어떻게 코드 작성하는지 알아 보자. - 색깔 입혀주는 css 코드는 별도로 하단에 올려 두었으니 태그 안에  CSS 코드 해설위 CSS 코드의 의미를 살펴보자. 위 코드에서 가장 핵심  2가지는 - submenu가 안보이다가 메뉴바에 마우스를 올렸을때 submenu가 나오게 하는 드롭다운 구현 - 마우스를 올렸을 때 서브메뉴가 부드럽게 나타나도록 함 3-1. 드롭다운 구현 #submenu의 초기 상태: left: 0: 서브메뉴의 왼쪽 위치를 부모 요소의 왼쪽에 맞춤opacity: 0: 서브메뉴를 보이지 않게 설정position: absolute: 서브메뉴를 부모 요소 기준으로 절대 위치to..

오늘은 HTML에서 목록을 표현하는 리스트 태그에 대해 알아볼게요. 대표적으로 가장 많이 사용되는 리스트 태그는 ul, ol, li, dl, dt, dd 태그예요 리스트 태그는 쌍이 있어서 반드시 정해진 규칙대로 사용해 주어야 합니다. 그럼 리스트 태그의 종류와 사용할 때 주의할 점을 알려드릴게요. 먼저 리스트 태그는 비순차목록(Unordered List), 순차목록(Ordered List), 정의 목록(Definiton List) 으로 나누어진답니다. 비순차 목록 태그는 영문명의 앞글자를 따서 ul태그, 순차 목록 태그는 ol 태그, 정의 목록 태그는 dl 태그로 불려요. 1. Unordered List (ul 태그)- ul 태그는 목록에 순서가 없고 Bullet 표시 (˙로 목록이 표현됨) - 따라서..