My Tech Blog (Coding/html&css)

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

1. HTML 유효성 검사(W3C validator), CSS3 기준(W3C Validator) 작성한 HTML코드를 W3C Validator를 통해 검사 했을 때 오류가 없어야 합니다. 태그의 열림, 웹 접근성에 필요한 속성 값을 입력하지 않는 등의 오류를 검사하고 수정하기 위한 검사예요. 인터넷이 되는 상황이라면 유효성 검사는 https://validator.w3.org/ 에서 할 수 있습니다. 하지만 시험장에서는 인터넷 사용이 불가능해서 유효성 검사를 할 수가 없으니 평소에 유효성 검사를 실행해보면서 오류와 경고를 확인하고 수정하는 연습을 충분히 해 보는 게 좋아요.  The W3C Markup Validation ServiceValidate by File Upload Note: file uploa..

⚡엔터티코드 특수문자는 잘못된 표현으로 입력해도 화면에 반영은 되지만, 웹표준 코딩이 아니라서 &(엠퍼센트)로 시작하는 엔터티코드로 입력하는 것을 권장합니다.  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..

1. 웹 언어 웹페이지를 구성하는 언어로는 크게 프론트엔드와 백엔드언어가 있어요. 사용자가 마지막에 보는 최종화면의 모든 구성요소를 구현하는 것이 프론트엔드 언어예요. 서버 측에서 데이터베이스와 연동하여 로그인, 회원가입, 검색, 글 등록, 조회, 삭제 등을 구현하도록 해 주는 언어가 백엔드 언어입니다. 구분프론드엔드백엔드목적웹사이트의 최종 사용자, 즉 일반 사용자가 보는 최종 화면의 필요한 모든 것을 개발일반 사용자가 볼 수 업슨 서버 측에서 작동하는 언어로 데이터베이스 개발 및 관리언어HTML, CSS, Javascript(jQuery)- PHP, JSP, ASP : 서버 측 스크립트 언어- Node.js : 프로그래밍 언어는 아니지만 모바일과 웹사이트의 API와 같은 백엔드 서비스 개발- Javas..

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

✨텍스트 강조하기✨ 안녕하세요. html/css를 활용하여 텍스트를 강조하는 법을 알려드릴게요. 텍스트에 형광펜 칠한 것 같은 효과 나타내기, 점으로 글씨 강조하기, 물결선으로 텍스트 강조하기, 글자에 줄글 배경넣기 같이 해봐요.    ⚡ 1. 마크를 이용한 텍스트 강조하기가상요소를 사용하지 않고, background-image속성으로 간단하게 형광펜으로 밑줄을 그은 것 같은 효과를 표현할 수 있습니다.  선의 굵기를 직접 지정해 줄 수 있어요.  ✔️ HTML 코드강조할 텍스트에 형광펜으로밑줄을 그은 것처럼 표현하기✔️CSS 코드p { font-size: 40px;}.emphasis { background-image: linear-gradient( /* 선형 그라데이션 */ r..

✨제목 &텍스트 디자인✨    📌 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..