'CSS' 태그의 글 목록 (2 Page)

[자바스크립트] html/css/js로 계산기 만들기 제2탄 🧙🏻‍♀️✨

2024.11.08· Coding/JavaScript

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

[자바스크립트] 3글자 끝말잇기, DOM객체 연습

2024.11.08· Coding/JavaScript

깃허브에 올려야 하는데 귀찮아서 일단 블로그에 먼저 포스팅 1. 시작 2. 몇 명이 참가할 지 선택 prompt3. 참가자 순서 number4. 제시어 저장할 변수 word5. 입력한 단어를 저장할 변수 newWord input 이벤트로 단어 입력 -> 입력 버튼 클릭 -> 입력 단어 newWord에 저장 판단1_제시어가 비어 있는가?판단2_입력한 단어가 올바른 단어인가? (앞 단어의 마지막 글자랑 일치하는가)판단1판단2결과제시어가 비어있음단어가 올바르다입력한 단어가 제시어제시어가 비어있음단어가 올바르지 않다입력한 단어가 제시어제시어가 비어있지 않음단어가 올바르다입력한 단어가 제시어제시어가 비어있지 않음단어가 올바르지 않다올바른 단어 입력하라고 알림창 띄우기 No -> alert('올바른 단어 입력')Y..

[html/CSS] 테이블 자동으로 생성해주는 사이트 TablesGenerator

2024.11.02· ETC/ETC_Software

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프론트엔드 개발 작업 하시다보면 테이블을 만들어야 하는 경우가..

[html&css] ⚡ CSS의 선택자 총정리, 선택자 우선순위 !

2024.05.23· Coding/html&css

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

[html&css] ⚡ CSS 크기의 단위 px, em, rem 차이

2024.05.23· Coding/html&css

반응형으로 웹디자인을 하다보면 넓이와 높이, 사이즈 단위에 대한 고민을 하게 된다. 반응형을 고려하지 않고 디자인을 할 때는 px를 썼지만, 유연한 페이지를 디자인 고려하는 경우 em, rem단위를 사용해 주는 것이 좋다. px는 값이 고정되어있는 절대단위em과 rem은 환경에 따라 변하는 상대단위 상대 단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타낸다. 예) em, rem, %, vw, vh 등 절대 단위란 어떤 상황에서든 항상 고정된 길이를 나타내는 단위. 웹에서 절대 단위는 px을 제외하고는 잘 쓰이지 않음.웹은 디바이스나 사용자 환경에 따라 컨텐츠 크기가 유동적으로 변함. 따라서 절대 단위를 사용하면 콘텐츠의 유연성이 저하됨. 1. CSS 크기의 단위 종류구분설명예시px크..

[html&css] html 태그 쉽게 작성하는 법 : 약어 사용법 (Emmet Abbreviation)

2024.04.29· Coding/html&css

VS Code에는 약어를 이용해서 코드를 빠르게 생성할 수 있는 기능이 내장되어 있어요. 약어 사용법을 같이 익혀볼까요? 약어 입력 후 Tab키나 Enter키를 누르면 태그가 자동으로 생성돼요. HTML 약어 ✅ 태그 생성하기태그 이름을 입력한 후 Tab키 누르면 좌우 입력하지 않고 빠르게 코드 생성 가능약어생성된 태그header ✅ 아이디명, 클래스명 생성#(샵)은 아이디를 의미div#아이디명약어생성된 태그div#container ✅ 자식요소와 함께 생성.(점)은 클래스명 의미>는 자식요소 의미중괄호 { } 안에는 태그 안에 생성될 내용(Content) 입력 약어생성된 태그div.logo > a {logo}logo ✅ 형제요소 생성+는 형제 요소 생성약어생성된 태그p+pdiv.item+div.item..

[Image Design] 다양한 모양으로 사진 형태 수정하기(Fancy Border Radius Generator)

2024.04.07· Coding/html&css

✨사진의 형태를 다양한 모양으로 바꾸기 ✨ 안녕하세요. 사진 형태를 재미있는 모양으로 수정해주는 기발한 사이트 하나 소개해 드릴게요. Fancy Border Radius GeneratorGenerator to build organic shapes with CSS3 border-radius9elements.github.io 이 사이트에서 마우스로 이미지를 원하는 모양으로 드래그 해주면 border-radius 프로퍼티 값을 자동으로 계산해서 알려준답니다. 값을 복사해서 vscode로 가져오면 직접 프레임을 만들지 않아도 쉽게 사진 테두리를 원하는 모양으로 자를 수 있어요. 사진이 정사각형에 가까울수록 내가 설정해 준 모양으로 만들기가 쉬워요. ☑️ HTML 코드☑️ CSS 코드 border-radiu..

[Logo Design] 사진에 로고 넣기, 글씨를 사진으로 채우기

2024.04.07· Coding/html&css

✨사진&로고 디자인✨ 안녕하세요. 오늘은 vscode로 html/css로 로고를 디자인할 때 활용할 수 있는 디자인을 배워봐요. 사진에 로고 삽입하는 법, 그리고 글씨를 사진으로 채우는 법을 알아봅시다.📌 1. 흰 배경의 로고를 사진에 올리기 배경으로 사용할 사진 한 장과 흰 배경에 검은색 글씨가 있는 로고 이미지를 준비해 주세요. 저는 디즈니를 좋아해서 디즈니 사진과 로고를 준비했어요. 원칙적으로 이미지 위에 삽입하려는 로고의 배경이 투명하지 않으면 포토샵을 사용해서 배경을 제거하고 PNG파일로 만들어주어야 하지만 아래 CSS 코드를 사용하면 그런 작업 없이도 간단하게 흰 배경은 투과되도록 합성할 수 있습니다. 이것을 가능하게 해 주는 것이 mix-blend-mode 프로퍼티입니다. 포토샵의 혼합모드랑..

My Tech Blog (CSS)

티스토리툴바