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'를 클릭하여 실행 할 수도 있다. 서버가..
🔻visual studio code 설치🔻 검색창에 'visual studio code' 검색한다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 다운로드 가능한 버전 확인하기 Other dow..
자바 프로젝트를 진행하면서 데이터의 일부에서 구분자인 콤마가 중복으로 들어가 있어서 split으로 분리하기가 어려워졌다. 이럴 때는 데이터의 구분자를 다른 구분기호로 변경하는 것이 간단하게 해결할 수 있다. 검색창 > 지역설정 좌측 하단 검색창에 '지역' 검색 후 지역 설정 클릭 지역 설정 '추가 날짜, 시간 및 국가별 설정' 클릭 시계 및 국가 '날짜, 시간 또는 숫자 형식 변경' 클릭 국가 또는 지역 추가 설정 클릭 형식 사용자 지정 목록 구분 기호에 기본값으로 쉼표가 설정되어있다. 원하는 값으로 입력한 후 확인을 눌러 설정을 변경해준다. 다시 엑셀로 돌아가서 내보내기를 한다. 엑셀 csv로 내보내기 엑셀을 csv로 내보낼 때는 쉼표로 분리하는 옵션밖에 없지만 그대로 쉼표로 분리를 선택한다. csv파..
🔻HTML 문서에 CSS를 적용하는 방법🔻 1. 인라인 스타일 시트, Inline Style Sheet 태그안에 스타일 적용 장점 : 가독성이 높다. 단점 : 재사용이 불가능하다. Vs Code 설치하기 2. 내부 스타일 시트, Embeded Style Sheet 태그내에 서식을 명시한다. 문서 내의 여러태그의 서식을 일괄 적용할 수 있다. 장점 : 재사용이 가능하다. 단점 : 가독성이 낮다. See the Pen Untitled by 허수경 | 정보융합전공 | 한양대(서울) (@nscilehk-the-scripter) on CodePen. ❗3. 외부 스타일 시트, External Style Sheet❗ *.css 파일에 서식을 명시한다. 여러 HTML 파일에 스타일 적용이 가능하다. 장점 : 재사용..
🔻CSS, Cascading Style Sheets🔻 스타일 시트로 디자인을 담당한다. HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안되어 반드시 HTML 문서와 같이 사용해야 한다. HTML 서식 기능에서 확장되어 CSS 서식 기능이 만들어졌다. 🔻CSS 주요 역할🔻 1. 스타일링(웹디자인) HTML 요소(태그)들에게 스타일을 적용한다. 2. 페이지 레이아웃 요소들의 배치와 크기를 조절한다. 3. 반응형 웹 디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상 시각 장애인을 위한 스크린리더 작업을 제공한다. 🔻CSS 중요성🔻 1. 시각적 표현 훨씬 더 완성도 높은 화면을 구현 할 수 있다. 2. 생산성 및 유지보수 용이성 향상 HTML와 서식을 분리시켜 작업함으로써..
