본문 바로가기

CSS13

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 적용 순위를 (Specificity) 알아봅시다 CSS가 중복될 경우 적용 순위는? HTML 태그에 클래스도 있고 ID도 있을 때 어떤 CSS가 먼저 적용될까요? 아래와 같은 HTML 태그가 있다고 해볼께요. H5 제목입니다 H5 태그는 클래스와 아이디를 모두 가지고 있네요. 아래와 같이 CSS를 적용하면 폰트의 색상은? h5 { color: yellow; } .my-class { color: blue; } #my-id { color: red; } 정답은 red입니다. CSS는 범위가 좁고 한정적이며 구체적인 정의를 먼저 실행합니다. 위의 태그, 클래스, 아이디 중에는 아이디가 가장 범위가 좁고 그 다음 클래스, 마지막이 태그이므로 아이디 클래스 태그 순으로 CSS가 적용됩니다. 하지만 이게 다가 아닙니다. HTML 태그에 직접 style을 입힌 경우.. 2023. 7. 18.
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.