본문 바로가기

Front-End/CSS11

[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.
[CSS] CSS 특징과 기본 개념, CSS 스타일 지정 방법 CSS(Cascading Style Sheet) - HTML이 웹 페이지의 "뼈대"라고 한다면 CSS는 "살" 이라고 할 수 있음 - 즉, HTML이 웹 페이지의 정보를 표현한다면, CSS는 HTML을 좀 더 보기 좋게 디자인 하는 역할을 함 CSS 특징 HTML 문서에 스타일(디자인)을 적용하는 언어 CSS 사용 방법 : 인라인 방식(태그에 직접 적용), head 영역, 외부 파일(*.css) CSS 형식 : 선택자 { 속성 : 값; } 선택자 : body에서 선언한 태그 하위태그 지정 : 상위태그 하위태그 { 속성 : 값; } CSS 스타일 지정 방법 link 방식 -link : 현재 문서와 외부 리소스(*.css) 파일과의 연결을 의미 -rel : "stylesheet" : 태그로 연결하는 파일이 .. 2021. 10. 27.

티스토리툴바