🍁HTML과 CSS의 차이HTML은 특정 태그에 미리 정해져 있는 속성이 있다. 예로 들어 는 사용할 수 있지만, 는 사용할 수 없다.반면에 CSS는 모든 속성을 모든 태그에 적용 가능하며, 어떤 속성이든 선택자로 찾은 모든 태그에 적용 가능하다는 특징이 있다. HTML과 CSS 오류background-position: 50 50; /* 오류 */background-position: 50px 50px;HTML과 CSS는 에러 메시지를 띄우지 않는다.px를 지정해주지 않으면 잘못 사용한 것이지만, 에러 메시지가 발생하지 않으므로 조심하도록 한다. 🍁CSS 색상 표현법1. Color Name: red, yellow, blue..2. RGB Color(HEX-16진수): #FFFFFF3. RGB Color..
🍁Emmet (Zen-Coding)CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성할 수 있도록 하는 기능이다.다양한 개발 도구(Eclipse, VS CODE..)에서 Emmet 기능을 지원하고 있다.주로 #, ., [], {}, +, >, $ 등의 선택자 노드를 조합하여 사용하며, Emmet은 생산성을 높여주는 생산성 도구라고 할 수 있다. li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan" data-og-host="emmet.io" data-og-source-url="https://emmet.io/" data-og-url="https://emmet.io/" data-og-image="https://scrap.kakaocdn.net/dn/by..
🍁CSS Seletor의 성질1. 선택자 충돌2. 속성 충돌3. 선택자 우선순위 선택자 충돌 상자특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다.물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다. 속성 충돌 상자위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다.동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다. #box1 { color: orange; }.box { color: blue; }div { color: red; }그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다.이는 선..
🍁선택자1. 전체 선택자: * {}2. 태그 선택자: tag {}3. ID 선택자: #id {}4. class 선택자: .class {}5. 그룹 선택자: sel1, sel2, sel3 {}6. 자식 선택자: parent > child {}7. 자손 선택자: parent child {}8. 인접 형제 선택자: sel1 + sel2 {}9. 형제 선택자: sel1 ~ sel2 {} [CSS] CSS Seletor (CSS 선택자) 1🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와isaac-christian.tistory...
🍁CSS 문법선택자 { 속성명: 값; }선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}선택자 { 속성명: 값;}선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}CSS 문법으로 위의 틀을 사용한다.선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다.문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다.CSS의 표기법 [Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지isaac-christian.tistory.com..
🍁CSSCSS(Cascading Style Sheets)는 스타일 시트를 의미한다. CSS는 디자인을 담당하며, HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안 되며, 반드시 HTML 문서가 있어야 실행할 수 있다.HTML 서식 기능에서 CSS 서식 기능으로 확장하여 사용한다.CSS 주요 역할1. 스타일링HTML 요소들에 스타일을 적용하여 웹 디자인 작업을 한다. 2. 레이아웃요소들의 배치와 크기를 조절하는 페이지 레이아웃 작업을 한다. 3. 반응형 웹디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상시각 장애인을 위한 스크린 리더의 작업을 한다. 🍁CSS의 시작html:5! html:5 또는 !를 Enter와 함께 입력하여 자동으로 html 초기 구성을 ..
🍁VS CODE 설치https://code.visualstudio.com/#alt-downloadsVS CODE를 운영체제에 맞게 설치하면 되며, .zip보다는 Installer 버전을 설치하는 것을 추천한다.User Installer는 현재 로그인한 계정만 사용할 수 있고, System Installer는 모든 윈도우 계정들이 사용할 수 있다.현재는 System Installer로 설치하는 걸로 한다. 설치 진행설치를 완료하면 위와 같이 VS CODE가 화면에 뜬다. VS CODE 업데이트VS CODE 왼쪽 하단의 설정, '업데이트 확인'에서 업데이트를 할 수 있다. 🍁VS CODE 설정Korean Language Pack for Visual Studio Code왼쪽의 꾸러미 버튼을 클릭하며 'Ko..
📌진행도progressprogress 컨트롤로 진행 중이라는 것을 화면상에 표시할 수 있다.progress에 value 속성을 넣어서 진행도를 나타내는 게 일반적이다. max 최댓값 속성으로 진행도를 수치화시켜 화면에 표시할 수 있다. meterprogress와 비슷한 것으로 meter 컨트롤이 있다.meter는 모든 수치(숫자)를 막대그래프로 표시할 수 있도록 만들어 둔 것이다. min과 max를 사용하여 숫자 범위를 조절할 수 있다.또한, high와 low로 적정 수준의 범위에 따라서 색을 다르게 표시할 수 있다. 📌세부사항detail 자바란? 자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 ..
