20210513 CSS - list 와 button

list 스타일

ul , ol , li 태그로 생성된 엘리먼트의 설정 변경해보기

1. ul 태그로 하나의 리스트 생성 하고 mylist 를 클래스를 넣어주었다
2. ol 태그로 하나의 리스트 생성 하고 ollist 를 클래스를 넣어주었다

< style > 태그 내부에 .mylist 선택자로 mylist 클래스를 가진 엘리먼트들을 수정

.mylist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

html 확인..

mylist 클래스를 가진 ul 엘리먼트의 margin과 padding의 0으로 해준 모습이다
두 값이 0이지만 여전히 공백이 보이는데

크롬 개발자 도구 - Elements - Styles 로 확인해보면

user agent stylesheet 에 body에 margin 값이 8px 로 적용된것을 확인할 수있다.
body에 margin 값을 설정하지 않아서 브라우저가 임의로 설정한 값이다

VScode로 body에 margin 값을 설정해주었다

margin값이 설정한 0으로 설정 확인

리스트 내부 li 엘리먼트 수정하기

.mylist 로 mylist 클래스를 가진 엘리먼트에 접근하고
.mylist li 로 mylist 엘리먼트 밑의 li태그의 스타일을 수정할 수있다.

적용확인

mylist 클래스를 가진 < ol > 리스트 의 마지막 child

ol.mylist li:last-child {
}

mylist 클래스를 가진 엘리먼트 밑의 li 태그 중 첫번째 chlid

.mylist li:first-child {
}

mylist 클래스를 가진 엘리먼트 밑의 li 태그 중 두번쨰 child

.mylist li:nth-child(2) {
}

각 태그에 클래스를 넣어 CSS를 적용하지않고
엘리먼트의 자식 엘리먼트를 순서대로 접근하여 적용할 수 있다.
ex) p:first-child >> p 태그의 첫번째 자식 엘리먼트
ex2) p:nth-child(4) >> p 태그의 4번째 자식 엘리먼트

button 스타일

여러개의 클래스를 적용시키기

1. button 태그의 클래스에 기본적으로 btn의 클래스를 넣고 버튼 사이즈와 모양을 설정하였다.

2. 3가지의 버튼의 색을 다르게 설정하기위해 두번째, 세번째 버튼에 각각 btn2 , btn3 의 클래스를 추가하였다.

3. < style > < /style > 태그안에 btn2 클래스에 적용할 코드와 btn3 클래스에 적용할 코드를 각각 따로 작성하였다.

적용확인

하나의 엘리먼트에 클래스는 여러개 지정하고
1. 공통된 설정
2. 각 엘리먼트마다 설정
으로 나누어서 적용시킬 수 있다.