본문 바로가기

WEB37

[JS] 자바스크립트 기본 문법 표현식 : 값을 만들어 내는 간단한 코드 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위 문장 마지막에 세미콜론 붙이기 ; 키워드 : 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어 식별자 : 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어 변수 : 값을 지정할 때 사용하는 식별자 함수 : 코드 집합으로, 자바스크립트 함수는 변수의 일종 객체 : 값을 묶어 저장하는 자료형 속성 : 객체에 소속된 변수 메서드 : 객체에 소속된 함수 주석 : 프로그램 진행에 전혀 영향을 주지 않는 코드 bool 불 : 참과 거짓을 표현할 때 사용하는 자료 비교 연산자 : 두 대상을 비교할 수 있는 연산자 if 조건문 : 조건이 true 이면 문장을 실행하고 false 이면 문장을 .. 2022. 2. 11.
[CSS] CSS 레이아웃 1. CSS 포지셔닝과 주요 속성들 box-sizing 속성 - 박스 너비 기준 정하기 box-sizing : content-box | border-box 속성 값 설명 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용, 기본 값 border-box width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 float 속성 - 왼쪽이나 오른쪽으로 배치하기 웹 요소를 문서 위에 떠 있게 만든다. float : left | right | none 속성 값 설명 left 해당 요소를 문서의 왼쪽으로 배치 right 해당 요소를 문서의 오른쪽으로 배치 none 좌우 어느 쪽으로도 배치하지 않음 clear 속성 - float 속성 해제하기 float 속성을 이용.. 2022. 1. 27.
[CSS] CSS 박스 모델 1. CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. 인라인 레벨(inline-level) 요소는 줄을 차지하지 않는 요소이다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다. 종류 해당 태그 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , width, height 속성 - 콘텐츠 영역의.. 2022. 1. 27.
[CSS] 색상과 배경을 위한 스타일 1. 웹에서 색상 표현하기 rgb와 rgba 표기법 rgb(red 값, green 값, blue 값); rgba(red 값, green 값, blue 값, alpha 값); hsl과 hsla 표기법 hsl(, , ); hsla(, , , ) 색상 이름 표기법 모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe-color)라고 한다. 16가지 기본 색상인 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow 를 포함해 216가지가 있다. 2. 배경 색과 배경 이미지 background-color 속성 - 배경 색 지정하기 background-col.. 2022. 1. 27.
[CSS] 텍스트 관련 스타일 1. 글꼴 관련 스타일 font-family 속성 - 글꼴 지정하기 font-famliy:[ , , ] font-size 속성 - 글자 크기 조절하기 font-size: | | | 속성 값 설명 브라우저에서 지정한 글자 크기 xx-samll | x-small | small | medium | large | x-large | xx-large 부모 요소의 글자 크기(font-size)를 기준으로 더 크게 표시하거나 더 작게 표시, 사용할 수 있는 값 larger | smaller 브라우저와 상관없이 글자 크기를 직접 지정 부모 요소의 글자 크기를 기준으로 해당하는 %를 계싼해 표시 단위 설명 em 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절 ex x-height(엑스 하이트). 해당 글꼴의 소문자 .. 2022. 1. 20.
[CSS] font-family 속성 - 구글 웹 폰트 사용하기 웹 문서에서 사용하는 글꼴은 font-family 속성으로 지정한다. 기본형 font-family:[ , , ] p {font-family:굴림;} body {font-family:"맑은 고딕", 돋움, 굴림} "맑은 고딕" 글꼴이 없을 경우에 대비해 쉼표( , )로 구분하여 두 번째, 세 번째 글꼴 지정 웹 폰트 사용하기 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식이다. 구글 웹 폰트 사용하기 웹 사이트에서 많이 사용하는 한글 글꼴인 '나눔고딕'을 예로 실습해보자. 1. https://fonts.google.com/ 에 접속하여 구글에서 제공하는 웹 폰트를 사용한다. 2. Naum Gothic 글꼴을.. 2022. 1. 20.