하루5분코딩"HTML ,CSS"

-hsw9724·2020년 10월 17일
0

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

profile
👨‍🍳요리사의 "쿠킹" 스토리가 아닌 "코딩" 스토리💻

0개의 댓글