SEB Section 1 Web Markup
1. HTML, CSS, JS
HTML
-
HTML는 웹의 기본 구조를 만들어 주는 Mark up 언어 이다.
- ’<>’ 형식으로 이루어진 tag 들의 집합
- Tree 구조로 되어 있어서, 부모 노드, 자식 노드 간의 구조로 구성 되어있다.
Tag들 정보
- Tag들 중에는 두 분류로 'Inline tag'와 'Block tag'로 나누어 진다.
- 화면 출력 성질이 다르기 때문에 나누어서 살펴 보겠다.
1. Inline Tag
- 자신의 내용과 앞 뒤 Tag의 내용을 같은 라인에 출력하는 태그.
- 구성요소 역할을 한다.
- 내용물의 크기가 Tag의 영역이 된다.
ex) <span>, <button>, <em>, <img>, <input>, <label>, <textarea> 등등 이 있다.
2. Block Tag
- 자신의 내용과 앞 뒤 태그의 내용을 다른 라인에 출력하는 태그.
- 자신의 내용만으로 한 라인을 독점해서 출력하는 태그.
- 영역(구조)를 만들 때 사용.
- 내용물의 크기와 상관 없이 너비는 항상 100%, 높이는 내용물 크기에 맞춰 변화.
ex) <div>, <audio>, <form>, <footer>, <h1 ~ h6>, <header>, <hr>, <ol>, <p>
<section>, <table>, <ul> 등등 있다.
CSS
- CSS는 디자인 요소를 시각화 하는 Style Sheets 언어 이다.
- 콘텐츠의 배열과 위치 등을 정한다.
-
아무리 좋은 기능을 가지고 있는 프로그램이라도, UI(User Interface)를 갖추지 못한다면 그것은 잘못된 프로그램이다.
- CSS 모범사례
자세히
- html 파일에 css를 입히고 싶으면 <link rel="", href="css 파일 이름"> 으로 할 수 있다.
- 콘텐츠의 섹션을 나누는 태그들에게 css를 입힐 수 있다. ex) <body>, <head>, <main>
- 태그에 지정한 id와 class를 통해 css를 입힐 수 있다.
⭐️ Id 와 class의 차이
- Id
* 한 문서에 단 하나의 요소에만 사용한다.
* 특정 요소에 이름을 붙이는데 사용한다.
* 특정 id에 css를 입힐때, '#id이름' 을 사용한다.
- Class
* 동일한 값을 갖는 요소가 많다.
* 스타일의 분류에 사용한다.
* 특정 class에 css를 입힐때, '.class이름' 을 사용한다.
JS
- JavaScript는 단순한 웹 페이지를 프로그램으로 만들어 유저와 상호작용을 할 수 있게 해주는 프로그래밍 언어이다.
강아지 집으로 비유 하자면?
- 강아지 집의 구조 도면 = HTML
- 강아지 집의 벽면의 색과 재질의 정보를 적어둔 것 = CSS
- 강아지 집의 RGB 전등이 켜지게 하는 알고리즘 = JS
댓글남기기