Front (46) 썸네일형 리스트형 [CSS] 표 (Tables) Table Borders 테두리 크기 색상 조절 table, th, td { border: 1px solid black; } border: 1px solid black; (굵기, 모양, 색깔) 1px, solid 가 일반적이다. table : 표 테두리 th : 표 머리 td : 표 데이터 를 뜻해 전체 테이블에 적용시키려면 위 3개 선택자를 전부 선언해주어야함 boder-collapse html로만 테이블을 만들게 되면 위와 같이 테이블의 테두리가 두줄로 생성된다. 이 때 boder-collapse 속성을 사용하여 해결 가능하다. separate : 기본값이며 테두리를 분리하여 표현함 collapse : 테두리를 붕괴(축소)시킴 separated가 분리된 테두리의 기본 값이다. 이 값을 준 우측에 표는.. [CSS] 목록 스타일 (Lists Style) ul{ list-style-type:none } 목록의 앞에 오는 기호를 다른 텍스트나 이미지로 커스터마이징 할 수 있다. 스타일 명령어 마커를 아예 지우기 ul.demo { list-style-type: outside; margin: 0; padding: 0; } 마커 문단 포함여부 (list-style-position) ul{ list-style-position: outside; } list-style-position : outside; 문단 안에 포함하지 않음 (기본 값) ul{ list-style-position: inside; } list-style-position : inside; 문단 안에 포함함 list-style-image : 이미지 삽입 ul { list-style-image: url(.. [CSS] CSS 링크 스타일 (Styling Links) 링크스타일(Styling Links) a:hover{ font-size:40px; letter-spacing:5px; color:red; } 링크는 네 가지 상태가 있으며 각 상태별로 스타일을 지정해줄 수 있다. a:link - 처음보는 링크 (a normal, unvisited link) a:visited - 한번 눌렀봤던 링크 (a link the user has visited) a:hover - 마우스를 올려놓을 때의 링크(a link when the user mouses over it) a:active - 클릭했을 때의 링크(a link the moment it is clicked) * (원문은 클릭하는 순간이라 되어 있지만 클릭은 누르고 나서 놓을 때 까지 적용된다고 생각하면 좋다.) text-.. [CSS] 글꼴속성(font-family) 예시 p{ font-family; arial, 바탕체, "Times New Roman", Serif; } font-family 글꼴 지정 속성 font-style italic - 기울임 (이탤릭)을 font-weight 굵기 (기본적으로 bold와 normal로만 구분해서 사용하나 숫자로 조절 가능) font size px단위와 em단위로 조절 가능 (em : 단락 일반 텍스트의 기본 크기16px = 1em) 웹사이트의 폰트 일반폰트 웹사이트의 폰트는 사용자의 pc에 설치되어 있는 폰트를 사용하는 것 기본, 사용자에 따라서 제작자의 의도와 다른 폰트를 사용해서 웹사이트가 표시되는 경우가 있다. 웹 폰트 서버에 저장된 폰트를 사용함 기본적으로 무료로 다운받을 수 있는 글꼴도 상업적으로 이용할 시 문제가 될.. [CSS]그림자 효과(text shadow) Text Shadow (그림자효과) h1 { text-shadow: 2px 2px 5px red; } test-shadow : 20px (가로) 20px (세로) 5px (번짐정도) red(색깔); 예시 그림자 text-shadow: 10px 0px 0px red; 그림자 text-shadow: 0px 10px 0px red; 그림자 text-shadow: 0px 0px 10px red; 그림자 text-shadow: -10px -10px 0px red; [CSS] 텍스트 간격 (Spacing) Text Indention p { text-indent: 50px; } 문단 첫 번째 줄의 첫 번째 글자에 공백을 만들어줌 Letter Spacing h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; } 자간(글자간의 간격)조정 *크롬에서는 소수점으로 간격 표현 가능, 왠만해서 소수점 사용하지 않음 Line Height p.small { line-height: 0.8; } p.big { line-height: 1.8; } 픽셀값을 넣게될시 보이는 사이 간격이 아닌 문자가 시작하는 바닥부터의 간격을 값으로 주어야 한다. 위에 줄에 글자와의 10px을 띄우고 싶다면 line-height의 10px로 값을 주는것이 아니라 기존 a text 높이를 더한 10+a .. [CSS] 조합선택자 (Combinators Selectors) 조합 선택자 CSS에서는 요소를 선택자로 표현할 수 있는데 이러한 요소들을 2개 이상 묶어서 특정 규칙을 이용하여 사용하는 선택자를 뜻한다. Element 관계는 아래와 같이 나눌 수 있다. - 수직 구조( 포함관계 ) : 형제, 조상, 부모, 자식(child), 자손(descendant) - 수평 구조( 인접관계 ) : 형제(sibling) 자손 요소(공백) : 기준 요소에 포함되는 모든 요소에 적용 /descendant 자식 요소(>) : 기준 요소에 직계로 포함되는 요소만 적용 / child 형제 요소(+) : 기준 요소의 바로 다음 요소(선택지와 일치하여야함)에 적용 /adjacent sibling 형제 요소(~) : 기준 요소의 바로 다음 요소에 적용 /general sibling ** 선택지와.. [CSS] CSS기초 (기능, 문법, 선택자) CSS의 정의 CSS(Cascading Style Sheet)는 HTML로 작성된 문서를 표현하는 방법을 정해주는 언어로 디자인, 레이아웃 등을 담당한다고 볼 수 있다. CSS는 여러 개의 HTML 요소에 공통 적용하고 제어할 수 있어 효율적이다. 예시 짱구 철수 유리 훈이 맹구 위와 같은 코드가 있을 때 이와 같은 css 구문을 입력하여 단락 p인 모든 요소를 한 번에 적용시킬 수 있다. 문법 selector(선택자) {Property:value;Porperty:Value;Property:Value;} selector(선택자) { Property:Value; Property:Value; Property:Value; } Selector(선택자) : 스타일을 지정할 대상을 가리킴 기본적인 선택자(Selec.. 이전 1 2 3 4 5 6 다음
