HTML, CSS 기초

Sean yang~~·2022년 4월 19일
0

코딩알려주는누나

목록 보기
2/4
post-thumbnail

오늘은 코딩기초수업을 들어봤다 유튜브에서 재밌게 보고있는 "코딩알려주는누나" 께서 온라인 강의를 하신다길래 기초강의를 들어봤다.

STTTTTARRRTT...

HTML TAG

  • div /div 태그는 영영을 나눠준다. 그냥 말그대로 문장의 밑줄을 띄어준다고 하면 이해하기 쉬울거같다.
  • p /p 태그는 div 캐그랑 별로 다르지는 않지만 윗줄과 및줄의 공간을 살짝 띄어주면서 줄을 바꿔준다...
  • img 태는 닫는 태그가 필요읎다. 대신 이미지 태그는 자신이 가지고오고 싶은 이미지의 주소는 src(source)로 연결해줘야된다.

    ex) img src="이미지 주소"

  • input 태그는 텍스트박스를 만들어주는 태그이다. 다만 input type에 맞게 텍스트/숫자/비밀번호를 입력할수 있는 박스를 만들어준다

    ex) input type="text" input type="number" input type="password"

  • button 태그는 로그인이나 마우스는 클릭할수 있는 버튼을 만들어준다.
  • a 태그는 하이퍼링트를 연결해 주는 태그이다. a 태그는 항상 href(하이퍼링크) 속성을 가진다. 그래서 그 웹페이지 주소로 이동시켜준다.
  • ul, il 태그는 순서가 없는 목록(under list)을 만들때 사용되며, ul 내부에 li(list item) 요소를 포함하여 각 항목을 표시한다.
  • table 태그 테이블 태그는 말그래도 표를 만들어 준다 table border는 테이블바깥테두리 두께를 결정해준다 th 태그는 표안에 들어갈 항목을 표시하고, tr태그는 밑에 테이블 상자로 넘어간다.

CSS TAG

  • CSS를 HTML에 연결하는 방법이 3가지 정도 있는데 저는 오늘 CLASS로 연결시키는 방법을 배웠습니다.
  • CLASS 태그로 연결하기 위해서는
  1. CSS파일에 CSS항목을 만든다 EX) .image-size{witdh: 10px; height:200px;}
  2. 만들항목을 html 태그에 같이 붙어넣기 해준다 ex) div class=image-size 와같이 그러면 내가 설정한 넒이 10px 높이 200px 이라는 설정이 추가된다.
  • 연결을 하기 위해서는 CSS 파일을 하나더 만들고 거기에다가 추가하는 방식으로 한다.
    ex) link href="stylee.css" 연결하는 방법이다.

  • CSS는 HTML코드에다가 스타일 즉 글자의 컬러 배경화면 크기등등을 조정해주는 꾸미는 언어라고 생각하면 쉬울거같다.

  • 이미지 사이즈를 줄이거나 늘리거나 할수도 있고(witdh, height), margin-top,left, bottom등으로 옮길수도 있고, padding 코드로 표안에 공간을 이동할수도 있다.

    끝!!```

profile
나는 프론트엔드 개발자다!

0개의 댓글