웹 개발의 기초 : HTML, CSS, JavaScript

 

웹페이지를 구성하는 기본 요소

• HTML
• CSS
• JavaScipt

 

 

HTML(HyperText Markup Language)

 

웹페이지의 구조를 정의하는 기본적인 요소

태그(tag)를 사용하여 텍스트, 이미지, 링크 등의 콘텐츠를 표현함

 

 

HTML 태그 기본 구조

 

HTML 태그

 

여는 태그와 닫는 태그로 구성

여는 태그와 닫는 태그 사이에 콘텐츠를 배치

<div>div 태그</div>
<h1>h1 태그</h1>
<p>p 태그</p>
<div>
    <div>태그 안에 태그를 추가할 수 있음</div>
</div>

*태그(tag) == 엘리먼트(element) == 요소

 

HTML 태그

W3Schools.com

 

 

부모 태그와 자식 태그

 

HTML에서는 태그가 서로 포함될 수 있으며, 부모 태그와 자식 태그라고 부름

<div> <!-- 부모 태그 -->
    <div>부모 태그 안에 작성된 다른 태그들은 모두 자식 태그</div> <!-- 자식 태그 -->
</div>

 

CSS(Cascading Style Sheets)

 

HTML의 디자인과 스타일을 담당

특정 태그를 선택하여 원하는 스타일을 적용할 수 있음


CSS 선택자

 

'id' 선택자
'id'는 문서 내에서 고유해야 함
→ 한 HTML 문서에서 같은 'id'를 가진 태그는 하나만 존재해야 함

/* id 선택자는 #을 사용 */
#idName {
    color: white; /* idName이라는 id를 가진 태그의 폰트 색상을 흰색으로 지정 */
}

'class' 선택자
여러 개의 태그에 같은 스타일을 적용할 때 class 선택자를 사용

/* class 선택자는 .을 사용 */
.className {
    width: 100px;
    height: 50px;
    background-image: url('./image.png');
    background-size: cover;
}

'태그' 선택자
HTML 태그 자체를 선택하여 스타일을 적용 가능

p {
    font-size: 10px; /* 모든 p 태그에 10px 크기의 글씨 적용 */
    color: white;
}

JavaScript

웹페이지를 동적으로 만들고, 사용자와 상호작용 할 수 있도록 하는 프로그래밍 언어

예: 사용자가 버튼을 클릭하면 팝업창이 나타나거나 입력한 데이터를 전송하는 기능 구현
 

*자바스크립트의 원래 이름은 'Mocha'였으며, 이후 'LiveScipt'로 변경되었다가, 당시 인기 있던 'Java'에서 영감을 받아 'JavaScipt'로 최종 명명

 

 

---

 

HTML, CSS, Javascript 개요

HTML CSS JavaScript