![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhWTYU%2FbtrNUFtu3ej%2FbmKLgxKgKVLNp7UMgHskb0%2Fimg.png)
HTML/CSS기초 4일차 공간활용( margin, padding, border)
2022. 10. 6. 16:37
Study/HTML,CSS
block은 한줄한칸으로 공간을 차지 inline은 글자공간만 차지 none은 숨겼을때 사용한다 예제_a태그를 마우스를 올렸을 때, 그 옆에 있는 span태그의 디스플레이를 inline으로 변경 a : hover + span a태그 를 클릭했을때 그 옆에 있는 스팬태그 display : inline 디스플레이 를 인라인으로 변경! a태그를 공간활용을 위해 태그의 공간을 네모로 할당한다 ● margin=테두리 바깥쪽에 공백을 부여하는 속성 - 컨텐츠의 크기에는 변화가 없고 위치만 이동 - 10px = 상하좌우 각각 10px값을 부여 - 10px 20px = 상하10px, 좌우20px - 10px 20px 30px 40px = 상 10, 우 20, 하 30, 좌 40 (시계방향) - auto = 화면의 가운..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fso7l5%2FbtrNSNZhbjz%2FbGAmmj1mjh2g6Yb3QKKD3k%2Fimg.png)
HTML / CSS기초 3일차 <css>
2022. 10. 5. 17:48
Study/HTML,CSS
- font-family에 복수개의 값을 입력하는 경우가 많다. 글꼴이 없을 때 뒤에 있는 다른 글꼴들로 대체하기 위해서 - font-size 는 글자의 크기 font의 기본 크기는 16xp - font-weight는 글지를 두껍게 만든다 - font-style은 폰트의 스타일로 이탤릭체가 대표적이다 ★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다! 1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여 p태그 영역 p태그 영역 span태그 영역 span태그 영역 2. 태그 선택자(태그명) : 특정 태그에게 스타일을 부여 p태그 영역 p태그 영역 span태그 영역 span태그 영역 3. 클래스 선택자( . ) : 태그들 중에 클래스 값을 가지고 있는 요소에게 부여(중복가능)..