HTML, CSS, JavaScript 기초

HTML은 웹 문서를 구조적으로 표현하기 위한 언어입니다.
CSS는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어입니다.
JavaScript는 원래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어
저장 후 새로고침 필수!

HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.

자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
ㄴ input type을 설정하여 다양한 종류의 input을 활용할 수 있다.

동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
ㄴ 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
ㄴ id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
ㄴ HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

HTML (Hyper Text Markup Language)

콘텐츠의 구조를 정의 하는 마크업 언어
일련의 요소 로 구성되며 콘텐츠의 여러 부분을 묶거나 감싸서 특정 방식으로 표시하거나 특정 방식으로 작동하는 데 사용

여는 태그 : 여는 꺾쇠 괄호 와 닫는 꺾쇠 괄호로 묶인 요소 (이 경우 p)의 이름으로 구성 됩니다 . 요소가 시작되거나 적용되기 시작하는 위치 (이 경우 단락이 시작되는 위치)를 나타냅니다.
닫는 태그 : 요소 이름 앞에 슬래시가 포함된다는 점을 제외하면 여는 태그와 동일합니다 . 요소가 끝나는 위치를 나타냅니다.이 경우 단락이 끝나는 위치입니다. 닫는 태그를 추가하지 않는 것은 표준 초보자 오류 중 하나이며 이상한 결과를 초래할 수 있습니다.
콘텐츠 : 요소의 콘텐츠이며이 경우에는 텍스트 일뿐입니다.
요소 : 여는 태그, 닫는 태그 및 콘텐츠가 함께 요소를 구성합니다.

HTML 기본 구조와 문법

HTML 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값) 으로 구성됩니다.

class속성의 이름, editor-note 속성의 값
<script> 엘리먼트가 자바스크립트 실행을 위해 사용됩니다.

문서 구조

코드로 살펴보기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

<!DOCTYPE html> doctype. 필수 서문입니다.
<html></html> 전체 페이지의 모든 콘텐츠를 래핑하며 때로는 루트 요소라고도합니다.
<head></head> 페이지 뷰어에게 표시하는 콘텐츠 가 아닌 HTML 페이지에 포함하려는 모든 항목에 대한 컨테이너 역할, 여기에는 검색 결과에 표시하려는 키워드 및 페이지 설명, 콘텐츠 스타일을 지정하는 CSS, 문자 집합 선언 등이 포함
<meta charset="utf-8"> 문서에서 사용해야하는 문자 집합을 UTF-8로 설정
<title></title> 페이지 제목을 설정
<body></body> 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등 모든 콘텐츠 포함

엘리먼트 (요소)

<h1> 제목, 최대 3~4 개만 사용
<p> paragraph(문단)의 약자로, 하나의 문단을 표현/ 단락
<a> anchor(닻)의 약자로, 다른 웹페이지로 연결되는 하이퍼링크를 HTML 문서에 표시, 주로 href 속성과 사용
<section> 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분
<ul> unordered list(목록)의 약자로, 순서가 없는 데이터를 표현
<ol> 순서가 있는 목록
ㄴ <li> 내에 들어감

✅ 체크 포인트

HTML은 웹 페이지의 틀을 만드는 언어
tag <> 들의 집합 -> 주요 태그들만 골라서 알아도 됨!
tag를 열고, 닫고
트리구조를 가짐 : 해드 -> 바디
<div> 는 태그는 한 줄 차지
<span> 는 컨텐츠 크기만큼 공간 차지
셀프 클로징 태그 - 이미지, 닫는 태그 없음 <img src= " ">
링크삽입 <a href = " " > 네이버 </a>
input 을 사용해서 입력 폼을 만들 수 있음
ㄴ textarea 는 텍스트 박스가 생기고 줄바꿈이 되는 입력폼
ㄴ 라디오 버튼은 한가지만 선택 하는 경우 > 선택 사항의 이름을 같게 해서 그룹화 시키기
ㄴ 체크박스는 중복 선택 하는 경우

CSS (Cascading Style Sheets)

CSS는 스타일 시트 언어, HTML 요소의 스타일을 선택적으로 지정

CSS 규칙

