웹프로그래밍 첫걸음
7장. CSS 스타일시트 이해하기
7.1 CSS 시작하기
7.1.1 스타일 시크와 CSS 기본 개념
- CSS(Cascading Style Sheet)의 특징
-웹 컨소시엄에서 웹 문서용으로 개발한 스타일시트 언어
-CSS3는 화려하고 동적인 스타일 작성 가능
-CSS3는 모듈 기반으로 디바이스에 따라 필요한 부분만 업데이트 가능
7.1.2 CSS 스타일 속성 선언
- CSS 기본 문법
-선택자와 속성 선언으로 설정
-다중 선택자는 ,(콤마) 로 구분
-{}(중괄호) 안에 나열, 속성과 속성값은 :(콜론)으로, 스타일 규칙은 ;(세미콜론)으로 구분
p,h3 {color:red; font-style:italic'}
7.1.3 HTML 문서에서 스타일시트 선언
- 내부 스타일시트 선언
<head>
<style type="text/css">
CSS 스타일 선언
</style>
</head>
- 외부 스타일시트 연결
<head>
<link rel="stylesheet" type="text/css" href="CSS 파일 이름">
</head>
- 인라인 스타일시트 삽입
<태그명 style="CSS 속성 선언">
7.2 CSS 스타일시트 지정하기
7.2.1 CSS 선택자의 종류
- 전체 선택자 (*)
- 태그 선택자
- 다중태그는 ,(콤마)로 구분 & 다중속성은 ;(세미콜론)으로 구분
- 다중속성은 ,(콤마)로 나열. 순서대로 가능한 속성값 적용
- 선택자 조합 : 태그 요소 사이 공백으로 표현
h3 strong {font-style: italic;} /*h3에 속하는 strong 요소 */
p strong {color: red;} /* p에 속하는 strong 요소 */
- 아이디 선택자 (#)
- id 속성: HTML 문서에 하나의 요소를 참조하기 위한 속성(고유한 속성)
- id 속성은 html 문서 내 한 곳에서만 지정 가능
ㄴ <태그면 id=”아이디 이름”>…..</태그>
- 클래스 선택자 (.)
- class 속성: HTML 문서에 여러 개의 요소를 참조하기 위한 속성
- 태그의 종류에 상관없이 class 속성은 문서 안에서 여러 번 반복 적용 가능
7.2.2 문서 일부분에 CSS 속성 선언
- 블록단위 요소 (block-level element) : <div>
-콘텐츠의 영역 또는 그룹화, 글자를 포함하고 있는 블록 공간
- 인라인 요소 (inline element) : <span>
-다른 텍스트와 구별, 글자가 있는 글자 영역
7.3 문자와 색상 지정하기
7.3.1 폰트의 지정
- 폰트 관련 CSS 속성
font-family: 폰트체
font-size: <길이값> 또는 <백분율> 또는 x-small, small, medium, large,..
font-weight: <길이값> 또는 normal, bold, bolder, lighter
font-style: normal, italic(기울임), oblique(경사체)
font-variant: normal, small-caps
*
<길이값>: cm, mm, in, pc(파이카), pt(포인트), em, ex, px(픽셀
<백분율>: %
7.3.2 문자의 조정
- 문자 관련 CSS 속성
text-align: left, right, center, justify // 문장의 정렬
text-indent: <길이값> // 들여쓰기/내어쓰기 지정
text-decoration: none, underline, overline, line-through, blink // 선으로 텍스트를 꾸미는 속성
text-transform: capitalize, uppercase, lowercase // 첫 번쨰 글자 또는 모든 글자를 대/소문자로 변경
text-shadow: <h-offser> <v-offer> <blur-size> <color> // 그림자 효과
letter-spacing: <길이값> // 글자 간격
word-spacing: <길이값> // 단어 간격
vertical-align: baseline, sub, super, text-top, text-bottom, ... // 세로 정렬 방식 설정
line-height: <길이값> // 줄 높이
7.3.3 색상 및 배경의 지정
- 색상 및 색상 값의 표현
-RGB(Red, Green, Blue) 색상 값으로 표현
ㄴ 16진수 표현: #RRGGBB
ㄴ 10진수 표현: rgb(R, G, B)
ㄴ 백분율 표현: rgb(R%, B%, G%)
- 배경 관련 속성
background-color: RGB 색상 값
background-image: url('이미지 파일경로')
background-repeat: repeat, no-repeat, ... // 배경 이미지 반복
background-attachment: scroll, fixed // 화면 스크롤에 따른 이미지 고정 여부
background-position // 배경 이미지의 특정 위치 이동
8장. CSS 스타일시트 활용하기
8.1 목록과 표 장식하기
8.1.1 목록의 스타일 설정
- 목록의 글머리 기호 설정: list-style-type 속성
-순서 없는 목록 (unordered list): disc●, circle○, square■
-순서 있는 목록(ordered list): decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
- 목록의 이미지 글머리 기호 설정
list-style-image: url(”이미지 파일주소”)
- 글머리 기호의 위치 지정: list-style-position 속성 (inside, outside(기본값))
8.1.2 표의 스타일 설정
- 표 또는 셀의 폭 지정
-width 속성: 표나 각 셀의 가로 길이 지정
-table-layout 속성: auto(기본값), fixed
- 셀의 테두리(border) 모양 지정
-border-spacing 속성: 셀들간의 간격(테두리 간격)
-border-collapse 속성 (셀의 테두리 분리): collapse, separate(기본값)
-empty-cells 속성 (빈 셀의 테두리): show(기본값), hide
- 캡션의 위치 지정
-caption-side 속성: top(기본값), bottom
8.2 박스모델 설정
8.2.1 영역설정을 위한 박스모델
- HTML 요소의 배경 영역 설정
-<h3>, <p>, <div>: 해당하는 줄만큼 영역 차지
ㄴ 요소의 좌우에 다른 요소가 배치 불가
-<strong>, <span>: 줄을 차지 X, 해당하는 **글자(콘텐츠)**만큼 영역 차지
ㄴ 한 줄에 여러 개의 요소 배치 가능
-<table>, <img>: 자신의 영역이 미리 결정
- 박스 공간의 구성
-HTML의 모든 요소들은 네모 박스 모양의 공간을 차지
-요소가 차지하는 공간 개념⇒ 박스모델(box model)
-내부여백(padding), 테두리(border), 외부공백(margin) 지정 가능
8.2.2 박스모델 유형의 지정
- 박스 공간의 콘텐츠 영역 크기 지정
width: <크기> | <백분율> | auto
height: <크기> | <백분율> | auto
*
<크기>: 고정된 px 또는 cm (고정)
<백분율>: 부모 요소 기준 백분율 (가변)
auto: 콘텐츠 양에 따라 자동으로 결정
- 박스 공간 내/외부 여백 크기 지정
-마진(margin): 현재 콘텐츠의 외부 여백
ㄴ 콘텐츠와 콘텐츠 사이의 간격 조절 가능, 크기 또는 백분율로 값 지정
ㄴ 속성: margin, margin-top, margin-right, margin-bottom, margin-left
-패딩(padding): 콘텐츠 영역과 테두리 사이의 여백
ㄴ 속성: padding, padding-top, padding-right, padding-bottom, padding-left
- 박스 공간의 콘텐츠 영역의 테두리 지정
-텍스트 단락, 그림, 표, 양식 등 사각 형태를 가진 어떤 요소에나 적용
테두리/경계선의 두께: border-width: thin | medium | thick | 길이값
테두리의 스타일: border-style: solid | dotted | dashed ...
테두리의 색상: border-color
border-radius 속성: 사각형의 모서리의 둥근 정도를 달리 지정
ㄴ각 모서리 별로 따로 지정 가능
(border-top-left-radius border-top-right-radius
border-bottom-left-radius border-bottom-right-radius)
- 박스 모델의 화면 배치 방법: display 속성
-display 속성으로 화면 배치 방법 결정
문서의 레이아웃 만들 때: none, contents, block, inline, inline-block
그 외: table, table-cell, list-item 등
-display 속성은 배경 영역 설정 요소(div, span 등)의 성격을 변경 시키기도 함
8.3 레이아웃 설정하기
8.3.1 콘텐츠의 위치 지정 방법
- 콘텐츠의 위치 및 크기 지정
-브라우저 창의 왼쪽 모서리 기준
-top, right, bottom, left 속성의 값으로 표현
- 위치 값의 유형 지정: position 속성
○ static(기본값): 문서의 흐름에 맞추어 요소를 나열한 순서대로 배치
-top, right, bottom, left 속성 사용 불가
-float 속성을 사용할 경우 좌우 배치 가능
○ relative: 직전 요소에 이어서 배치
-top, right, bottom, left 속성 사용 가능하며, 좌표값 사용하여 위치 지정 가능
○ absolute: 문서(상위 요소) 내에서 원하는 위치에 배치
-기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
○ fixed: 현재 브라우저 화면 내에서 절대위치
-absolute 속성과 비슷하지만, 기준 요소가 브라우저 창의 왼쪽 위 꼭지점을 원점으로 좌표 계산
-브라우저 창을 스크롤하더라도 계속 고정되어 표시
- 콘텐츠의 앞 뒤 순서 지정: z-index 속성
-여러 개의 콘테츠를 겹쳐서 배치할 때 앞뒤 순서를 결정
*z축 상의 좌표는 아니고 순서만을 지정: 큰 수가 앞쪽
8.3.2 콘텐츠 간 배치 방법
<콘텐츠 간의 중복 배치 및 분리 배치>
-투명도와 가시성을 지정하여 주변 콘텐즈와 중복 뱇
*position 속성값과 함께 사용하여 콘텐츠 안과 밖으로 배치가 가능
-플로팅 박스 지정을 통한 주변 콘텐츠와 분리 배치
- 주변 콘텐츠와 중복 배치
-투명도: opacity 속성
*0.0일 때 투명(fully transparent), 1.0일 때 불투명(fully opaque)
-가시성: visibility
*visible(기본값), hidden, collapse(표에서 열이나 행)
- 플로팅 방스 지정을 통한 분리 배치: float 속성
-특정 콘텐츠를 주변 콘텐츠와 별도로 분리하여 배치할 때
-float 속성은 플로팅 박스와 주변 콘텐츠와 배치 방법을 지정 (left, right, none)
-clear 속성을 이용하여 float 속성이 더 이상 유용하지 않음을 알려야 함.
*float 속성을 사용하여 콘텐츠를 배치 후, 그 다음에 넣는 콘텐츠에도 자동으로 float 속성이 적용됨
9장. 자바스크립트 시작하기
9.1 자바스크립트 개요와 특징
9.1.1 자바스크립트 개요 및 특징
-동적인 웹 문서, 웹 응용프로그램을 위한 사용자 인터페이스 개발
-C/C++이나 자바 언어 등에 비해서 작성 및 실행이 매우 간편함
-스크립트 언어로 배우기 쉬움
-인터프리터(interpreter) 방식으로 결과 확인이 쉬움
-객체 기반 프로그래밍 언어
9.1.2 자바스크립트 사용 목적
- 동적 웹 문서 구현이 가능
-웹 문서가 브라우저에 처음 표시된 후에 콘텐츠나 스타일 변경
-즉, 변경된 값을 바탕으로 화면의 문서를 바로 갱신
-웹 문서의 콘텐츠나 스타일을 자바스크립트를 이용해 변경
-동적 웹 문서 구현 방식 (콘텐츠 변경 / CSS 스타일 변경)
- 웹 응용 프로그램 개발이 가능
-자바스크립트는 클라이언트측 브라우저에 의해 실행
-알림창이나 팝업창을 제공하거나 마우스 및 키보드에 따른 다양한 명령을 처리하는 프로그램 개발
9.2 자바스크립트 기본 작성하기
9.2.1 자바스크립트 작성하기
- <script>요소
- 자바스크립트 문장
-세미콜론(;)으로 종결
- 자바스크립트 문장 작성법
-<head>태그 영역, <body>태그 영역 안에 작성 가능
-대소문자 반드시 구분
-문자열 표시는 따옴표 사용
-작은따옴표나 큰따옴표를 중첩해 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 닫아야 함
- 자바스크립트 문장 출력하기
-document.write();
- 자바스크립트 주석
-//: 한 줄 주석
-/* */: 여러 줄 주석
9.2.2 외부참조 방식으로 삽입하기
- 외부 파일 참조 방식으로 삽입
<script type="text/javascript" src="myscript.js"></script>
- 외부 자바스크립트 파일(확장자: *.js)
9.3 변수와 계산하기
9.3.1 자바스크립트 변수
- 변수
-어떤 값을 저장해 놓은 공간으로 임의의 값에 이름을 지어 사용
-변수 선언 시, var로 선언
- 변수 이름 규칙
-영문자(대소문자 구분), 숫자, _(underbar), $(달러)만 허용
-자바스크립트에서 사용하는 예약어(키워드) 사용X
-숫자로 시작하면 X
-공백 문자를 포함 X
9.3.2 사칙연산 계산하기
- 자동 형변환
자바스크립트는 내부적으로 자동으로 형 변환이 일어난다!
- 자료형을 확인하고 싶을 때: typeof() 연산자
- 내장함수
대화상자 만들기: alert(), prompt(), confirm()
문자열을 자바스크립트 문장으로 변환하여 수식 계산하기: eval()
문자열에서 정수형으로 변환: parseInt()
문자열에서 실수형으로 변환: parseFloat()
9.4 대화상자 만들기
9.4.1 alert() 함수 사용
: 대화상자로 화면에 경고 메세지 출력하기
9.4.2 confirm() 함수 사용
: 대화상자로 사용자로부터 확인(OK)과 취소(Cancel) 입력받기
9.4.3 prompt() 함수 사용
: 대화상자로 키보드를 통해 사용자로부터 문자열 입력 받기
10장. 자바스크립트 활용하기
10.1 함수 만들기
10.1.1 사칙연산 함수 만들기
- 함수
-특정 작업을 수행하도록 정의한 명령문의 집합
-함수를 사용하면 자바스크립트 코드를 재사용할 수 있어 편리함
-즉, 반복적으로 실행되는 명령들을 미리 정의해놓고
필요할 때마다 호출해서 사용하여 유지보수가 쉬움
-내장함수, 사용자 정의 함수가 있음
- 함수 정의하기
//함수 선언
function 함수명(매개변수들) { //매개변수=함수 안에서 사용되는 변수.
// 없을 수도, 무수히 많을 수도 o
//함수 명령문
}
-함수는 보통 <HEAD> 부분에 작성한다.
-매개변수는 괄호() 안에 넣는 변수로 함수 안에서 사용하는 변수이다.
-return 키워드는 함수의 종료를 뜻하며 함수를 수행하고 처리한 결과값을 반환할 때 사용한다.
(return은 있을 수도 있고 없을 수도 있다.)
10.1.2 사칙연산 함수 사용하기
- 함수의 호출
-함수 정의는 어떠한 기능에 대한 문장들을 작성해놓은 것임
-함수를 사용하려면 필요한 위치에서 호출해서 이용
-매개변수와 전달한 값의 개수가 같은지 검사하지 않는다
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 반응형 웹 기초: 상대 단위 em, rem (0) | 2023.12.24 |
|---|---|
| [스파르타 코딩클럽] 크리스마스 디데이 캘린더 만들기 (0) | 2023.12.24 |
| [자바스크립트의 시작] Javascript 함수 (0) | 2023.05.03 |
| 웹프로그래밍첫걸음 5장. 폼 활용하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 4장. 링크와 멀티미디어 표현하기 (0) | 2023.05.01 |