CSS 썸네일형 리스트형 CSS 연습 1. border .item { width: 100px; height: 100px; background-color: red; } .container .item:first-child { border: 100px dashed; border-width: 10px; } h1 { border:1px solid red; } h2 { border-bottom: 5px dotted blue; } 2. border-radius div { width: 100px; height: 100px; background-color: purple; margin: 20px; border-radius: 45px; } 3. box-sizing .item { background-color: orange; width: 100px; height.. 더보기 CSS 박스 모델 연습 1. 부모 자식 관계 2. 출력하기 .parent { width: 300px; height: 200px; background-color: blue; } .child { width: 100px; height: 100px; background-color: orange; } 파란색이 부모, 노란색이 자손이다. width를 auto로 하면 부모(파란색)의 너비를 따라간다. 3. 픽셀(px)수 보는 방법. 4. 부모 폰트사이즈를 40px로 하자 자손 너비가 40*10(em)=400px이 됐음. 부모요소로부터 글꼴 사이즈를 상속받는다. 5. 단위 - px (픽셀) - 1024 768 -> 가로 픽셀 1024개, 세로 픽셀 768개 있음 - % (상대적인 백분율) - 기준이 있어야함 - 자식요소는 부모요소의 속성값이.. 더보기 CSS 기본 문법 ② 1. 가상 요소 선택자 ABC::before - 선택자 abc 요소의 내부 앞에 내용(content)을 삽입 ABC::after - 선택자 abc 요소의 내부 뒤에 내용(content)을 삽입 2. 속성 선택자 3. gmail 처음에는 div태그로 만들었음. 유지보수 쉽지 않았음. 4. ! important는 가장 우선순위임 Hello Seoul! 순서 !important 인라인 선언 ID 선택자 Class 선택자 태그 선택자 전체 선택자 점수 계산은 왜 하는거지? 더보기 CSS 복습 안녕 아무리 외부스타일시트로 빨간색 배경을 연결하려고 해도 연결이 되지 않았다. 이유는 div영역을 지정해주지 않았기 때문이다. 기초지만 이렇게 헤맨다... 더보기 CSS 기본 문법 1. 속성은 ~값이다. width: 200px; 너비가 200px이다. 2. CSS 선언 방식 - 내장 방식 - 의 내용(Contents)으로 스타일을 작성하는 방식 - 링크 방식 - 로 외부 css 문서를 가져와서 연결하는 방식 - 인라인 방식 - 요소의 style 속성에 직접 스타일을 작성하는 방식 - 선택자 없음 - @import 방식 3. import 방식에서 막혀서 못함. 다시 해보자. 4. 속도가 빨라서 그냥 따라가는 중. 다시 해결함 ;을 붙여주지 않아서 오류가 났음. 5. css 연습 사과 딸기 배 당근 토마토 오렌지 사과 딸기 배 당근 토마토 오렌지 사과 딸기 배 당근 토마토 오렌지 사과 딸기 오렌지 당근 토마토 오렌지 사과 딸기 오렌지 당근 토마토 오렌지 사과 딸기 오렌지 당근 토마토 .. 더보기 CSS 실습 1. HTML로 웹사이트를 만들고, 고양이 사진을 넣었다. Hello HTML! Hello World!! Hello World div { color:red; font-size: 100px; } img { width: 500px; height: 500px; } 더보기 이전 1 2 다음
