css 썸네일형 리스트형 css의 중요한 단위 ! 1. px 화면에 표시되는 최소 단위이며 고정적인 단위다. 2. % 부모요소의 영향을 받는 단위다 가로 너비가 600px인 태그안에 자식요소인 태그의 가로 너비를 width: 50%; 로 설정하면 자식요소인 태그의 가로 넓이는 300px이 된다. 3. em, rem em은 자기 자신의 font-size의 영향을 받는 단위다. ex) 태그의 font-size가 10px 일 경우 width: 30em; 을 하면 가로너비가 300px이 된다. rem은 가장 상위요소의 font-size의 영향을 받는 단위다. ex) 가장 상위요소인 태그의 font-size 가 10px일 경우 20rem은 200px의 크기를 가진다. 4. vw, vh vw는 화면 전체인 viewport 의 가로너비를 비율로 사용하여 표시하는 단.. 더보기 css 상속과 우선순위 ! 1. 상속이란? 상위요소에 특정한 css속성을 적용 했을때에 하위요소들에게도 적용되는 현상! hello hi good bye world 2. 상속되는 속성들 font 관련 속성들, color, text-align, text-indent, text-decoration, letter-spacing, opacity 등... 글자를 다루는 속성들이 주로 적용된다. 3. 강제 상속 상속이 되지 않는 부모요소의 속성을 강제로 상속시킨다. .container { position: absolute; } .box { position: inherit; } 위처럼 자식요소의 속성 값에 inherit 를 입력하면 부모요소의 값이 강제상속이 된다. 4. 우선순위 hello * { color: blue; } body { colo.. 더보기 css의 선택자의 종류 ! 1. 기본 선택자 전체를 선택해주는 * {} tag를 선택해주는 태그명 {} class를 선택해주는 .클래스명{} id를 선택해주는 #아이디명 {} 2. 복합 선택자 일치 선택자 ex) div.container {} => 태그이면서 class 속성이 container 인 요소를 찾아준다. 자식 선택자 ex) ul> li {} => 태그의 자식 요소인 태그를 찾아준다. 후손 선택자 ex) div li {} => 태그의 후손 요소인 태그를 찾아준다. (자식도 후손에 포함이 된다) 인접 형제 선택자 ex) div+.container {} => 태그의 다음 형제 요소 중에 class 속성이 container 인 요소중 가장 인접해있는 요소를 찾아준다. 일반 형제 선택자 ex) div~.container {} =.. 더보기 css의 기본! 1. 문법 css의 문법은 간단하다. 선택자 { 속성: 값; 속성: 값; } /* ex */ hello world div { color: red; font-size: 20px; border: 1px solid blue; } 가독성이 좋게 이런 식으로 작성해주면 된다. 2. 선언방식 inline 방식 위처럼 태그 내에 직접적으로 스타일 속성을 사용해서 넣어주는 방식으로 유지보수하기가 까다롭기 때문에 사용시 주의가 필요하다! 내장방식 hello world 위처럼 태그를 사용해서 외부에 있는 css 파일을 직접적으로 연결해주는 방식 @import 방식 @import url("경로") css 파일내부에서 다른 css 파일을 가져와서 연결한다. 더보기 이전 1 2 다음