My Tech Blog (프로그래밍언어)

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

반응형으로 웹디자인을 하다보면 넓이와 높이, 사이즈 단위에 대한 고민을 하게 된다. 반응형을 고려하지 않고 디자인을 할 때는 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..

📝 JavaScript ✅ 1. screen 객체screen 객체는 사용자의 모니터 정보(속성)을 제공하는 객체입니다. 예를 들어 모니터의 너비나 높이 또는 컬러 표현 bit을 반환합니다.  1-1. 기본형 screen.속성;screen.width; //모니터의 너빗값 반환 1-2. screen 객체 의 속성 종류종류설명screen.width화면의 너비값 반환screen.height화면의 높이값 반환screen.availWidth(작업 표시줄을 제외한) 화면의 너비값 반환 screen.availHeight (작업 표시줄을 제외한) 화면의 높이값 반환 screen.colorDepth사용자 모니터가 표현 가능한 컬러 bit를 반환  ✅ 2. location 객체location 객체는 사용자 브라우저와 관련..

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