본문 바로가기

CSS10

CSS border, HTML 요소 테두리 모양과 스타일을 만드는 속성 BORDER란? CSS border 속성을 사용하면 HTML 요소를 둘러싼 테두리 모양과 스타일을 내 마음대로 민들 수 있습니다. 너비, 색상, 두께 등을 말이죠. 사용법 div { border: 1px solid #000000; } div는 element의 한 예시입니다 border: 뒤에 선의 두께(width), 모양(style), 색상(color)을 차례대로 씁니다 두께(width) : 픽셀 단위로 입력하는 게 일반적이지만, thin, medium, thick으로 사전에 정의된 두께를 입력할 수도 있어요 모양(style) : none, dotted, solid 등 모양을 정할 수 있습니다 색상(color) : 사전에 정의된 색상 이름, RGB, HSL 등을 이용할 수 있어요 세 가지 속성을 모두 쓸.. 2023. 7. 20.
CSS font-weight, 텍스트 두께 조절을 위한 속성 FONT-WEIGHT 속성이란? 이 속성 역시 font-size, font-family와 함께 다니는 속성인 필수 도구입니다. 웹페이지의 텍스트 두께를 조절하는 역할을 합니다. HTML 태그와 같은 역할 아닌가 싶으시죠? 태그에는 중요하다는 의미가 포함되어 있지만 font-weight는 단순 디자인만 변경하는 것이기 때문에 태그와 비슷하다고 할 수 있겠네요. 사용법 h1 { font-weight: bold; } p { font-weight: 300; } h1 요소와 p 요소의 텍스트 크기를 정한 예시입니다 font-weight 속성 뒤에는 두 가지 방식으로 입력이 가능합니다. 정해져 있는 이름 : normal, bold, bolder, lighter 숫자 : 100에서 900까지 숫자를 입력할 경우 10.. 2023. 7. 19.
CSS text-align 텍스트를 정렬하는 속성 Text-align 속성이란? CSS text-align은 텍스트 정렬을 처리하는 속성입니다. 워드프로세스나 문서 편집기에서 흔히 쓰는 좌측, 우측, 가운데 정렬 기능이죠. 제가 사용중인 티스토리 상단 툴바에도 텍스트 정렬 기능이 보이네요. 사용법 h1 { text-align: center; } text-align을 선언합니다 이용 가능한 속성값을 입력합니다 left : 기본값입니다. 왼쪽으로 텍스트를 정렬합니다 right : 오른쪽으로 텍스트를 정렬합니다 center : 가운데에 텍스트를 정렬합니다 justify : 좌우 끝을 맞춰서 텍스트의 간격을 조정합니다 더 자세한 내용은 아래 링크를 참조하세요. https://developer.mozilla.org/en-US/docs/Web/CSS/text-al.. 2023. 7. 18.
CSS selector(선택자) 선언, 작성하는 방법 CSS Selector (선택자)란? CSS는 HTML문서를 화려하게 아름답게 만드는 언어라고 이전 글에서 설명한 적이 있습니다. [CSS] - HTML을 스타일리쉬하게 만드는 CSS HTML을 스타일리쉬하게 만드는 CSS CSS란? CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, ITMAKEEASY.COM 다시 한번 CSS 구조를 살펴보면 아래와 같습니다. P 태그에 대하여 (선택자 정의) color는 (속성) blue로 표시해라 (속성값) 을 나타낸거에요. 이 때 P가 selector (선택자) 입니다. CSS에서 선택자는 전체 .. 2023. 7. 17.