개발 기록 남기기✍️

HTML, CSS 기본 코드 파악 및 세팅, 페이지 실행 본문

Front-End/HTML & CSS

HTML, CSS 기본 코드 파악 및 세팅, 페이지 실행

너해동물원 2022. 7. 6. 12:29

HTML을 구성하는 내용

  • 요소(Elements) : 시작 태그와 종료태그로 이루어진 모든 명령어
  • 태그(Tag) : 요소의 일부로 시작 태그와 종료 태그
    • 태그는 부모 태그와 자식 태그로 이루어짐.
    • 부모 태그 안에 여러 개 자식 태그 넣을 수 있음
    • 자식 태그 안에 자식 태그 넣을 수 있음
    • 태그끼리 교차는 불가. 무조건 태그 안에 태그 넣는 식으로.
  • 속성(Attribute) : 요소의 시작 태그 안에서 사용되는 기능
    • 속성 명(Property) : 속성의 정의를 하기 위해 선언되는 곳으로 Attribute-name 으로 불리기도 함.
    • 값(Value) : 정의된 속성의 값
  • 내용(text) : 태그 내부에 작성된 내용

<a href=”https://www.naver.com”>네이버로 이동합니다.</a> ⇒ 요소

<태그 속성명=”값”>내용<태그>

HTML 기본적인 문법

<!DOCTYPE html> → 웹 브라우저에게 html5 문서라는 것을 알리기 위함

<html lang=”ko-KR”> → 언어 설정

<head> → 문서의 정보 표시

<meta charset=”UTF-8”>

<title>document name</title> → 페이지 제목

<style>body {background-color : gray; color : yellow}</style> → CSS 스타일

</head>

<body> → 문서의 구조. 실제로 보이는 부분

</body>

</html>

  • CSS 태그 문법 : 꾸밀 영역(ex.body) {property : value ;}
    • head 영역에 작성
      • <style><style>
      • body {background-color : #fff;}
    • 외부 링크로 연결
      • <link rel=”stylesheet” href=”test.css” />

'Front-End > HTML & CSS' 카테고리의 다른 글

[HTML] inline요소와 block요소 구분  (0) 2022.07.06
[CSS] 의사 전달 코드 이해(hover, active, focus, visited, before, after)  (0) 2022.07.06
[CSS] class, id 기초 개념 파악 및 css 선택자, 색상 및 기본 내용 파악  (0) 2022.07.06
[HTML/CSS] table 구조 및 CSS 이용 간단한 형태 제작  (0) 2022.07.06
[HTML] 제목, 내용, 리스트, 이미지, 링크, 영역 및 요소/속성의 구분, entity code, live server  (0) 2022.07.06
'Front-End/HTML & CSS' Related Articles more