본문 바로가기

Front-End64

[CSS] float 속성 float 속성 - 웹 문서의 요소를 떠 이게 하는방법 - 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성 - 수평적인 요소로 바꿀 때 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미 - 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성 float 속성의 값 * right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 하는 속성 * left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 하는 속성 * both : 양쪽 어느쪽으로도 떠 있지 않게 하는 속성 - 해제하는 속성 - float 속성을 사용한 후에는 반드시 해제(clear: both;) 해 주어야 함. 박스1 박스2 박스3 박스4 박스4에는 clear 속성을 걸어주어 float 속성을 해지했다. 2021. 10. 31.
[CSS] shadow 속성 (text-shadow, box-shadow) text-shadow 텍스트에 그림자를 지정하는 속성 /*문법*/ text-shadow: * 가로거리 : 텍스트로부터 그림자까지의 가로 거리 * 세로거리 : 텍스트로부터 그림자까지의 세로 거리 양수 값은 글자 아랫쪽으로 그림자가 만들어지고, 음수 값은 글자 윗쪽으로 그림자가 만들어진다. 필수적으로 들어 가야 하는 속성. * 번짐정도 : 그림자가 번지는 정도를 말함. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나감. 그림자가 크게 나타남. 반대로 음수 값을 사용하면 그림자가 모든 방향으로 축소되어 보여짐. 기본 값은 0임. box-shadow 그림자를 만드는 속성 /*문법*/ box-shadow: * 수평거리 : 그림자의 수평거리(얼마나 떨어져 있는지). 양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만.. 2021. 10. 31.
[CSS] Border 속성 (+border-radius 속성) border 속성 - border 속성은 태그의 테두리를 설정하는 속성 - background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성 - width - style - color의 순서로 사용 형식 border: width style color; /* 두께, 스타일, 색상 순으로 작성한다 */ 개별적으로도 사용 가능 속성 * border-width 테두리 선의 두께 * border-style 테두리 선의 종류 * border-color 테두리 선의 색상 border-style(테두리 선의 종류) 속성 * none : 테두리 선 없음 * hidden : 테두리 선 없음 none은 테두리가 없다는 것이고, hidden은 테두리를 숨긴다는 뜻이다. 두 가지 모두 테두리가 나타나지 않는다. *.. 2021. 10. 31.
[CSS] margin, padding (CSS에서의 여백) CSS에서의 여백 1. margin(요소의 바깥쪽 여백) - 요소의 바깥쪽 여백을 지정할 때 사용함 - 바깥쪽 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용을 함 - 속성에는 상단, 오른쪽, 하단,왼쪽 다르게 지정할 수 있음 - 사용법 margin: 10px 20px 30px 40px ==> 상단, 오른쪽, 하단, 왼쪽 margin: 10px 20px 30px ==> 상단, [오른쪽, 왼쪽], 하단 margin: 10px 30px ==> [상단, 하단], [오른쪽, 왼쪽] margin: 10px ==> [상단, 오른쪽, 하단, 왼쪽] 2. padding(요소의 안쪽 여백) - 요소의 안쪽 여백을 지정할 때 사용 - 단위 : px, em, cm 등의 단위로 지정 - % : 너비로 백분률 .. 2021. 10. 29.
[CSS] display 속성 display 속성 - 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치 되는지를 결정하는 속성. -display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됨. 예) 태그, 태그 -display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지함. 예) 태그, 태그, 태그 -display 속성이 inline-block으로 지정된 요소는 한 줄에 다른 요소들과 나란히 배치됨. inline에선 사용이 불가능한 width, height, margin, padding 속성의 상하 간격 지정이 가능해짐. https://seungwoohong.tistory.com/23 [CSS] dis.. 2021. 10. 28.
[CSS] 폰트 지정 브라우저 기본 폰트 사용 나눔고딕 웹 폰트 사용 내 컴퓨터에 있는 폰트 호출 p { font-family : 맑은 고딕, 돋움, 굴림; } 내 컴퓨터에 있지 않은 폰트 호출하고자 할 때는 먼저 구글 폰트 들어가기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 폰트와 원하는 스타일 설정 각각 값 복사하여 해당 위치에 붙여 넣기 2021. 10. 27.

티스토리툴바