[TIL] HTML & CSS 총정리

7006 단어 htmlCSSCSS

드림코딩 by 앨리

온라인 강의 Tip

  • 목표를 확실하게 설정한다.
    ex) 강의가 끝난 후 웹사이트 몇개 하겠다.
  • 자신과의 약속을 한다.
  • 노트에 직접 작성한다.
  • 직접 정리하고 찾아보면서 배운다.
  • 퀴즈나 과제는 직접 해보고 문제해결능력을 기른다.
    큰 그림을 먼저 보자

HTML

Header, Nav, Main(Section>Article), Aside, Footer로 구조화 하여 생각하자!

  • Box : header, section, article, footer, nav, aside, div, span, form
  • Item 사용자에게 보여지는 부분
    : a, video, button, audio, input, map, label, canvas, img, table
  • Block 한 줄에 하나. 상자
  • Inline 물건. 종류 span, a
  • Element: <tag>content</tag>
  • Attributes:
  • Lable, Input 함께 사용하는 것이 일반적이다.

CSS

선택자

  • 태그
  • id #
  • class .
  • attribute []
  • li#id: id 중 li에만 CSS효과주기

BOX

  • padding은 content에 있는 여백
  • margin은 content 밖에 있는 여백

Position

  • 기본값은 static이라 지정해주지 않으면 여백을 주어도 변화가 없다.
  • relative로 지정한 후 여백을 주어야 원래 있어야 하는 자리에서 상대적으로 변화를 볼 수 있다.
  • absolute 아이템이 담겨있는 상자 안에서 변화한다.
  • fixed 상자에서 완전 벗어나 웹페이지 상에서 움직인다.
  • sticky 원래 있던 자리에 그대로 고정되어 스크롤링 해도 그 자리에 고정되는 것이다.

Float

텍스트와 이미지를 배치하는 방법

  • left / center / right 이미지 배열

Flexbox

Container

  • display flex라고 정해준다.
  • flex-direction 기본값은 row이다. 중심축을 지정한다.
  • flex-wrap 기본값은 nowrap이다. wrap은 한 줄에 꽉차게 되면 행을 구분한다.
  • flex-flow direction과 wrap을 한번에 기입하는 방법이다.
  • justify-content 기본값은 flex-start이다. 중심축에서 아이템을 배치하는 방법이다.
  • align-items 반대축에서 아이템을 배치하는 방법이다.
    baseline의 경우 각 아이템별 텍스트의 위치를 균등하게 하는 것이다.
  • align-content 반대축에서 아이템을 배치하는 방법이다. justify-content와 동일하다.

Item

  • order 기본값은 0이다. item의 순서를 변경할 수 있다. (잘 쓰이진 않는다.)
  • flex-grow 기본값은 0이다. container가 늘어날 때 크기를 조정할 수 있다.
  • flex-shrink 기본값은 0이다. container가 줄어들 때 크기를 조정할 수 있다.
  • flex-basis container가 늘어나거나 줄어들 때 퍼센트로 조정할 수 있다.
  • align-self 아이템별로 배치할 수 있다.

%와 vh의 차이

container에서 너비나 높이에 100%를 주면, container의 부모태그인 body 너비에 상대적으로 100%를 준다.

부모 태그에 상관없이 브라우저 너비의 100%을 쓰고 싶을 때 100vh를 준다.

Unit

Relative Unit: %, v*, em, rem

  1. %
  • 부모요소에 반응
  • 박스 사이즈
  1. em
  • 부모요소에 반응
    브라우저 내 어디에서 사용하느냐에 따라 변하는 경우 사용한다.
  • 폰트 사이즈
  1. v*
  • 브라우저에 반응
  • 박스 사이즈
  1. rem
  • 브라우저에 반응
    브라우저 내 어디에서 사용하든 같은 사이즈를 유지하고 싶을 때 사용한다.
  • 폰트 사이즈

Emmet

  • div.container>div.item.item${$}*10
    class name이 container인 div 안에 class name이 item인 div를 10개 추가한다.
    item$ 숫자를 10개 부여한다.
  • 자식태그 > div>ul>li
  • 형제태그 + div>ul+ol
  • 반복 ul>li*5
  • 추가 ^ div>ul>li^ol
  • div>(header>ul>li*2>a)+footer>p
<div>
    <header>
    	<ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
    	<p></p>
    </footer>
</div>
  • 텍스트 입력 {} p{hello}
  • 숫자할당 $

reference

VSCode

좋은 웹페이지 즐겨찾기