웹 개발 기초와 지식 - css심화, JS, jQuery

CSS: 웹 페이지를 예쁘게 만드는 비법

 

CSS는 웹 페이지를 꾸미는 도구입니다. HTML이 웹 페이지의 뼈대라면, CSS는 그 위에 입히는 옷이라고 생각하면 됩니다.

 

주요 CSS 속성

 

1. 디스플레이(display) 속성: 요소들의 배치 방식

   - block: 한 줄을 다 차지 (예: `<div>`, `<h1>`, `<p>`)

   - inline: 자기 크기만큼만 차지 (예: `<span>`, `<a>`, `<img>`)

   

   div의 display를 inline으로 바꾸면 텍스트 크기에 맞는 상자를 만들 수 있습니다.

 

2. 포지션(position) 속성: 요소의 위치 지정

   - static: 기본값, 특별한 위치 지정 없음

   - relative: 원래 위치 기준으로 이동

   - fixed: 화면에 고정 (스크롤해도 그 자리에!)

   - absolute: 가장 가까운 위치 지정된 부모 요소 기준으로 이동

 

   비유: relative는 부모, absolute는 자식 같습니다. 자식은 부모를 따라 움직입니다.

 

3. float 속성: 요소를 떠다니게 합니다. 레이아웃 만들 때 많이 사용합니다.

 

CSS 선택자

 

- 전체 선택자(*): 모든 요소에 적용

- 요소 선택자(h1, p): 특정 HTML 태그에 적용

- ID 선택자(#id): 특정 ID를 가진 요소에 적용

- 클래스 선택자(.class): 특정 클래스를 가진 모든 요소에 적용

- 그룹 선택자(h1, h2, p): 여러 요소에 같은 스타일 적용

- 자손 선택자(div p): 특정 요소 안의 모든 하위 요소 선택

- 자식 선택자(div > p): 특정 요소의 직계 자식만 선택

 

   ID는 한 요소에만, 클래스는 여러 요소에 사용할 수 있습니다.

 

JavaScript와 jQuery: 웹 페이지에 생명을 불어넣기

 

JavaScript는 정적인 웹 페이지를 동적으로 만드는 프로그래밍 언어입니다.

 

JavaScript 기본

 

- HTML 문서 안에 `<script>` 태그로 작성합니다.

- 주로 body 태그 맨 아래에 놓습니다. (페이지 로딩 속도 때문!)

 

document.getElementById('one').innerHTML = "개발부트캠프";

document.getElementById('one').style.backgroundColor = "red";

 

jQuery

 

jQuery는 JavaScript 라이브러리로, 복잡한 작업을 간단하게 만들어줍니다.

 

- CDN으로 쉽게 추가할 수 있습니다:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

 

 

jQuery 예시:

 

$(document).ready(() => {

  $("#one").html("개발부트캠프");

  $("#one").css("backgroundColor", "red");

});

 

 

이벤트 처리

jQuery로 클릭 이벤트 처리하기:

$("#btn").on("click", 실행함수);

 

이렇게 하면 버튼 클릭 시 원하는 동작을 실행할 수 있습니다.

 

 

CSS와 JavaScript/jQuery를 마스터하면 멋진 웹 페이지를 만들 수 있습니다.

무료로 제공되는 다양한 CSS 템플릿과 jQuery 플러그인을 활용하게되면 빠르게 멋진 웹사이트를 만들 수 있습니다.