CSS - 자식 결합자 (Child Combinator)

자식 결합자란? (Child Combinator) 두 개의 CSS 선택자 사이에 위치 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택 바로 아래에 위치해야하므로 자손 결합자보다 엄격함 자식 : 바로 아래의 하위 요소 자손 : 바로 아래의 하위 요소의 하위 요소 구문 선택자1 > 선택자2 { 속성 } 사용 예시 셀렉터 세 개를 정의하고 자식결합자의 작동 확인하기 CSS /* 셀렉터1 높이 40px, 핑크색*/ .selector1 { display: inline-block; height: 40px; background-color: pink; } /* 셀렉터2 높이 30px, 패일바이올렛색 */ .selector2 { display: inline-block; height: 30px; ..

• format_list_bulleted Web/html & css & xml
• · 2023. 1. 18.
• textsms

HTML - 테이블의 하위 요소 알기 (caption, colgroup, col, th, thead, tbody, tfoot)

table의 하위 요소 caption 테이블의 설명 또는 제목을 나타내는 요소 반드시 의 첫 번째 자식이여야 함 colgroup 테이블의 열을 묶는 그룹을 정의 첫 번째 자식이 요소 요소가 존재하는 경우 뒤에 위치 그 외 테이블의 모든 요소 앞에 위치 col 테이블의 열을 의미 열에 속하는 칸에 공통된 의미를 부여 할 때 사용 요소 안에서 사용 th 테이블의 칸을 그룹의 헤더로 정의 그룹 속성은 scope와 headers로 정의 주의사항 : 또는과 쉼표(,)의 차이를 이해해야 합니다!!! thead 테이블 열(Columns)의 머릿글인 행들의 집합 또는 요소 뒤에 위치 또는 , 요소 앞에 위치 또는 요소가 바로 이어지는 경우 닫는 태그를 생략 할 수 있음 tbody 테이블의 여러 행()을 묶어서 테이블로..

• format_list_bulleted Web/html & css & xml
• · 2023. 1. 18.
• textsms

CSS - Hack (브라우저 핵, IE용 CSS 핵, IE에서만 CSS 코드 실행하기)

서론 더보기 회사에서 특정 페이지의 글자 위치가 이상하게 출력 된다고 수정 요청이 들어왔다. 확인해본 결과, active 컨트롤러를 사용해야해서 어쩔 수 없이 IE를 사용한다고 하더라. 크롬, 엣지에서 확인 할 때는 이상없이 잘 작동하였는데 유독 IE에서만 다르게 출력된다... 해당 포스팅에서는 IE 브라우저를 대상으로 진행합니다. CSS 핵이란? (CSS Hack) 모든 html/css 파일은 브라우저마다 다르게 작동함 때문에 CSS 코드가 특정 브라우저에서 정상적으로 보이지 않을 수 있음 이럴 때 특정 브라우저에서만 코드를 작동하게 할 수 있는 기능 주로 퍼블리싱 할 때 사용 즉, 각기다른 브라우저의 버그를 이용하여 특정 브라우저만 적용하는 기법 위와 같은 이유 때문에 사용을 보통 권장하진 않는다. ..

• format_list_bulleted Web/html & css & xml
• · 2023. 1. 17.
• textsms

CSS - z-index의 이해, 사용 방법

z-index란? 자식 또는 하위의 아이템의 Z축 순서를 지정하는 것 값을 가진 요소가 클수록 작은 요소를 덮음 즉, 겹쳐진 여러개의 요소들의 보여질 순서를 정함 구문 z-index 설정 값 설명 auto : 부모의 요소와 같은 값 숫자 : 숫자가 높을수록 우선 순위 높음 숫자와 auto 모두 같은 값일 경우, 더 마지막에 정의한 요소가 우선순위가 높음 (가장 위에 보인다는 뜻) inherit : 상위 요소의 값 상속 initial : 기본 값 사용 unset : 상속 값이 있으면 상속 값 적용, 아니면 기본 값 사용 (inherit or initial) /* 키워드 값 */ z-index: auto; /* 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms

HTML - div / span 개념과 사용 방법, 차이점

div 플로우 컨텐츠를 위한 순수 컨테이너, CSS로 설정을 해주기 전까지는 어떠한 영향을 주지 않음 다른 요소를 여럿 묶어 속성을 꾸미기 쉽도록 도움 단락과 강조와 같은, 콘텐츠의 의미를 정확하게 나타내는 경우 유용 고유한 분류가 필요 할 때 식별 할 수 있도록 문서의 일부를 정의하는데 사용되는 요소 태그를 추가로 사용하여 접근성이 향상되고 유지관리 용이 div 사용 방법 로 선언하여 로 종료 ... 는 한 블록으로 선언을 종료하기 전까지 설정한 속성이 적용 css에서 설정한 속성을 div와 묶어서 사용 사용 예시 css style 설정 css의 설정 없이는 아무런 영향을 주지 않음 div 자체만으로는 아무 영향을 끼치지 않는다. class 요소와 함께 사용하여 클래스에서 지정한 속성 적용 class ..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms

CSS - !important 속성 값 고정하기, 속성 변경 못하게 하기

!important란? 적용한 속성을 추후에 다른 속성으로 변경하지 못하게 하는 것 !important 사용 방법 설정한 속성 뒤에 !important 명시 예시 Hello! 사용 예시 CSS style p 색상 적용 글자색에 분홍색 적용 /* hello.html */ Hello! CSS style p 색상 중복 적용 글자색에 분홍색을 적용하였으나, 빨간색으로 중복 적용 /* hello.html */ Hello! CSS style p 색상 속성 값 고정 (!important 적용) /* hello.html */ Hello! 설명 속성 중복 적용시 가장 마지막에 적용한 속성으로 변경 개발자가 코드 작성시 원치 않은 다른 속성 적용을 방지 !important를 사용하면 사용한 속성의 대한 값으로 고정 응용 ..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms