🍁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...
🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다. 문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다. CSS의 표기법 [Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언 변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지 isaac-christian.tistory.com ..
🍁CSS CSS(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-downloads VS CODE를 운영체제에 맞게 설치하면 되며, .zip보다는 Installer 버전을 설치하는 것을 추천한다. User Installer는 현재 로그인한 계정만 사용할 수 있고, System Installer는 모든 윈도우 계정들이 사용할 수 있다. 현재는 System Installer로 설치하는 걸로 한다. 설치 진행 설치를 완료하면 위와 같이 VS CODE가 화면에 뜬다. VS CODE 업데이트 VS CODE 왼쪽 하단의 설정, '업데이트 확인'에서 업데이트를 할 수 있다. 🍁VS CODE 설정 Korean Language Pack for Visual Studio Code 왼쪽의 꾸러미 버튼을 클릭..
📌진행도 progress progress 컨트롤로 진행 중이라는 것을 화면상에 표시할 수 있다. progress에 value 속성을 넣어서 진행도를 나타내는 게 일반적이다. max 최댓값 속성으로 진행도를 수치화시켜 화면에 표시할 수 있다. meter progress와 비슷한 것으로 meter 컨트롤이 있다. meter는 모든 수치(숫자)를 막대그래프로 표시할 수 있도록 만들어 둔 것이다. min과 max를 사용하여 숫자 범위를 조절할 수 있다. 또한, high와 low로 적정 수준의 범위에 따라서 색을 다르게 표시할 수 있다. 📌세부사항 detail 자바란? 자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저..
📌컨트롤 안내 메시지 placeholder HTML 5 컨트롤의 안내 메시지는 placeholder 속성을 작성한다. 암호를 입력할 때에는 '*'로 입력되게 할 수 있다. 다중 텍스트 박스에서도 마찬가지로 placeholder를 사용한다. 📌필수 입력 required HTML 5 로그인 아이디: 암호: 필수로 입력을 받으려고 할 때에는 required 속성을 사용한다. required 속성은 자동으로 focus를 가진다. 📌이메일, URL, 전화번호 email, url, tel HTML 5 이메일: URL: 전화번호: 📌숫자 number HTML 5 나이: 최소 최대 범위를 min과 max로 정할 수 있다. 그리고 step으로 증감치를 정해줄 수 있다. 📌범위 range HTML 5 범위: range 컨..
💡Form Form은 입력양식 즉, 입력 컨트롤을 의미한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)를 통해서 데이터를 입력받는 역할을 한다. 입력 데이터를 서버로 전송하며, 이를 업무에 활용하거나 데이터베이스에 저장하는 등의 일을 하게 된다. 예로 들어 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등이 있다. 태그의 사용 + 의 자식 태그들을 사용하여 구현한다. 폼 태그 자체는 렌더링 하는 결과가 없어서 화면에 보이지 않는다. 은 비주얼 한 요소라기보다는 기능을 구현하는 요소이다. 브라우저가 값을 받아서 사용할 수 있는 서버를 연결해 주어야 한다. html 파일과 JSP 파일을 생성하여 나이를 입력받아서 출력하는 프로그램을 작성해 보도록 하자. html 파일 생성 데이터 입력 나..
