본문 바로가기
  • Welcome to Smart-i
  • I can do it!
  • Those who come, be rich.
코딩공부

HTML 확장 CSS, Javascript, html과 xhtml

by ~~~~~하이글로시~~~~~ 2020. 10. 3.

html 확장

CSS (Cascading Style Sheet)

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보일지에 대한 정의하는 언어이다.

 

 

HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.

HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다.

 - 인라인 스타일(Inline style)
 - 내부 스타일 시트(Internal style sheet)
 - 외부 스타일 시트(External style sheet)

인라인 스타일 (inline style)

인라인 CSS이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.

<p style="color:green; text-decoration:underline">이 글은 녹색이고 밑줄이 있습니다.</p>

내부 스타일 시트 (internal style sheet)

내부 CSS를 이용한 방법은 HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 지정한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

외부 스타일 시트 (external style sheet)

외부 CSS를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
스타일을 적용할 모든 웹 페이지의 <head> 태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 된다.

<link rel="stylesheet" href="/external_style_sheet.css">

CSS 적용의 우선순위

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

  1. 인라인 CSS (Inline CSS)
  2. 내부 / 외부 CSS
  3. 웹 브라우저 기본 스타일

예를 들어, 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.

이보다 자세한 내용은 CSS 선택자를 참조하길 바란다.

CSS 선택자 (selector)

스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같다.

 - HTML 요소 선택자

 - 아이디(id) 선택자

 - 클래스(class) 선택자

 

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 태그명을 명시하여 선택할 수 있다.

p { color: red; font-size: 14px; }

위 예제에서는 태그가 <p>인 모든 요소에 적용된다.

 

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상의 아이디가 지정된 요소를 선택할 때 사용한다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디에 해당하는 요소만을 선택해 준다.

