HTML, CSS, JavaScript 기초

songha·2021년 4월 9일

studylog

목록 보기
2/5
  • 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)

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

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

HTML 기본 구조와 문법

  • HTML 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값) 으로 구성됩니다.
  1. class속성의 이름, editor-note 속성의 값
  2. <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>
  1. <!DOCTYPE html> doctype. 필수 서문입니다.
  2. <html></html> 전체 페이지의 모든 콘텐츠를 래핑하며 때로는 루트 요소라고도합니다.
  3. <head></head> 페이지 뷰어에게 표시하는 콘텐츠 가 아닌 HTML 페이지에 포함하려는 모든 항목에 대한 컨테이너 역할, 여기에는 검색 결과에 표시하려는 키워드 및 페이지 설명, 콘텐츠 스타일을 지정하는 CSS, 문자 집합 선언 등이 포함
  4. <meta charset="utf-8"> 문서에서 사용해야하는 문자 집합을 UTF-8로 설정
  5. <title></title> 페이지 제목을 설정
  6. <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 규칙
  1. Selctor : 스타일링 할 요소, 태그이름이나 id, 또는 클래스를 선택
  2. 선언 : 스타일을 지정할 요소의 속성 지정
  3. 속성 : 요소의 스타일 지정
  4. 속성 값 : 값을 작성한 다음 세미콜론을 적는 습관 들이자!
  • 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를 이용해 속성과 값으로 그 크기를 설정합니다.
  1. block 줄바꿈이 되는 박스
  2. inline 줄바꿈 안되고, 크기지정 안됨
  3. 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 계산법 기준
profile
songha
개발블로그 - https://www.notion.so/Songha-07e97c5aa2144621ae4f2b813e6d5fb7
이전 포스트

[JS] 기초 정리

다음 포스트

계산기 작동 원리 알기

0개의 댓글