하루5분코딩"HTML ,CSS"

HTML: 웹페이지의 틀을 만드는 마크업 언어

- HTML은 tag들의 집합

• tag: 부등호 <> 로 묶인 HTML의 기본 구성요소
  ex)< body >< /body >, < div >< /div >,< span >< /span >
  ✓ 항상 닫는 태그를 같이 사용한다.
  
• But! self-closing tag - 태그내부에 내용이 없다면 < tag/ > 와 같이 사용가능

- 문서 만들기

• div(한줄을 차지한다.) vs span(컨텐츠 만큼만 차지한다.)

• 이미지 < img scr = " 주소 " >

• 링크 < a href = " 주소 " >
  -링크를 통해 새창을 열고싶다면 < a href = " 주소 " target ="_ blank">

• 리스트 ul,li

- 입력 폼 만들기

• input < input type = " " > 안에 ex) text, checkbox, radio, password

• textarea 줄바꿈이되는 입력폼 < textarea > < /textarea >

• botton < botton > < /botton >

CSS: 웹페이지 구성요소의 스타일을 정의하는 언어

- HTML(웹페이지 구성요소들을 구성하는역할) vs CSS(검색창의 너비, 버튼의 크기, 구성요소의 위치)

- 사용법

• inline
• HTML 내부에 stylesheet 작성
• HTML 외부에 stylesheet 작성

-Layout

• 브라우저에서 사용하는 좌표계
  • 기본적으로 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 확장
    왼쪽상단의 좌표가 (0,0)이 된다.
    ✓ 픽셀(px)단위나 퍼센트(%) 단위 등으로 쓸 수 있다.
    -좌표계를 가지고 positioning 가능
• 다양한 display 요소
  • 한줄을 다 차지하는 block ex) div
  • 그렇지 않은 inline, inline-block ex) sapn
• Box Model
  • 사이즈 계산 방법을 달리 설정 할 수 있다.
    ✓보통 box-sizing : border-box; 로 설정해 놓는 편이 계산하기쉽다.
    ex) box-sizing : border - box; width : 280px; height : 100px;
    컨텐츠는 유지되고 밖에 박스들이 조정이된다.

• Positioning & Layout

  • static
  • relative
  • fixed
  • absolute
  • sticky
    

  참고자료 → https://ko.learnlayout.com/position.html