CSS 14

선택자(selector) 14가지 종류

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 기술해도 무방합니다. 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. type 선택자는 html 요소의 타입에 따라 스타일을 적용합니다. 예를 들어, input 요소의 타입이 text인 경우, input[type="text"] 선택자를 사용하여 해당 요소에 스타일을 적용할 수 있습니다. 2. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다..

CSS 2023.02.25

float 사용방법 정리!

float block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성입니다. float을 지정하는 방법과 함께 float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완료할 수 있습니다. float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변에 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징 됩니다. 그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다. 속성 값 속성 설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도..

CSS 2023.02.25

ID와 CLASS 차이점 (CSS 선택자)

1. ID 선택자 css에서의 정의방법은 #id_name{속성명: 속성값; 속성명: 속성값;} 식으로 적용합니다. ID를 사용할 때 중요한 것은 CLASS와 다르게 한페이지에서 한번만 사용이 가능합니다. ID는 페이지 내에서 특정 위치 태그를 지정하는 것이기 때문에 오직 페이지 내에서 한번만 사용할 수 있습니다. 2. CLASS 선택자 자주 사용되는 스타일에 적용하는 것이라고 생각하시면 됩니다. 예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키는 방법입니다. css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 식으로 적용합니다. html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능합니다. ..

CSS 2023.02.21

CSS 표현하는 4가지 방법

CSS란? : CSS는 Cascading Style Sheets의 약자로, HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다. 글꼴, 배경색, 위치, 너비와 높이 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정하는 것입니다. CSS의 장점 문서의 내용과 표현을 분리하여 CSS파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정됩니다. 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다. CSS로 기대되는 효과 정보와 디자인을 분리하여 관리할 수 있습니다. 정보를 수정하지 않고 디자인만 변경할 수 있습니다. (태그마다 style 속성을 주게되면 소스코드가 지저분해 지는데, 부리하여 관리하게 되면 유지보수..

CSS 2023.02.20