CSS 선택자, CSS 속성과 속성값

 CSS 선택자, 속성, 속성값

선택자란?

말 그대로 선택을 해주는 요소, CSS 규칙을 적용할 요소를 뜻한다.

선택자는 크게 기본 선택자, 그룹 선택자, 결합자 등이 있다.

(기존에 선택자를 잘 못 이해했던 것 같다.

속성이나 속성 값은 참고!)

https://baekspace.tistory.com/19?category=1126488

CSS 기초

/*기본 문법*/
선택자  { 
	속성 : 속성값 ;
}

속성과 속성값은 {} 중괄호 안에 여러 번 쓸 수 있고, ; (세미콜론) 을 이용하여 문장을 마무리 지어준다.

 

기본 선택자에선 전체 선택자 * , 유형 선택자는 element_name , 클래스 선택자 .을 이용하여 .class_name, id선택자는 #을 이용하여  #id_name 를 사용하고

그룹 선택자는 ,를 이용하여 A,B 그룹을 생성

복합 선택자 중 > 결합자를 이용해서 선택하는 자식 결합자는  A > B 처럼 사용한다.

(이외에도 많은 것이 있지만 필요하면 찾아 쓰자)

선택자는 기호를 뜻한다는 것이 아니라 적용할 요소를 말하는 것이다.

/* 전체 선택자 */
*{
    margin: 0;
    padding: 0;
}

/* 유형선택자 */
p {
    background: #fff;
}

/* ID 선택자 */
#header {
    background: #fff;
}

/* class 선택자 */
.title{
    background: #fff;
}

/* 그룹 선택자 */
ul, li{
    background: #fff;
}

/* 자식 결합자 */
#header > p {
    background: #fff;
}

** id 와 class **

id를 중복해서 쓰더라도 웹사이트를 구현하는 데 문제는 없지만 1번만 쓰는 것으로 약속되어 있다.

class는 공통적인 내용이 있을 때 사용할 수 있으며, 한 행에 여러 번 쓸 수 있다.

**margin 과 padding**

margin은 border(테두리) 영역 밖으로, padding은 border(테두리)영역 안으로 이동할 때 사용한다.

padding을 사용하면 padding 값만큼 컨텐츠 영역이 늘어나 블럭의 사이즈가 달라져서 오류가 생긴다. padding 값에 맞춰서 블럭의 사이즈를 빼줘야 하지만 padding 을 사용하면서 내가 원하는 블럭사이즈를 고정하기 위해서 box-sizing : border-box; 속성을 사용하면 원하는 레이아웃을 유지한 상태로 padding값을 넣어 줄 수 있다.

 

**inline 형태**

display : inline 상태에서는 width, hieght, margin, padding 이 적용되지 않는다.

그래서 inline 상태이면서 width, hieght, margin, padding을 적용시키기 위해선

display : inline-block  상태로 바꾸고 작업을 해야 한다

 

**ul 과 li**

코드 가독성을 위해서 ul 안에 li 외에 다른 태그를 쓰지 않는다. 2가지 이상 써야 할 경우 div로 한번 더 묶어서 쓰는 것이 좋다.

(필수가 아닌 깔끔한 코드 작성을 위한 룰)

 

**button**

버튼은 기본적으로 테두리 속성이 있다. 내가 원하는 디자인이 있는 경우 기존에 있는 버튼의 속성들을 지워 줄 필요가 있는데, 

button{
    background:none;
    border:none;
}

위와 같은 방법으로 테두리, 배경색을 지울 수 있다.