🔻Emmet, Zen-coding🔻 CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능 개발도구(Eclipse, VS code 등)들이 Emmet 기능을 지원한다. 생산성 도구 HTML과 CSS 코드를 간결하고 빠르게 작성할 수 있도록 도와주는 확장 툴이다. id,클래스,속성 선택자를 먼저 만들면 HTML 코드를 작성해준다. 1. 클래스 및 ID 속성 추가 .classname 또는 #idname과 같이 클래스와 ID 속성을 빠르게 추가할 수 있다. '$'를 사용하여 id 중복을 방지한다. 아이디는 중복되면 안되니 아래처럼 사용불가하다. div#box1{상자}*5 상자 상자 상자 상자 상자 숫자가 변화되야할 때는 '$'를 사용한다. div#box${상자}*5 상자 상자 상자 상자 상..
🔻Emmet 웹 개발에서 코드를 빠르게 작성할 수 있도록 도와주는 확장 기능(코드 단축키)이다. 원래는 텍스트 에디터나 IDE의 플러그인으로 제공되었으나, 지금은 많은 코드 편집 도구에서 지원하고 있다. 다운로드 페이지 접속 https://emmet.io/ Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.i..
https://steady-record.tistory.com/entry/HTML-%ED%91%9C-table%EC%83%9D%EC%84%B1-%EC%83%89%EC%83%81-%EC%A0%95%EB%A0%AC-%ED%81%AC%EA%B8%B0-%EC%85%80%EB%B3%91%ED%95%A9 [HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합) 표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로 steady-record.tistory.com 테이블 구성요소에는 table, tr, th, td로 구성되어 있다고했는데 사실 정확..
style 적용시 선택자 또는 속성이 충돌 날 때가 있다. 🔻1. 선택자 충돌🔻 같은 선택자를 중복하여 스타일을 적용할 때 충돌이 난다. 위에서 아래로 스타일을 적용하므로 적용하는 속성이 다르면 그대로 스타일 적용이 된다. > 큰 문제가 되지않는다. 상자 🔻2. 속성 충돌🔻 동일한 태그를 선택한 식별자들이 동일한 속성을 지정한다면 충돌이 발생한다. 작성된 순서에 따라 마지막에 작성한 속성이 적용된다. 상자 🔻3. 선택자 우선순위🔻 속성 충돌이 발생하면 코딩 순서에 상관없이 선택자 간의 우선 순서에 따라 속성이 적용된다. 점수로 계산되어 높은 점수의 선택자가 적용된다. 🔻선택자 점수 계산🔻 정밀도가 높을수록 점수가 높다.(동급일때만) 하위 선택자 점수가 높아도 상위 선택자를 넘어설 수 없다. 태그 선택자 ..
CSS 문법 선택자 { 속성명 : 값; } 🔻CSS 선택자, Selector🔻 HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 방법을 지정한다. 1. 전체 선택자 '*' 기호로 모든 태그를 선택한다. * {} 2. 태그 선택자 HTML 요소의 이름을 사용하여 해당 요소를 선택한다. 예를 들어, p는 모든 요소를 선택한다. 장점 사용이 쉽다. 같은 태그를 일괄 적용한다. 생산성 및 유지보수성이 향상된다. 단점 : 같은 태그를 일괄 적용하기에 내가 원하는 영역을 정하는 것이 복잡하다. tag {} 3. ID 선택자 태그에 명시된 ID 속성을 검색해서 태그를 선택한다. id 생성 시, 영어+숫자 조합, 숫자로 시작 불가 원하는 태그를 직접 선택할 수 있다. id는 한 페이지 내에서 유일한 값이어야 한..
https://www.acmicpc.net/problem/29813 29813번: 최애의 팀원 2학년이 된 김한양은 한양대학교의 3대 관문 중 하나인 전문학술영어를 수강하게 됐다. 그런데, 갑자기 올해부터는 전학영이 2인1조 팀플로 진행된다는 공지가 떴다. 팀 구성은 자유이지만, 7수 www.acmicpc.net ❓문제 🔅해석 처음에 문제 해석이 어려웠는데 내가 이해한 바로는 1. 2번째 열부터 주어진 알파벳은 팀원을 찾는 학생들이며, 숫자는 n번째 팀원을 찾았다는 것이다. 2. 팀원이 아닐 경우 앞사람이 맨 뒤로 넘어가므로 팀원을 찾는 학생의 순서는 계속 바뀐다. 예제 입력 1에서, A가 3번째 팀원을 찾기 위해 B,C,D,E 가 줄을 선다. A가 3번째 팀원을 찾기 위해 B,C를 뒤로 보냈고 3번째 ..
https://www.acmicpc.net/problem/29812 29812번: 아니 이게 왜 안 돼 과제를 하다가 잔뜩 화가 난 김한양은 분노 조절을 위해 메모장을 열어서 키보드를 내려치기 시작했다. 메모장에는 알파벳으로만 이루어진 알 수 없는 문자열이 생겼지만, 이상하게도 H, Y, U 세 www.acmicpc.net ❓문제 이 문제에서 주의해야할 점은 무조건 delete와 드래그 조합이 delete를 여러번 하는 것보다 적은 에너지를 소비할 것 같은데 그렇지 않다는 점이다. 예를들어) D = 2, M = 10 인 경우, HYU가 아닌 글자의 연속된 수가 3이라면 delete를 3번 하는 것이 6의 에너지를 소비하고 delete와 드래그 조합은 12의 에너지를 소비하게 되어 delete를 여러번하는..
🔻HTML5의 새로운 기능②🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. progress (진행율) 진행 중인 작업의 진행 상태를 시각적으로 나타낸다. value: 0부터 1까지의 값으로, 백분율을 나타낸다. 최대값 설정을 통해 진행의 범위를 조절할 수 있다. 진행 상태를 나타내므로 최소값 설정은 필요하지 않다. 디자인 커스터마이징이 어려우며, 일반적으로 외부 라이브러리의 품질이 더 높다. 2. meter 숫자를 막대 그래프 형태로 나타낸다. 속성 min : 최소값을 설정할 수 있다. high : 미터의 값이 특정 상한값을 넘었을 때 시각적으로 강조한다. low : 미터의 값이 특정 하한값 이하일 때 시각적으로 강조한다. value ..
🔻HTML5의 새로운 기능①🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. placeholder (플레이스홀더) 안내메시지 사용자에게 입력 예시나 설명을 제공한다. 예를 들어, 입력 필드에 "이름을 입력해주세요"라는 안내메시지가 있다면 사용자는 그 곳에 자신의 이름을 입력하게 된다. 이름 : 비밀번호 : 2. required 필수로 입력을 받아야 하는 필드에 사용되는 속성이다. 이 속성이 설정된 경우, 사용자는 해당 필드에 값을 반드시 입력해야 한다. 값이 입력하지 않고 버튼을 눌렀을 경우, 에러메시지를 표시한다. 아이콘 및 에러메시지 수정이 복잡하다. 로그인(필수입력) 아이디: 암호: 3. email, url 요소의 type 값으로 ..
확장팩 검색하기(공통) 🔻한국어 지원 확장팩🔻 'korean' 검색 install 진행 🔻색테마🔻 'THEME' 검색 설치한 확장팩의 톱니바퀴를 누른다. Set Color Theme 클릭 취향에 맞는 색 테마를 선택한다. 🔻파일 아이콘🔻 'icon' 검색 install 진행 톱니바퀴 클릭 후 Set File Icon Theme 클릭 설치한 Material Icon Theme를 클릭한다. 파일의 아이콘이 변경됐다. 🔻live server🔻 vsc에서 아파치 톰캣 대신 live server를 사용한다. install 진행 서버로 열 파일을 선택하여 우클릭한다. Open with Live Server를 선택하면 링크가 자동으로 열린다. 또는 우측 하단의 'Go Live'를 클릭하여 실행 할 수도 있다. 서버가..
