오늘은 css에 들어가는 첫 날이다.
CSS
css의 첫 코드는 이것이다.
태그를 선택해서 디자인을 태그에 입히는 방식이 기본적인 방식이다. 물론 다른 방법도 있다.
여기서 h1같은 것을 태그 선택자라고 하며 이것은 html태그, class선택자, id선택자, all선택자 등이있다.
여기서 id의 쓸모성을 알 수있다.(id를 이용해서 html파일의 해당 태그를 인식할 수 있다)
선택자
html은 태그로 이루어져 있지만 css는 선택자로 이루어져 있다.
전체 선택자
*는 전체 선택자라고 하고 wildcard라고도 한다
기능은 이렇게 해주면 모든 태그를 대상으로 한다.
빼고 싶은 부분은 따로 선택자를 지정해주면 된다.
id선택자
#을 이용하여 #뒤에 id를 적어주면 해당 id의 속성을 바꾸는 것이다.
class선택자
이것도 id선택자랑 비슷한 개념으로 class속성의 속성값을 선택해서 효과를 주는 방식이다.
근데 id와의 차이는 id는 이름이 중복되면 안되지만 class는 중복이 가능하다는 차이가 있다.
사용방법은 아래와 같다
공간태그
태그에서 빽먹은거 하는 시간
공간을 만들어서 그 공간을 꾸밀 수 있는 기능이다.
공간태그에는 2개가 있는데 하나는 div 하나는span이다
둘의 대표적 차이는 줄바꿈의 유무이다
span은 또한 css측면에선 가로 세로 속성이 안먹힌다.
div줄바꿈 있음, 블럭속성,
span 줄바꿈 없음, 인라인속성, 크기 조절 못함css에서
list-style 속성
이건 리스트에 여러가지 효과를 줄 수 있는 css속성중에 하나다. 사용 방법과 종류는 필요할때 찾아서 사용하면 된다고 생각한다.
그런데 이걸 사용했는데 되지 적용되지 않아서 물어보니 li태그에만 사용할 수 있다고 하더라. 난 span에 사용해서 안되는 거였다.
오늘 사용한 기능
1. ul에 점 빼기 - list-style:none;
2. 리스트에 사진 넣기 - list-style-image: url("이미지 경로");
참고로 이 기능은 html에서도 style속성으로 사용 가능하다.
css에서 중요한 것은 서칭 능력인거 같다 모든 속성을 외울 수는 없으니 사용하고 싶은 속성이 어떤 것인지를 잘 파악하고 검색 키워드를 잘 찾아서 속성을 찾을 줄 알아야 한다고 생각한다.
