TCPSchool32 [CSS] 위치 속성 - Display 디스플레이 display 속성 - 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가 결정 1. 블록(block) - 언제나 새로운 라인에서 시작 - 해당 라인의 모든 너비 차지 ex) , , , , , 2. 인라인(inline) - 새로운 라인에서 시작 X - 너비는 해당 HTML 요소의 내용만큼만 차지 ex) , , display 속성의 기본 설정값의 변경 - 블록 요소인 태그의 display 속성값을 인라인으로 변경 가능 li { display: inline; } - 인라인 요소인 태그의 display 속성값을 블록으로 변경 가능 a { display: block; } - 하지만 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 X ex) 인라인 -> 블록이 되어도 변경된 요소 내부에 다른 요소.. 2021. 11. 1. [CSS] 기본 속성 - 이미지 스프라이트 CSS 이미지 스프라이트(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리 - 이미지를 다운받기 위한 서버 요청을 줄일 수 있음 => 로딩 시간 단축 - 관리할 이미지 파일의 수가 줄어 간편 .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; } .up { width: 21px; height: 20px; background-position: 0 0; } .down { width: 21px; height: 20px; background-position: -21px 0; } .right { width: 22px; height: 20px; background-po.. 2021. 11. 1. [CSS] 기본 속성 - 테이블 CSS 테이블 1. border 2. border-collapse 3. border-spacing 4. caption-side 5. empty-cells 6. table-layout 1. border - 테이블의 테두리 설정 table, th, td { border: 2px solid orange; } - , 각각 자신만의 테두리를 갖고 있기 때문에 두 줄씩 적용 => 한 줄로 설정하려면 border-collapse 속성 사용 2. border-collapse - collapse : 해당 테이블의 테두리를 한 줄로 표현 - 없으면 기본 설정으로 테이블 요소별 테두리 모두 표현 table, th, td { border: 2px solid orange; } table { border-collapse: col.. 2021. 11. 1. [CSS] 기본 속성 - 리스트 CSS list-style 속성 1. list-style-type 2. list-style-image 3. list-style-position 1. list-style-type - 리스트에 다양한 마커 적용 가능 마커(marker) : 리스트 요소 앞의 숫자 / 기호 .circle { list-style-type: circle; } .square { list-style-type: square; } .upperAlpha { list-style-type: upper-alpha; } .lowerRoman { list-style-type: lower-roman; } 2. list-style-image - 마커로 자신만의 이미지 사용 가능 .imageMarker { list-style-image: url("/ex.. 2021. 11. 1. [CSS] 기본 속성 - 링크 CSS 링크 - color, font-family, background, ... 등 다양한 속성 적용 가능 - text-decoration : none 으로 밑줄 제거 가능 a { background-color: #FFFFE0; color: darkslategray; font-size: 1.3em; text-decoration: none; } 링크(link)의 상태 1. link : 링크의 기본 상태, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태 2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태 3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태 .. 2021. 11. 1. [CSS] 기본 속성 - 글꼴 CSS font 속성 1.font-family 2.font-style 3.font-variant 4.font-weight 5.font-size CSS 글꼴 집합(font-family) - generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("Times", "Courier" 등) 1.font-family - 하나의 글꼴만 / 여러 개의 글꼴을 같이 설정 - 여러 개의 글꼴 설정 시, 순서대로 읽어 들인 글꼴이 존재하는지 확인해서 표시 - 글꼴의 이름이 한 단어 이상이면 따옴표 사용 - 여러 개의 글꼴은 쉼표(,)로 구분 .serif { font-family: "Times New Roman", Times, .. 2021. 11. 1. 이전 1 2 3 4 ··· 6 다음
