[TIL] 웹 개발, HTML 기초

4046 단어 htmlCODESTATESTodayILearnedTILCODESTATES

💡 Achievement Goals를 위주로 정리하는 TIL

✔️ chapter. 웹 개발 이해하기

  • HTML - Structure
  • CSS - Style 구조적인 문서를 어떻게 시각적으로 표현하는지
  • JS - Interaction

✔️ chapter. Visual Studio Code

  • Visual Studio Code를 이용하여 HTML과 CSS 파일 생성 방법

✔️ chapter. HTML의 기초

  • Hyper Text Markup Language
  • 프로그래밍 언어 x
    웹 페이지의 뼈대가 되는 구조를 표현하는 언어
  • 태그(부등호<>)들의 집합
  • Tree Structure
    HTML 기본 템플릿 form 생활코딩
<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title></title>
  </head>
  <body>
  </body>
</html>
  • 구조와 문법
    Opening tag < tag >
    closing tag </ tag >
    self-closing tag < tag />
  • 요소 (Element)
    태그 ( MDN 검색 )
    <p> paragraph 문단
    <div> content division 의미, 줄 바꿈 됨, 한 줄 차지 //큰 구역을 구분하기 위해 사용하는 것은 지양
    <span> content 컨테이너, 줄 바꿈 안됨, 컨텐츠 공간만큼 차지
    <section> 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용
    <ul> Unordered List
    <ol> Ordered List
    <li> List Item
    <img src(attribute name속성의 이름) = "(attribute value속성의 값)" > image //닫는 태그가 없음
    <input> input(Text, Radio(그룹 중 1개만 선택 가능), Checkbox(여러개 선택 가능) 입력창
    ex.
    ID <input type="" placeholder="">
    a <input type="radio" name="choice" valus="a">a
    b <input type="radio" name="choice" valus="b">b
    <textarea> Multi-line Text Input 창 안에서 줄 바꿈 가능
    <button> Button
    <a href=""> link 해당 페이지에서 열기
    <a href="" target="_blank"> link 새 창에서 페이지 열기
    <script> 자바스크립트 실행
    ex.
    <script src="my-java-script.js"></script>
  • 스타일 지정
    id 한 가지만 지정해서 사용, 유일무이 (#name)
    class 그룹으로 묶어 스타일을 지정할 때 사용 (.name)

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes

2021년 2월 11일 복기 (TIL React)
스파르타 코딩 1주차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage