HTML,CSS

HTML, CSS의 전반적인 개념

nickbegain 2021. 5. 7. 10:31

→ HTML : 웹페이지의 구조를 담당하는 마크업 언어 [구조]

→ CSS : 디자인 요소를 시각화 하는 스타일 시트 언어 [스타일]

*** Javascript : 단순한 웹페이지를 프로그래밍하여 유저와 상호작용 할 수 있게 해주는 프로그래밍 언어 [상호작용]

-----------------------------------------------------------------------------------------------------------------

→ ex) 강아지 집 건설 

1) 강아지집 구조 설계 -> HTML 2) 강아지집 벽면 색상,재질 -> CSS 3) 낮이면 꺼지고 밤이면 켜지는 전구 알고리즘 설정 -> Javascript 

 

1)HTML로 작성(구조)

<html>

<body>

<h1> title </h1>  → 제목

<div> logo </div> → 로고

<div> → 집 영역

<h2> house </h2> 

<div class=roof></div>  → 지붕 

<div class=wall></div>  → 벽

<div class=door></div>  → 문

<div class=light></div>  → 전구

</div>

</body>

</html>

 

2) CSS로 작성(스타일)

.wall {

background-image = url(twinkle.gif);

}

 

3) Javascript로 작성 (상호작용,프로그램 작성)

if(isNight === true) {

light.isOn();

}

else {

light.isOff();

}

-----------------------------------------------------------------------------------------------------------------

→ 실제 웹페이지 구현

1) 기획자가 HTML을 통해 웹페이지 구조를 작성(와이어프레임을 이용)

2) 디자이너가 CSS를 이용하여 웹 페이지 스타일 작성

3) 개발자가 Javascript를 이용하여 프로그램을 작성하여 기능 구현

 

- HTML

→ HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어입니다.

→ HTML은 웹 페이지를 구성하는 뼈대가 되는 언어

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

  • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
    • Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
  • 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
    • 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
    • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다
    •  

         → HTML : 문서의 구조, 내용을 다루고 있는 마크업 언어  /  웹페이지의 틀을 만드는 언어

→ HTML은 tag들의 집합  

→ Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소  /  tag가 열리고 닫임 < , />

/  열리고 닫히는 순서가 있다.(가장 내부 요소의 태그부터 닫힘)

→ tag는 tree structure의 특성을 가진다.  /  상위 요소가 있고 하위요소가 있어서 서로 부모,자식의 관계로 형성된다.

ex) HTML 문서시작 

html

head(title의 부모)

title(head의 자식)

body(h1, div의 부모)

h1(body의 자식)

div(body의 자식)

→ 대표적인 태그 

  1. <!DOCTYPE html> : html문서 최상단에 작성, 이 문서가 html 문서임을 명시
  2. <html> : html 시작 태그로 문서 전체의 틀의 구성
  3. <head> : head태그는 문서의 메타데이터(데이터를 설명하는 데이터)를 선언
  4. <title> : 문서의 제목, 브라우저 탭에 보여짐
  5. <body> : body태그는 문서의 내용을 담는 곳
  6. <h1> : heading을 의미하며 크기에 따라 h1~6까지 존재
  7. <div> : content division을 의미하며, 줄바꿈됨
  8. <span> : 줄바꿈없는 content 컨테이너

→ self colosing tag : 태그 내부에 내용이 없다면 <tag /> 형태로 표현이 가능

/  ex) <img src = “test-picture.jpg” />

→ 태그에는 속성에 따라 태그에 값을 적용할 수 있다.

→ 빠르게 작성하기 : ‘html:5’ 작성 후 enter

→ 자주사용하는 태그

  1. <div>  vs <span>

    -> div 태그는 1줄을 차지합니다  /  span태그는 컨텐츠 크기만큼 공간을 차지합니다.

  1. <img> : 이미지를 삽입하는 태그

    -> 닫는 태그가 없음  /  src속성을 이용하여 삽입할 이미지의 경로 지정

  1. <a> : 링크 삽입

     -> href 속성을 이용하여 링크할 사이트 주소를 작성한다.

     -> target 속성의 “_blank” 속성값을 이용하여 새탭에서 링크사이트가 나타나도록 설정 가능

  1. <ul>,<li> : 리스트 태그

    -> ul태그는 기호를 이용하여 리스트를 표시하며 ol태그는 숫자를 이용하여 리스트 표시

  1. <input> : 값을 입력하거나 출력하는 태그

    -> type속성을 이용하여 input에 어떠한 것을 입력하고 출력할지 결정한다.

    -> type속성값 : text , radio(그룹설정 가능) , checkbox, password등

    -> radio input태그에서 name속성의 속성값을 같게 입력하면 서로 그룹이   된다.

     (중복 입력 불가)

  1. <textarea> : 여러줄이 입력 가능한 텍스트 상자
  2. <button> : 버튼 생성

→ attribute name : 속성 이름  /  attribute value : 속성 값

 

----------------------------------------------------------------------------------------------------

 

-HTML은 웹 문서를 구조적으로 표현하기 위한 언어입니다.

  • CSS는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어입니다.
  • JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었습니다.
  • 웹 문서 표준을 서술하는 언어는 없고, HTML Living Standard 에서 상세한 웹 표준을 제시하고 있습니다. 여러 표준 중 가장 바람직한 표준이라고 볼 수 있습니다. 다만, 개발을 위하여 모든 내용을 숙지할 필요는 없고 MDN이 가장 신뢰성 있는 공식 문서로 참고하기 좋습니다.

----------------------------------------------------------------------------------------------------

 

<script> 엘리먼트가 자바스크립트 실행을 위해 사용됩니다. 아래와 같은 방식으로 주로 실행됩니다.

<script src="my-java-script.js"></script>

----------------------------------------------------------------------------------------------------

HTML <p> 엘리먼트는 paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용됩니다. HTML 문서 작성 시, 가능하면 이 엘리먼트의 본래 목적에 맞게 사용하는 것이 권장됩니다.  /  <p>도 줄바꿈이 된다.

HTML <section> 엘리먼트는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용됩니다. 이 엘리먼트는 HTML5 표준의 탄생과 함께 생겨난 시맨틱 엘리먼트의 일부입니다. 엘리먼트의 이름에 의미를 충분히 담고 있기 때문입니다.

<div> 엘리먼트는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있습니다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 "최악(as a last resort)"로는 사용해도 괜찮습니다.

----------------------------------------------------------------------------------------------------

HTML <ul> 엘리먼트는 unordered list(목록)의 약자로, 순서가 없는 데이터를 표현하는 경우에 적절합니다. 다음과 같이 사용될 수 있습니다.

<ul>

  <li>커피 마시기</li>

  <li>CSS 공부하기</li>

  <li>스쿼트 100개</li>

</ul>