ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML, CSS, JS란?
      프로그래밍 기초 공부 2022. 10. 9. 15:15

      열네 번째로 포스팅 하게 될 내용은 HTML, CSS, JS에 관한 내용입니다.

       

      [ HTML이란? ]

      • HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어
      • 구조를 설계할 때 사용되는 언어로  hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있음
      • Web 페이지는 HTML 마크업 됨에 따라 외형이 형성됨
      • HTML은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있음
      • 인터넷문서는 Hyper Text의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만듬
      • 다양한 표현의 가능성과 쉬운 사용으로 W3를 짧은 시간에 대중시키는데 원동력
      • HTML 요소의 가장 보편적인 형태
        • 시작 태그(Start Tag)와 종료태그(End Tag)와 같은 태그 한 쌍
        • 태그들 내에서 특성을 부여하는 속성
        • 문자와 그래픽 정보인 콘텐츠

       

      하이퍼 텍스트 : 일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법

       

      [ 시멘틱 마크업 ]

      시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말함 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말함

      시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 함

      • 헤더/푸터에 <header>와 <footer> 사용
      • 메인 컨텐츠에 <main>과 <section> 사용
      • 독립적인 컨텐츠에 <article> 사용
      • 최상위 제목으로 <h1> 사용
      • 순서가 없는 목록으로 <ul>과 <li> 사용
      • 내비게이션에 <nav>사용

       

      검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리

      단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋음

       

       

      [ 문서 형식 선언( doctype) ]

      • HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 함
      • 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있음
      • doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것
      • DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시
      • 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않음
      • HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않음
      • HTML5에서 doctype 선언 <!doctype html>는 DTD를 참조하지 않음

      [ HTML 태그 ]

      • HTML의 기본 구조의 핵심은 태그
      • HTML문서의 모양, 행동양식을 정해주는 명령어 이름으로 <>속에 HTML태그 명령어의 이름을 작성하는 형태로 사용
      • 자신이 사용하고자 하는 기능을 가진 HTML 태그 명령어를 <>속에 작성하여 HTML문서 작성 가능
      • 태긔 사이에 포함되는 모든 것을 HTML요소

      태그의 기본적인 형태

      <head>
<title>제목</title>
</head>

<!-- HTML의 머리부분(<head>...</head>), 보통 제목은 <head>의 안에 포함 -->

       

       

      [ CSS란? ]

      HTML 마크업하고 CSS에서 레이아웃을 정돈한다

       

      • CSS는 Cascading Style Sheets 의 약어로 스타일 시트라고 함
      • 페이지의 레이아웃을 형성하기 위한 스타일시트라고 부름
      • HTML 마크업 됨에 따라 형성된 외형에 CSS를 더해서 외형을 예쁘게 바꿀 수 있음
      • ex) 글자 색상, 배경 색상, 배치 등

       

      [ CSS 기능 ]

      • 정보(HTML)와 디자인(CSS)를 분리하여 관리 할 수 있음
      • 정보를 수정하지 않고 디자인만 변경 가능
      • 태그마다 style 속성으로 주게 되면 소스코드가 지저분해짐
      • 분리하여 관리하게 되면 유지보수 및 가동성 좋아짐
      • 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도 가능

       

      [ css 적용 방법 ]

      1.  인라인 스타일(Inline style)
        • 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
        • 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있음
      2. 내부 스타일 시트(Internal style sheet)
        • 내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정
        • 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있음
      3. 외부 스타일 시트(External style sheet)
        • 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌
        • 스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함시켜야 함

       

      [ 스타일 적용의 우선순위 ]

      위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정

       

      1. 인라인 스타일
      2. 내부 / 외부 스타일 시트
      3. 웹 브라우저 기본 스타일

       

      예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용

      또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용

       

      [ css 선택자 ]

      • 전체 선택자
        • CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택
      • HTML요소 선택자
        • CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택
      • 아이디 선택자
        • 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
        • 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택
      • 클래스 선택자
        • 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용
        • 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택

       

      [ JS란? ]

      JS는 JavaScript의 약어로 Web 페이지에 움직임을 입혀줌

      WEB 페이지동작, WEB 어플리케이션 개발, 스마프톤 앱 개발, 게임 개발 등 다양하게 활용 가능

      HTML로 뼈대를 만들고 CSS로 디자인을 입힌 웹 문서에 움직임을 넣는 언어

      [ JS 특징 ]

      • 객체기반언어이며, HTML 문서 내에 내장되어 프로그래밍 요소를 추가할 수 있음
      • 모든 객체는 숨겨진 링크인 프로토타입을 가지고 있다음
      • 인터프리터 언어로서 클라이언트 웹 브라우저에서 실행
      • 컨텍스트를 만들고, 자신의 Scope : 클로저를 구현하여 실행
      • Node.js 프레임워크를 이용해 백엔드 개발에서도 사용 가능
      • 객체형 / 함수형 프로그래밍 모두 표현 가능

      ​

      [ JS 활용 범위 ]

      - 새로운 로드 없이, 클라이언트가 요청한 기능 동작을 구현할 수 있음

      - HTML 페이지에서 새로운 엘리먼트, 콘텐츠, (DOM) 의 추가와 삭제가 가능

      - CSS 파일을 이벤트에 따라 변경하여 HTML 페이지의 화면을 실시간으로 바꿀 수 있음

      - 웹 페이지 사용자들의 요청에 따른 (입력/클릭) 폼의 유효성 검증이 가능

      - 웹 브라우저 ( 크롬, 익스플로러) 제어와 브라우저의 쿠키를 설정가능

      - AJAX 방법론을 통한 서버 통신이 가능

       

      [ JS 장단점 ]

      • 장점
        • HTML 파일 내에서 작성하고 바로 작동시켜 볼 수 있기 때문에, 개발 속도가 빠름
        • 웹 브라우저에서 동작하기 때문에 운영체제의 제한을 받지 않으며, 여러 환경에서 개발이 가능
        • NodeJS 를 활용하면, 프론트엔드 & 백엔드 모두 개발 가능
      • 단점
        • 웹 브라우저 상에 소스 코드가 노출되어 있어, 공개가 되기 때문에 보안에 취약
        • 컴파일하지 않아도 되기 때문에, 복사하여 그대로 사용할 수 있음
        • 한정된 객체, 객체 함수를 제공하기 때문에 개발시에 오류에 대한 여러 사항을 고려할 필요가 있음

      '프로그래밍 기초 공부' 카테고리의 다른 글

      HeidiSQL(하이디 SQL)이란?  (0) 2022.10.10
      Servlet이란?  (0) 2022.10.10
      커넥션풀(DBCP)이란?  (0) 2022.10.06
      Spring이란?  (0) 2022.10.03
      Tomcat과 Nginx란?  (0) 2022.10.02

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바