이때 선택하려는 속성값 앞에 샵(#)를 추가해서 작성한다.

<style>
  #text { color: blue; font-weight: 600; }
</style>
...
<p id="text">이 문장은 파란색이고 두껍습니다.</p>

위 예제에서는 id가 text인 모든 요소에 적용된다.

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 동일한 아이디를 사용해도 별 문제없이 동작은 한다.
하지만, 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생할 수도 있다. 따라서, 되도록이면 하나의 웹 페이지에 속하는 모든 요소의 아이디를 다르게 하거나 클래스를 사용하는 것이 좋다.

 

클래스(class) 선택자

클래스 선택자는 어떠한 그룹의 여러 요소를 한 번에 선택할 때 사용한다.
이러한 어떠한 그룹을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.

이때 선택하려는 속성값 앞에 마침표(.)를 추가해서 작성한다.

<style>
  .text { color: lime; text-decoration: overline; }
</style>
...
<p class="text">이 문장은 파란색이고 두껍습니다.</p>
<p>이 문장은 스타일 스타일이 적용되지 않았습니다.</p>
<p class="texts">이 문장도 파란색이고 두껍습니다.</p>

 

JavaScript

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

script 요소

script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용한다.
script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 된다.

<script>
    document.getElementById("text").innerHTML = "이것이 자바스크립트다!";
</script>

JavaScript로 HTML 스타일도 변경할 수 있다.

document.getElementById("text").style.fontSize = "25px";
document.getElementById("text").style.color = "red";
document.getElementById("text").style.backgroundColor = "yellow";

noscript 요소

noscript 요소는 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정할 때 사용한다. noscript 요소는 일반적인 HTML 문서의 body 요소 내부에 나올 수 있는 모든 요소를 포함할 수 있다.

<script>
    document.getElementById("text").innerHTML = "이것이 자바스크립트다.";
</script>
...
<noscript>이 웹 브라우저는 자바스크립트를 지원하지 않습니다!</noscript>

외부 JavaScript

외부 JavaScript를 이용한 방법은 HTML과 JavaScript를 분리하여 관리할수 있게 해준다.
자바 스크립트를 적용할 모든 웹 페이지의 <head> 태그 내에 <script>태그를 사용하여 자바스크립트를 포함하면 된다.
최근에는 웹 페이지 로딩 문제로 body에 맨 아래에 넣는 경우도 있다.

<script type="text/javascript" src="/external_javascipt.js"></script>

 

 

HTML과 XHTML

XHTML은 HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다.

좀 더 엄격한 버전인 XHTML을 사용하는 이유

최근 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다.
따라서, 부정확한 HTML 문법을 지원하기에 필요한 자원이 부족한 환경이 점차 생겨나고 있다.
XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다.

XHTML에서의 변경사항

문서의 구조적 측면

 - XHTML DOCTYPE을 반드시 명시해야 한다.
 - <html> 태그의 xmlns 속성을 반드시 명시해야 한다.
 - <html>, <head>, <title>, <body>태그를 반드시 사용해야 한다.

 

문서의 요소적 측면

 - 모든 태그는 반드시 닫혀야 한다.
 - 모든 태그는 순서대로 닫혀야 한다.
 - 모든 요소는 반드시 소문자로 사용되어야 한다.
 - XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다.

 

문서의 속성적 측면

 - 속성 이름은 반드시 소문자로 사용되어야 한다.
 - 속성값은 반드시 따옴표로 감싸야 한다.
 - 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다.

 

HTML과 XHTML의 차이점

다음 예제들은 HTML과 XHTML의 차이점을 보여주고 있다.
XHTML에서 작성되지 말아야 할 오류이다.

 

- 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 한다. 

HTML  : <br>
XHTML : <br />

- 비어있지 않은 요소는 반드시 종료 태그를 가져야 한다. 

HTML  : <p>첫 번째 문장</p><p>두 번째 문장
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>

- 태그 요소들은 반드시 열린 순서대로 닫혀야 한다. 

HTML  : <em><strong>This is some text.</em></strong>
XHTML : <em><strong>This is some text.</strong></em>

- 이미지 태그에는 반드시 alt 속성이 기술되어야 한다. 

HTML  : <img src="TT_logo.png" />
XHTML : <img src="TT_logo.png" alt="티티" />

- 모든 텍스트(text)는 반드시 태그로 감싸야 한다. 

HTML  : <body>본문에 사용되는 텍스트 단락</body>
XHTML : <body><p>본문에 사용되는 텍스트 단락</p></body>

- 속성 값은 반드시 따옴표로 감싸야 한다. 

HTML  : <td rowspan=3>
XHTML : <td rowspan="3">

- 태그나 속성은 반드시 소문자만 사용해야 한다. 

HTML  : <BODY><P>태그과 속성은</P></BODY>
XHTML : <body><p>반드시, 소문자만을 사용해야 한다.</p></body>

- 속성값 생략이 되지 않아, 반드시 속성값을 명시해야 한다. 

HTML  : <textarea readonly>읽기만 가능합니다.</textarea>
XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>

위에서 살펴본 모든 HTML 예제는 XHTML 기준에는 맞지 않지만, HTML에서는 모두 정상적으로 동작한다.

 

 

 

HTML 문서를 XHTML 문서로 변환하는 방법

- 첫줄에 다음 코드를 추가한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/2018/xhtml">

- xmlns 속성을 추가한다.
- 모든 태그 이름을 소문자로 바꿔준다.
- 모든 빈 태그를 닫아준다.
- 모든 속성 이름을 소문자로 바꿔준다.
- 모든 속성값을 따옴표로 둘러쌓아 준다.

 

 

 

[디자인공부] - 한글폰트 만화진흥원체 무료 다운로드 및 설치

 

한글폰트 만화진흥원체 무료 다운로드 및 설치

만화진흥원체 (재)한국만화영상진흥원은 (주)윤디자인 그룹과 함께 저작권 분쟁 위험이 없는 자유로운 만화창작 환경을 만들고자 만화진흥원체(komacon체)를 개발하였다. 만화창작 및 상업적 사

smarti.tistory.com

[코딩공부] - CSS3 2D, 3D Transform

 

CSS3 2D, 3D Transform

2D Transform CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다. transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공한다.  - 해당 요소를 움직인다...

smarti.tistory.com

[세상살이] - 언택트 뜻

 

언택트 뜻

Untact 뜻 2017년 8월, 김난도 서울대 소비자학과 교수는 연구원들과 함께 매년 발간하는 저서 ‘트렌드 코리아’에 들어갈 내용을 정하기 위한 회의를 열고 있었다. 당시 새롭게 주목받은 기술은

smarti.tistory.com

[디자인공부] - 포토샵으로 청바지 천 효과 문자 만들기

 

포토샵으로 청바지 천 효과 문자 만들기

Adobe Photoshop으로 청바지 천 효과, 문자 만들기 800*600 픽셀의 새 문서를 만들기를 한다. 먼저 최종 레이어 창을 보자. 배경 레이어 만들기 전경색을 #83b7ca 로 설정하고 배경색을 #22576b로 설정 한 다

smarti.tistory.com

[코딩공부] - CSS 버튼 예제

 

CSS 버튼 예제

CSS 버튼 예제 예제보기 다운로드 예제1 .a_demo_one { background-color:#ba2323; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#ff..

smarti.tistory.com

 

저작자표시

'코딩공부' 카테고리의 다른 글

HTML5 그래픽 1  (0) 2020.10.05
HTML5 멀티미디어  (0) 2020.10.05
HTML5 기본정리 2  (0) 2020.10.03
HTML5 기본정리 1  (0) 2020.10.03
HTML select, textarea, button, fieldset, label  (0) 2020.10.03
HTML 입력폼(Forms), 타입(Type), 속성(Attributes)  (0) 2020.10.03
HTML 텍스트 요소  (0) 2020.09.30
HTML 기본요소3, list(리스트), table(테이블)  (0) 2020.09.30

관련글

 

댓글

티스토리툴바