JuinThyme

사용 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. :link 가상 클래스 선택자 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. :visited 가상 클래스 선택자 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용한다. :hover 가상 클래스 선택자 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정한다. :active 가상 클래스 선택자 링크나 이미지 등 웹 요소를 활성화했을 때 스타일을 지정한다. :focus 가상 클래스 선택자 웹 요소에 초점이 맞추어졌을 때의 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 실..

IT/HTML 및 CSS 2021. 5. 13. 12:36

[속성] 선택자 - 지정한 속성에 스타일 적용하기 지정한 속성을 가진 요소를 찾아 스타일을 적용할 수 있다. 메뉴 1 메뉴 2 메뉴 3

IT/HTML 및 CSS 2021. 5. 12. 18:58

하위 선택자 하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { color: blue; } section은 상위 요소고, p는 section 요소의 하위 요소다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. css에 section 태그의 태그의 아래 모든 요소의 글자 색상이 파란색으로 적용되게 했다. 그러면 태그는 적용된 속성이 없기 때문에 default 값인 검은색이 표출된다. 실행 화면 자식 선택자 - 자식 요..

IT/HTML 및 CSS 2021. 5. 11. 18:48

태그 - 머리말 지정하기 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. 태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수 있다. 태그 - 문서를 연결하는 내비게이션 링크 내비게이션 역할을 하는 태그다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나탄내다. 태그는 내비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용한다. 태그 - 주제별 콘텐츠 영역 나타내기 태그는 문서에 콘텐츠 영역을 나타낸다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 ~ 제목 태그가 함께 사용된다. 태그 - 콘텐츠 내용 넣기 ..

IT/HTML 및 CSS 2021. 5. 10. 18:48

empty-cells 속성 - 빈 셀의 표시 여부 지정하기 border-spacing: separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀 들의 표시 여부를 지정한다. empty-cells: show | hide 속성 show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다. 기본 값이다. hide : 빈 셀에 테두리를 그리지 않고 비워 둔다. 과일 사과 바나나 야채 토마토 채소 상추 width, height 속성 - 표 너비와 높이 지정하기 표와 셀의 너비를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다. 그래서 width와 height 속성을 이용해 넓이와 높이를 지정하면 지정한 크기가 표출된다. 과일 사과 바나나 야채 토마토 table-..

IT/HTML 및 CSS 2021. 5. 7. 17:58

caption-side 속성 - 표 제목 위치 정하기 표 제목은 태그를 이용해 캡션으로 표시한다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다. caption-size: top | bottom 속성 top : 캡션을 표의 윗부분에 표시한다. 기본값이다. bottom : 캡션을 표의 아랫부분에 표시한다. border 속성 - 표 테두리 스타일 결정하기 표도 border 속성을 이용해 테두리를 그릴 수 있다. 표의 바깥 테두리와 셀의 테두리를 따로 지정을 할 수 있다. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대구 서울 서울 vs 대구 border-collapse 속성 - 테두리 통합, 분리하기 테두리가 2줄로 표..

IT/HTML 및 CSS 2021. 5. 6. 12:25

currval()란 현재 테이블에 적용된 현재 시퀀스 번호를 조회할 때 사용한다. 하지만 nextval()을 이용해 현재 트랜 잭션의 세션을 생성해주지 않으면 Mybatis에서 사용한 경우 에러가 난다. 그리고 currval을 사용하지 않는 이유는 현재 트랜잭션과 nextval()을 사용해 세션이 생성된 시점이 같은지 우리는 알 수가 없다. 시점이 다를 수도 있다. 그래서 mybatis에서는 currval을 이용해 현재 시퀀스를 조회 후 +1 값을 적용하지 않는다. Mybatis에서 currval() 대신 사용하는 방법 SELECT LAST_NUMBER FROM USER_SEQUENCES WHERE SEQUENCE_NAME = '시퀀스명(대문자)'; Mybatis에서 Insert문 실행 시 현재 시퀀스 ..

IT/SQL 2021. 5. 4. 11:34

column-with - 단의 너비 고정하고 다단 구성하기 한 화면을 여러 단으로 구성할 때 단의 너비를 고정해 놓고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있다. column-width: | auto 속성 : 단 너비를 직접 지정한다. auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산된다. 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 column-count 속성 - 단의 개수 고정하고 다단 구성하기 다단 화면을 만들 때 단의 개수를 고정해 놓을 수 있다. 단의 개수를 고정하면 브라우저의 너비와 상관없이 단의 개수를 항상 일정하게 유지할 수 있다. column-count: | auto 속성 : 콘텐츠가 들어갈 단의 개수를..

IT/HTML 및 CSS 2021. 5. 3. 18:59