2021-05-25 ( HTML, CSS )

오늘 진행한 일정

---

- 14:00 ~ 16:00 [휴식] 
- 16:00 ~ 16:30 [프로그래머스 파이썬]
- 16:30 ~ 17:00 [php 복습]
- 17:00 ~ 20:00 [HTML/CSS 강의 - 63강까지 완료]

 

배운 것

---

 1) HTML / CSS
- `<img src="" alt="">`
  - CSS 속성
    - object-fit: contain; (가로 세로 비율에 맞게 조정)
    - object-fit: cover;

- padding과 margin 차이 : 밖으로 나가는지, 안으로 들어가는지.

- display 속성 중 inline-block, inline, block 차이
  - inline : width, height, margin, padding 속성 적용 안 됨.
    - inline이 default인 태그 : a, span, img

  - lnline-block와 block 요소의 수평 정렬
    - line-block : 부모 요소에 text-align: center;
    - block: margin-left: auto; (left는 오른쪽으로 붙음)
             margin-right: auto; (right는 왼쪽으로 붙음)
             둘 다 써주면 가운데 정렬 = margin: 0 auto;

- section > div:nth-child(1) / div:nth-last-child(1)
  - section의 자식이면서 첫번째 자식이 div인 요소 / 뒤에서 첫번째
- :nth-child(2n+1) = nth-child(odd)
- :nth-child(2n) = nth-child(even)
- border-radious: 50px;
  - 해당 요소의 border. / 50%를 주면 원이 된다.

- inherit 속성값
  - ex) color: inherit;
    - 해당 태그의 부모 태그의 color 값을 상속받는다.

- ul, ol, li 개념
  - ul, ol은 목록
    - ul : 순서가 없는 목록
    - ol : 순서가 있는 목록
  - li 는 목록의 요소(리스트)

- 태그를 다양하게 쓰기보다는, div에 class를 부여해서 사용하는 편이다.
  단, 목록인 게 명확하다면, ul, ol을 사용하면 좋다.

- 노멀라이징
  - body 태그
  - body는 div의 default 부모 태그이고, margin이 default로 들어가있다.
    - body 노멀라이징
   

body{
	margin: 0;
}

  - ul, li 태그

ul, li{
  list-style: none;
  padding: 0;
  margin: 0;
  }

  - h1~h6 태그
 

h1, h2, h3, h4, h5, h6{
    margin: 0;
  }

 

 

2) form(폼 - URL 생성기) 태그가 필요한 이유

- 사용자가 웹페이지를 이용할 때, 사용 난이도를 낮춰준다.
- 사용자 입력 정보의 유효성 체크.

 

 

 

내일 할 일

---

- HTML / CSS
  1) 1차 메뉴 구현 복습.
  2) 기록한 내용 복습.
  3) 강의 64강부터 91강까지 진행.

- PHP : form 태그( get방식 ) 관련한 블로그 글 올리기