Selctor : 스타일링 할 요소, 태그이름이나 id, 또는 클래스를 선택

선언 : 스타일을 지정할 요소의 속성 지정

속성 : 요소의 스타일 지정

속성 값 : 값을 작성한 다음 세미콜론을 적는 습관 들이자!

CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
ㄴ 여러 요소를 선택하고 모든 요소에 단일 규칙 세트를 적용 할 수도 있다. 셀렉터는 쉼표로 구분
id 및 class와 관련된 selector 규칙을 이해할 수 있다.
CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
ㄴ 각 단위가 적합한 경우를 구분할 수 있다.
CSS 박스 모델을 이해할 수 있다
ㄴ box model
- width, height
- margin, padding, border
박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있습니다. (검색어: free app icon)

id로 이름 붙여서 스타일링 적용하기

<h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결
이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록
id가 있는 요소를 선택할 때에는 # 기호를 이용
id는 하나의 문서에서 한 요소에만 사용

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

class로 스타일을 분류하여 적용하기

특정 요소에 class를 지정
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class 사용
class는 #이 아닌 . 을 이용해 선택

<!-- 바른 예제 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}

여러 개의 class를 하나의 엘리먼트에 적용

<li> 요소에 적용된 여러 class 중에서 selected class를 통해 적용

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

텍스트 꾸미기

color 색상

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

font-family 글꼴, 글꼴의 이름은 따옴표를 붙여서 적용

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

font-size 크기

.title {
  font-size: 24px;
}

글꼴의 크기에서는 단위
ㄴ 절대 단위: px, pt 등
ㄴ 상대 단위: %, em, rem, ch, vw, vh 등
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
가로로 정렬할 경우 text-align을 사용합니다.
ㄴ 유효한 값으로는 left, right, center, justify(양쪽 정렬)

박스모델

박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가집니다.
CSS를 이용해 속성과 값으로 그 크기를 설정합니다.

block 줄바꿈이 되는 박스
inline 줄바꿈 안되고, 크기지정 안됨
inline-block 옆으로 붙는 박스 줄바꿈 없음

<h1>, <p> 줄바꿈이 되는 태그 -> block 박스
<span> 줄바꿈이 되지 않는 태그 -> inline 박스
개발자도구의 Elements 탭에서 이 내용을 확인 가능

구성요소

padding border를 기준으로 박스 내부의 여백을 지정

p {
  padding: 10px 20px 30px 40px;
}

border 테두리
- 테두리 두께(border-width)
- 테두리 스타일(border-style)
- 테두리 색상(border-color)
  ㄴ border-style 더 찾아보기

p {
  border: 1px solid red;
}

margin 바깥 여백
- top, right, bottom, left로 시계방향
- 값을 두개만 넣으면 top과 bottom
- 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
- 바깥 여백에는 음수값을 지정할 수 있음

  p {
  margin: 10px 20px 30px 40px;
}

p {
  margin-top: -2rem;
}

박스를 벗어나는 컨텐츠 처리 - 박스 내 스크롤 생성

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다.
overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정

박스 크기 측정 기준

border-box 여백과 테두리 두께를 포함한 박스 계산 법
ㄴ 모든 요소를 선택*해 box-sizing 속성을 추가하고, border-box 라는 값을 추가

 * {
  box-sizing: border-box;
}

레이아웃과 관련된 이야기를 할 때에는 border-box 계산법 기준

Author And Source

이 문제에 관하여(HTML, CSS, JavaScript 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dddtttt000/Visual-Studio-Code-따라하기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML, CSS, JavaScript 기초

HTML (Hyper Text Markup Language)

HTML 기본 구조와 문법

문서 구조

엘리먼트 (요소)

✅ 체크 포인트

CSS (Cascading Style Sheets)

id로 이름 붙여서 스타일링 적용하기

class로 스타일을 분류하여 적용하기

여러 개의 class를 하나의 엘리먼트에 적용

텍스트 꾸미기

박스모델

구성요소

박스를 벗어나는 컨텐츠 처리 - 박스 내 스크롤 생성

박스 크기 측정 기준

Author And Source

좋은 웹페이지 즐겨찾기