웹 프로그래밍/CSS (26) 썸네일형 리스트형 [CSS] 테이블의 홀수 또는 짝수번째 행마다 CSS 적용하기 tr:nth-child(odd) { background-color: #F7F9FC; } tr:nth-child(even) { background-color: #F7F9FC; } [CSS] body 태그를 가운데 정렬 하기 : margin-left, margin-right 하나은행 TWO THREE FOUR FIVE SIX SEVEN EIGHT NINE TEN aside부분 하나은행 하나카드 바로가기 네이버 뉴스 바로가기 네이버 만화 바로가기 footer부분 [CSS] span VS div 태그 div : division(범위) 블록 엘리먼트이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다. span : 폭, 적용되는 범위 인라인 엘리먼트이기 때문에 줄바꿈이 되지 않는다. 둘의 범위를 시각적으로 확인하고 싶으면, 선택자에 border 속성을 추가하면 된다. [CSS] 블록 레벨 엘리먼트, 인라인 엘리먼트 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트라고 하고, 자기 자신의 콘텐츠 크키만큼 쓰는 태그들을 인라인 엘리먼트라고 한다. 이러한 특징에 관여하는 속성이 바로 'display'이다. 블록 레벨 엘리먼트에 아래와 같은 속성을 추가하면 인라인 엘리먼트 처럼 취급한다. display : inline; 반대로, 인라인 엘리먼트에 아래와 같은 속성을 추가하면, 블록 레벨 엘리먼트로 취급할 수 있다. display : block [CSS] CSS의 등장배경(feat. HTML) 및 사용 방법 2가지 CSS의 등장 배경 HTML로 문서를 예쁘게 꾸미기 위해서는, 인라인 방식으로 각각의 태그에 속성을 추가해야 한다. 하지만, 조금 과장해서 코드가 몇 만줄 이상이라고 생각해보자. 어떻게 그 많은 내용을 추가 할 것인가? 또, 색상을 변경하고자 할 때는 어떻게 할 것인가? 똑같은 코드를 중복되게 일일이 다 작성할 것인가? 이러한 문제점 때문에 CSS가 등장했다. HTML은 정보 전달에만 집중하도록 하고, 모든 디자인과 관련된 내용은 2. style 속성을 쓴다. style = " " 은 HTML의 속성이다. style 이라는 속성은, 속성값으로 반드시 CSS 효과를 사용한다. HTML & CSS 적용 순서 선택자 내에 선언한 내용들이 가장 먼저 적용된다. 이후에, 인라인 방식으로 각각의 태그 내에 적용한 .. [CSS] display:none VS visivility:hidden 차이 div 태그의 Layer를 숨기는 방법 1. display:none : None, 말 그대로 없다. 2. visibility:hidden : 보이지만 않고, 해당 공간을 차지하고 있다. [CSS] 반응형으로 배경색 바꾸기 (미디어쿼리, @media) 헬로오오 안녕하세용 [CSS] 애니메이션 효과 주기(transition-property, transition-property, transition-timing-function 등) 이전 1 2 3 4 다음
