수업 정리
이미지 태그(img)
-
닫는 태그가 없음
-
부모가 될 수 없음 = 자식을 가질 수 없음 = 누군가의 자식은 될 수 있음
-
<img src="" alt="">scr = 이미지를 불러올 경로
alt = 이미지가 깨졌거나, 서버에서 불러올 수 없을 때 alt에 적힌 텍스트가 대신 보여짐 -
세상에 존재하는 모든 이미지는 자신이 가진 고유한 비율 -> 이미지가 생성되는 시점에 비율이 정해짐
-> 이 비율은 바뀌지 않음 -
비율을 무시하면 이미지가 깨짐
-
본질이 글자라서 여백이 있음 -> 여백을 없애려면 img가 블록요소가 되어야 함
-
독립적으로 사용되는 경우가 많지 않음 -> 일반적으로 img를 감싸는 블록요소의 태그 안쪽에서 사용
-
picsum 사이트 사용
margin,padding
- margin : 바깥 여백
- margin: 10px 20px 30px 40px;
/ 순서: 위 오 아 왼 (시계방향) /
- margin: 10px 20px 30px 40px;
블럭을 중앙으로 맞추는 방법
margin-left: auto;
margin-right: auto;
- padding : 안쪽 여백
- padding: 10px 20px 30px 40px;
/ 순서: 위 오 아 왼 (시계방향) /
- padding: 10px 20px 30px 40px;
nth-child = 부모 요소 안에서 특정 순서에 있는 자식 요소를 선택할 때 쓰는 CSS 선택자
-
div의 5번째
-
3의 배수만 나옴
-
첫째
-
막내
별명을 붙이는 방법
HTML
CSS
class 옆에는 여러개가 붙어도 됨
아래 조건을 모두 만족하는 요소에만 width: 150px을 적용하겠다는 뜻
div 태그이면서
클래스가 dfg, qwe, asd 를 전부 가지고 있는 요소
id를 사용할 경우 HTMl
id는 한 페이지에 하나만 사용하는 게 원칙
CSS (불러낼 때 #을 사용함)
border-radius = 모소리를 둥글게 만드는 속성
CSS 노말라이즈(normalize)
= 태그 자체가 가지고 잇는 스타일 속성을 제거하는 것
전부 다 제거하는 건 reset
일부를 남기고 불필요한 것들만 제거하는 게 normalize
ex) a, body, h, uI, Il
- ingerit : 부모 요소의 값을 상속을 받아라
리스트
- 순서에 의미가 있는 리스트 (ol)
- HTML
- 결과
- 순서에 의미가 없는 리스트 (ul)
-
HTML
-
CSS
-
자식으로 li만 가질 수 있음
li의 자식으로는 li만 빼고 아무거나 다 올 수 있음(ul도 포함) -
블럭과 마진을 가지고 있음
-
list-style: none = 스타일을 가지고 있어서 없앨 수 있음
-
ul의 노멀라이즈
h태그
- h태그는 6까지만 존재함
- 수가 커질수록 글씨 크기는 작아짐
- 여백이 존재함
- 글씨가 진함
- 제목을 부각시켜주는 역할
- 거의 사용하지 않음
h태그의 노멀라이즈
- margin : 0
position
= 스타일 속성
