CSS 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 이름 태그 기능
<style> - HTML의 문법이면서 동시에 CSS라는 언어의 문법에 맞게 해석해서 처리해야 한다는 의미
태그명 {내용;} Selector, Declaration 해당 태그명의 모든 스타일을 내용대로 변경
style="속성:속성값" Property, Value 각 태그마다 개별 커스텀 스타일을 가능하게 함 (태그명1, 태그명2(Selector) 방식도 가능)
<div> Division 디자인 목적을 위해 사용하며 특별한 의미가 존재하지 않음
<span> - Inline element (줄 바꿈이 되지 않는 요소)
@media(조건) Media Query 조건에 따라 CSS가 동작하도록 함
<link rel="stylesheet" href="위치 및 파일명"> - 별도의 파일에 저장되어 있는 CSS를 다운받아 HTML 내에 그 코드가 있는 것처럼 동작하라는 의미



속성 정리


태그 표현 속성명 속성 기능
<style> (텍스트) color: 색상 혹은 색상코드 색상 변경
text-decoration: none 해당 태그에 대한 텍스트 장식(밑줄 표현 등)이 사라짐
text-decoration: underline 해당 태그에 대한 텍스트에 밑줄을 표시함
font-size: 숫자 px 텍스트의 크기 변경
text-align: center 해당 텍스트를 화면의 중앙으로 정렬
<style> (테두리) border-width: 숫자 px 테두리 두께 설정
border-color: 색상 혹은 색상코드 테두리 색상 변경
border-style: 테두리의 형태 실선, 단선, 점선 등을 설정
border-bottom 아래 쪽에만 테두리 표시
border: width (숫자 px) (테두리의 형태) (색상) 위와 동일한 의미의 통합 표현
<style> (화면) display: inline element의 크기만큼 화면을 부분적으로 사용
display: block element의 크기를 화면 전체적으로 사용
display: none element가 화면에서 사라짐
display: grid grid-template 등을 이용하기 위해 사용
padding: 숫자 px 박스 모델과 요소 간 숫자 크기만큼 여백을 만듦
margin: 숫자 px 서로 다른 박스 모델 혹은 요소 간 여백을 만듦
width 크기 px 혹은 비율 박스 모델 크기 조절
grid-template-columns: 숫자 px 1fr 하나의 줄에 두 개를 동시에 표시 (1fr: 나머지 공간을 모두 사용)
숫자 fr 화면 차지 비율 표현
<a> class=”saw” 한 번 이상 열어보았던 페이지에 대한 정의 클래스
class=”saw active” 현재 머물고 있는 페이지에 대한 정의 클래스
<style> (특수) .saw{} saw라는 클래스에 대한 CSS 정의 (함수 형식)
#active{} active라는 id 선택자에 대한 CSS 정의



자세히 보기