본문 바로가기

Front/CSS

(18)
[CSS] 높이와 너비 (width, height) CSS 높이 너비 값 height: 200px; width: 200px; width와 height 프로퍼티는 각각 너비와 높이값을 정할 수 있다. 값은 px단위 혹은 % 단위로 줄 수 있다. 200px값을 준 출력값이다. 화면의 가로세로 200px씩 차지한다. width값에 50%를 주었다. 언뜻 보면 같아 보이지만 % 값을 주면 출력 화면에서 값 비율만큼 화면을 차지한다. 그래서 화면을 늘려보면 값을 바꾸지 않아도 늘린 화면만큼 출력된 박스가 함께 크기가 변한다 특정 요소 안에 요소 하나를 더 집어넣어보자(부모-자식요소) 자식 요소에 % 값을 주면 부모 요소를 기준으로 자리를 차지하게 된다. 이 때 부모값을 바꾸면 %로 설정한 자식의 출력물도 함께 변경됨 크기 설정값에는 auto값도 들어갈 수 있다. ..
[CSS] CSS 테두리 (border) CSS 요소(박스)에 테두리를 칠 수 있다. 예시 p { border: 5px solid red; } 결과 기본 표현방식 (width, style, color 다 나누어 작성) p{ border-width:5px; border-style:solid border-color:red; } 축약 표현방식 (한줄로 작성/ 두께, 실선, 색상) p { border: 5px solid red; } 가로 25px, 세로 10px, 우단 4px, 좌단 35px 이와 같이 영역을 나누어서 값을 줄 수도 있다. border-left:5px solid red; border-right:5px solid red; border속성에 left, right, top, bottom 등 방향을 붙여주어 원하는 대로 표현할 수도 있다. 스..
[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 ..