Skip to content
Bible, Lee, Data

Bible, Lee, Data

Faith, software, data, and everyday life.

CSSAll posts

Engineering/Frontend

[CSS] CSS Seletor의 성질

🍁CSS Seletor의 성질1. 선택자 충돌2. 속성 충돌3. 선택자 우선순위 선택자 충돌 상자특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다.물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다. 속성 충돌 상자위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다.동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다. #box1 { color: orange; }.box { color: blue; }div { color: red; }그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다.이는 선..

Engineering/Frontend

[CSS] CSS Seletor (CSS 선택자) 2

🍁선택자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...

Engineering/Frontend

[CSS] CSS Seletor (CSS 선택자) 1

🍁CSS 문법선택자 { 속성명: 값; }선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}선택자 { 속성명: 값;}선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}CSS 문법으로 위의 틀을 사용한다.선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다.문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다.CSS의 표기법 [Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지isaac-christian.tistory.com..

Engineering/Frontend

[CSS] CSS의 시작: HTML과 CSS 연결

🍁CSSCSS(Cascading Style Sheets)는 스타일 시트를 의미한다. CSS는 디자인을 담당하며, HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안 되며, 반드시 HTML 문서가 있어야 실행할 수 있다.HTML 서식 기능에서 CSS 서식 기능으로 확장하여 사용한다.CSS 주요 역할1. 스타일링HTML 요소들에 스타일을 적용하여 웹 디자인 작업을 한다. 2. 레이아웃요소들의 배치와 크기를 조절하는 페이지 레이아웃 작업을 한다. 3. 반응형 웹디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상시각 장애인을 위한 스크린 리더의 작업을 한다. 🍁CSS의 시작html:5! html:5 또는 !를 Enter와 함께 입력하여 자동으로 html 초기 구성을 ..