My Tech Blog (HTML)

⚡엔터티코드 특수문자는 잘못된 표현으로 입력해도 화면에 반영은 되지만, 웹표준 코딩이 아니라서 &(엠퍼센트)로 시작하는 엔터티코드로 입력하는 것을 권장합니다.  Copyright ⓒCompany all rights reserved.Copyright ©Company all rights reserved. ⚡자주 쓰이는 엔터티코드    Entity Code - A Clear and Quick Reference to HTML Entities CodesAbout EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every..

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

✨제목 &텍스트 디자인✨    📌 1.  가로 선이 두 개 있는 제목 디자인2개의 선으로 간단하게 제목을 꾸며봐요. position: absolute 대신 flex를 이용해서 코드를 구현해 볼게요.  ☑️ HTML 코드멋진 웹디자인을 위한 아이디어☑️ CSS 코드.heading { display: flex; justify-content: center; align-items: center; font-size: 36px;}.heading::before,.heading::after { content: ''; width: 70px; height: 3px; background-color: #ffb28e;}.heading::before { margin-right: ..

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

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

✨사진에 다양한 필터 적용하기✨ 안녕하세요. 오늘은 vscode로 html/css 만을 이용해서 사진에 필터를 적용하는 법을 배워봐요. 대각선, 흐림, 회색조, 세피아 네 가지로 연출해보는 다양한 사진 꾸미기!! 지금부터 시작해 볼까요 📌 1. 대각선을 활용한 빗금무늬 필터 사진에 대각선 필터를 적용해주면, 아날로그 느낌을 연출 할 수 있습니다. 또 카피라이팅 할 때 문구를 배치하기 위한 배경으로 사용하기도 좋아요. 가상요소인 ::before로 대각선을 만들고, 사진 위에 포갠 디자인입니다. ☑️ HTML 코드 ☑️ CSS 코드 📌 2. 도트 필터 점 무늬 필터로 화질이 낮은 사진에도 재미있는 효과를 줄 수 있어요. ☑️ HTML 코드 ☑️ CSS 코드 📌 3. 흑백사진 만들기(grayscale) gra..

✨사진에 프레임 추가하기 & 액자 만들기✨ 안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.   📌 1. 대각선 프레임 만들기 사진에 입체감을 줄 수 있는 대각선 프레임 디자인이예요. 의사요소 또는 가상요소라고도 부르는 ::after이용해서 만들어볼게요. 준비 되셨나요?   ☑️  요소를 둘러싼 테두리에 이미지를 지정하는 border-imageborder-image-source: repeating-linear-gradient( 45deg, /* 45도 회전, 대각선의 기울어진 각도 */ #ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 지정 */..

​ CSS 처음 배우시는 분들께 가상요소는 다소 어려운 개념입니다. 중급자들 과정에서 배우는 것이 적당하지만, CSS에서 자주 사용되는 트렌드이기 때문에 간단한 개념과 활용법 정도는 알아두시는게 좋습니다. 📌1. 가상요소 ::before과 ::after CSS로 선택한 대상 HTML요소 앞이나 뒤에 새로운 요소를 추가 할 수 있는 선택자입니다. 가상요소는 페이지 안에 실제로 존재하는 것은 아니지만, 기존 태그 요소의 앞이나 뒤쪽에 새로운 요소가 '있는 것처럼' 사용 할 수 있어서 자주 사용됩니다. 특히 실무에서 고급 CSS 작성 기법으로 활용도가 높고, 자바스트립트로만 구현할 수 있는 HTML요소의 이동 효과를 CSS로 비슷하게 만들어 볼 수 있다는 점에서 아주 유용하게 쓰입니다. 간단히 아이콘을 추가..