CSS / DISPLAY Display 란? 해당 요소가 어떻게 보여야 할 지를 결정하는 속성 이 속성의 기본값으로는 inline과 block이 잇다. 기본적으로 태그에는 인라인, 블록요소들이 정해져있지만 바꾸지 못하는 것은 아니다 (ex div의 block속성을 inline으로 변경 가능) style태그 내에서 작성해도되고 인라인으로 작성해도 된다. Inline 요소의 특징 문단 내부에서 영역을 지정할 때 사용. 새 줄에서 시작하지 않고, 필요한 내용만큼의 영역을 차지한다. padding과 margin을 고려하지 않고 배치한다. Block 요소의 특징 항상 새로운 줄에서 시작 기본 너비는 100%여서 화면 끝까지 뻗어나감 padding과 margin이 제대로 작동한다. 박스 취급 예제 Inline In..
CSS / PSEUDO-CLASS Pseudo-Class 선택자에 가상 클래스를 사용하여 해당 요소의 특정 상황만을 선택할 수 있다. 선택자 뒤에 : 을 붙혀 원하는 상황을 선택한다. 가상 클래스의 종류 first-child, nth-child(n/even/odd), last-child -> 요소가 부모의 특정 번째 요소일 때를 선택 first-of-type, nth-of-type(n/even/odd),last-of-type -> 요소가 같은 타입들 중에서 특정 번째 요소일 때를 선택 ※ 둘다 동일한 방법으로 사용 예제 1 2 3 /* span 하위의 첫번째 div */ span > div:first-child{ border: solid 1px; } /* div중 짝수만 (우선순위 낮음) */ div:n..
opacity 요소의 불투명도를 설정할 수 있다. 기본은 1이고 낮을수록 투명해진다. 예제 #div1{ opacity: 0.1; } #div2{ opacity: 0.4; } #div3{ opacity: 0.7; } #div4{ opacity: 1.0; }
CSS / Z-INDEX Z-INDEX 요소의 위치를 설정하다보면 겹칠수가 있다. position이 설정된 경우에 사용 가능하다.(static제외) 요소가 겹쳤을 때 z-index로 높낮이를 설정할 수 있다. 우리가 html을 볼 때 평면으로 보이지만 요소끼리의 높낮이를 설정할 수 있다. 기본적으로 화면에 보이는건 x, y 지만 z-index를 정하면 요소 높이의 우선순위를 정할 수 있다. z-index가 높아질수록 우선순위가 높아진다 (겹쳐졌을때 높은순서대로 보인다.) 예제 #div1{ position: absolute; top:0px; left:0px; } #div2{ position: absolute; top:25px; left:25px; } #div3{ position: absolute; top:..
CSS / POSITION position 특징 요소의 위치를 마음대로 설정하기 위한 속성 static, relative, absolute, fixed, sticky로 position에 값을 줄 수 있다. 위치를 설정할 때에는 top,right,left,bottom을 사용할 수 있다. 요소가 겹쳤을 때는 z-index로 높낮이를 설정할 수 있다. static postion의 기본 값이고 따로 설정을 안해도 된다. top, right, bottom, left, z-index 같은 속성들이 영향을 주지 못한다. absolute 포지션이 설정된(static이 아닌) 부모요소를 기준으로 절대적인 위치를 설정한다. 부모요소가 static인경우 웹 브라우저를 기준으로 절대위치를 설정한다. 예제 container안에..
CSS / ICONS Icon 특징 아이콘은 실제로는 글꼴이기 때문에 글자에 대한 스타일이 모두 적용된다. 원하는 아이콘의 링크를 걸어준다(google 등) span 태그내에 원하는 아이콘 class를 형식대로 지정해준다.(Icons, Icons+Sharp ..등) 원하는 아이콘이름을 span태그내에 작성 여러가지 아이콘을 적용할 때는 link태그에 uri에 | 를 이용 Google Icons ( CDN 동시에 여러가지 사용하기) 1. 구글 아이콘 사이트 접속 https://fonts.google.com/icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는..
CSS / FONT 글자를 변경하는 여러가지 방법들 font-family : 글꼴을 변경한다. font-size : 글자 크기를 변경한다. font-style : 글자 스타일을 변경한다(normal,italic, ..) font-weight : 글자 굵기 조절(100~900, bold,bolder .. ) font - family (글꼴 변경하기) 원하는 글꼴을 선택할 수 있다. 기본적으로 사용자의 컴퓨터에 설치되지 않은 글꼴은 사용 할 수 없다. 사용자의 컴퓨터에 해당 글꼴이 로드되지 않는 경우에 대비하여 여러 예비용 글꼴을 설정해놓을 수 있다. 사용자에게 번거롭게 글꼴을 설치하게 하는 것 보다는 CDN을 많이 활용한다. (Content Delivery Network > 로컬PC에있는 자원을 사용하지 ..
CSS / FLEX flex layout 웹 페이지의 레이아웃을 잡을 때 사용하는 속성 레이아웃 배치 기능에 중점을 맞춰 고안했기 때문에 기존 방식보다 수월한 레이아웃 구성이 가능하다. 상황에 따라 내부 요소들의 크기를 유연하게 조절하는 방식의 레이아웃 구성이 가능하다. flex는 부모 요소인 flex container와 자식 요소인 flex로 구성된다. flex container는 display flex로 설정이 가능하다. container를 flex로 설정 기존 flex로 설정하지 않은 div 영역은 block 요소로 수직으로 생성된다. .container{ background:beige; height: 100vh; display:flex; } display를 flex로 설정해주면 영역내에 수평으로 ..
CSS / BOX-SHADOW 값을 넣을 때 첫 번째 값 : 가로 위치 (필수) 두 번째 값 : 세로 위치 (필수) 세 번째 값 : 그림자의 번짐 (blur) 네 번째 값 : 그림자의 크기 (spread) 다섯 번째 값 : 그림자의 색상 여섯 번째 값 : inset -> 설정하면 그림자가 컨텐츠 내부에 생긴다. 위의 설정값은 첫번째, 두번째만 필수다. 예제 box1 #box1 { margin: 50px; width: 100px; height: 50px; border-radius: 20px; background-color: yellow; text-align: center; box-shadow: 20px 20px 10px blue; }
CSS / TEXT-SHADOW 값을 넣을 때 첫 번째 값: 가로 위치 두 번째 값: 세로 위치 세 번째 값: 그림자의 번짐 정도 네 번째 값: 색상 조절 위의 값들은 , 를 찍고 여러개 중첩해서 진하게 설정이 가능하다 예제 Text Shadow #shadow1 { color: white; text-shadow: -1px -1px 3px red; } 여러번 중첩을 주면 색이 더 진해진다. #shadow1 { color: white; text-shadow: -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red; } 아래의 사이트에서 여러가지 text-shadow의 표본을 구할수 있다. http..
css / text text-indent / 들여쓰기 값이 양수면 들여쓰기, 음수면 내어쓰기가 된다. 예제 1. 들여쓰기 2. 내어쓰기 3. 여백주고 내어쓰기 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum letter-spacing / 글자 간격 글자와 글자 사이의 간격을 설정 양수면 늘어나고 음수면 줄어든다. 예제 1. 3px만큼 간격 설정 2. -3px 만큼 간격 설정 3. 1em 만큼 간격 설정 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem ..
#텍스트 정렬 text-align center : 가운데 정렬 left : 왼쪽 정렬 right : 오른쪽 정렬 justify : 양쪽 정렬 예제 1. center 2. left 3. right 4. justify The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translati..