My Tech Blog (html&css)

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

⚡리스트 태그 사용해서 서브메뉴 만들기 연습⚡ 메뉴에 마우스 올렸을 때 다음과 같이 서브메뉴가 나타나도록 하기 위해 어떻게 코드 작성하는지 알아 보자. - 색깔 입혀주는 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 표시 (˙로 목록이 표현됨) - 따라서..

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..