20일차_Front(HTML-input, lable, datalist, CSS-selector, transform, display, position, flex 등)

안녕하세요.

 

오늘은 3/31(월) 데브코스 20일차(5주 1일차) 입니다.

 

HTML 과 CSS에 대해서 배웠습니다. 한번씩 훑은내용도 있었고, 모르는 내용도 있었네요.

주로 태그 사용법, CSS 스타일시트(외부, 내부, 인라인) 적용 하는 법을 배웠고 바로바로 화면에 띄워서 결과를 확인하니 재밌었습니다.

 

다른 태그들은 검색하면 사용법이 많이 나오니, 제가 헷갈린 부분만 포스팅해볼게요!

 

HTML

<div></div>

• 블록 요소(Block Element)
• 한 줄 전체를 차지하며, 줄바꿈이 자동으로 발생함
• 레이아웃을 나누거나 큰 영역을 만들 때 사용

 

---

 

<span></span>

• 인라인 요소(Inline Element)
• 글자나 요소가 끝나는 지점까지만 영역이 잡힘
• 줄바꿈없이 텍스트 일부나 짧은 영역을 스타일링할 때 사용

 

 

 

---

CSS

선택자 우선순위

(낮음) 전체 선택자(*) -> 태그 선택자(div, p, h1) -> 클래스 선택자(.title, .box) -> 아이디 선택자(#main, #header) -> 인라인 스타일 -> !important (높음)

 

 

 

 

단위

• 절대길이 : px, pt, cm, mm
• 상대길이 : vw, vh, vmax, em, ex, rem
  • v : viewport(사용자에게 보여지는 영역을 기준으로 하는 단위들)
  • e : equal m,x (상위 요소 폰트의 m, x 크기를 기준으로 하는 단위들)

 

 

 

transform

• 요소를 변형시키는 속성으로 크기조절(scale), 회전(rotate), 이동(translate), 기울이기(skew) 기능이 있음
• transform은 레이아웃에 영향을 주지않고, 애니메이션에 많이 쓰임

 

 

 

display

• HTML 요소가 화면에 어떻게 배치될지 결정하는 CSS 속성
  • block : 부모요소의 width 를 영역으로 가지고, 모든방향에 margin 적용 가능
  • inline : 컨텐츠의 크기만큼 영역을 가지고, 좌우 방향에만 margin 적용 가능 (width, height 속성 사용불가)

 

 

position

• CSS 레이아웃에서 요소를 어디에 어떻게 배치할지 결정하는 속성
  • static (기본 값)
    : 기본배치 방식(HTML 작성순서대로 차곡차곡 쌓임), top, left 속성 불가
  • relative
    : 자기 원래 위치 기준으로 이동
  • absolute
    : 부모중에 position: relative 가진 요소를 기준으로 위치함 (공간에서 빠지고, 다른요소가 그자리에 올라올 수 있음)
    or 부모클래스가 없으면 body 기준으로 작동
  • fixed
    : 브라우저 화면 기준으로 고정됨(스크롤해도 가만히 있음)
  • sticky
    : 스크롤하다가 특정 위치에 붙어서 고정됨

 

 

flex

• container : 정렬할 요소들을 감싸는 부모요소
  • justify-content : 주축에 대한 정렬방식을 지정
    • flex-start : default, item을 시작점 부터 정렬
    • flex-end : 끝점부터 정렬
    • center : 가운데 정렬
    • space-around : 일정 간격으로 정렬
    • space-between : 일정 간격으로 정렬, 시작/끝 아이템을 컨테이너의 시작점, 끝점에 배치
  • align-items : 교차축에 대한 정렬방식을 지정
    • flex-start, flex-end, center (상동)
• display + flex / inline-flex 지정을 통해 container 로 만들 수 있음
  • display: flex           -> container 가 block 요소가 됨
  • display: inline-flex -> contatiner 가 inline 요소가 됨 
• item : container의 자식요소
  • align-self : 개별 item을 교차축 기준으로 정렬
    • flex-start, flex-end, center (상동)
• flex-direction : item이 정렬되는 방향

 

 

 

오늘도 수고하셨습니다 !