Web Design

Hyper Text Markup Language의 줄임말로 하이퍼텍스트(하이퍼 링크)를 통해 웹페이지의 구조를 표시하는 언어입니다.

제목을 나타내는 태그로 h1~h6까지 있음.h1이 가장 크고, 숫자가 높아질수록 글자크기는 점점 작아짐.기본적으로 제목에 대한 강조를 표시하기 위해 글자가 굵게 표현됨.h1은 보통 로고 자리로, html문서 1개당 한 번만 출력할 수 있다.단락을 나타내는 태그로, 긴

inline속성을 가지고 있는 태그들은 여러개 출력시 가로로 출력되며, 출력된 결과물 사이에 공백이 1칸씩 생긴다.줄의 속성이 있어서 넓이 높이를 가질 수 없다. block속성과는 다르게, 내용이 포함된 부분까지만 영역을 가진다.두 태그 모두 글자를 굵게 강조하는 태그

a태그는 앵커(anchor)의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그.반드시 href 속성을 이용해 연결하고자 하는 사이트의 주소나 페이지의 주소를 연결해줘야 함.======================< 기본형 >=============

html 구조에 디자인을 입히는 언어. Cascading Style Sheets의 약자로 위에서 아래로 흐르는 디자인 시트 언어라는 의미.웹 문서에서 글꼴이나 색상, 정렬, 요소의 배치 등등 겉모습을 결정짓는 디자인 언어.css의 가장 큰 특징은 위에서 아래로 속성을

CSS스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 이러한 것들을 초기화해서 브라우저마다 스타일의 차이를 줄이고자 사용한다.브라우저 간의 차이를 최대한 없애서 크로스브라우징 (Cross-browsing-작성한 웹 페이지가 다양한 브라우저에서 동일하게 보

▶ 구글 웹폰트 사이트 접속하기원하는 폰트를 찾아서 장바구에 넣는다.장바구니에서 폰트를 확인하고 < > Get embed code 버튼을 클릭!Embed code 복사CSS파일에 Import하기웹폰트들을 인포트 하는 작업.CSS파일에서 선택자에 속성 주는 예시

font-family 글꼴을 지정한다. 폰트의 이름에 공백이 있을 경우 "폰트 이름"의 형식으로 작성 (폰트 이름이 그대로 적어야 함!!) font-size -글자 크기

block 속성, 화면낭독기에서 인식 Xdiv tag는 웹페이지에서 레이아웃을 만들때 주로 사용하는 태그이다.block속성의 대표적인 테그로 너비높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.block속성에 너비 높이와 여백을 주고싶을 때에는 css box m

테두리 관련 css속성은 사각 형태를 가진 모든 요소에 다양하게 적용할 수 있다.테두리 두께(border-width), 테두리 스타일(border-style),테두리 색상(border-color)를 테두리 속성이라고 한다.박스의 모서리 부분을 둥글게 만들어주는 속성.b

css box model을 계산할 때 보통 width + (padding 2) + (border 2) + margin \*2) 이런 공식으로 계산을 하지만,box-sizing속성을 이용하면 padding영역과 border영역을 컨텐츠 영역(width/height)안에

박스를 가로로 배치하는 float속성 float속성은 사전적인 의미로 '떠오르다','떠다니다'라는 의미를 가지고 있다. 웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다. 만약 배치하지 않을 경우 float:none; 속성이나 clea

박스를 배치하거나 고유의 속성을 바꾸는 display dispaly는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀때 사용함. dispaly : block; 해당 요소를 block속성으로 바꾸거나, none으로 숨긴 요소를 다시 나타냄. dispaly

해상도는 화면에 표시되는 픽셀 수. 일반적으로 너비와 높이를 픽셀 단위로 나타냄.화면에 픽셀 수가 많을수록 해상도가 높아지고 이미지가 더 섬세하면서도 선명하게 나타남.PC : 1920px \* 1080pxTeblet : 834px \* 1194pxMobile : 390

Quick actions… : 기능이나 플러그인 검색 Ctrl + /File->Save to version history : 현재 디자인한 작업물을 히스토리로 저장화면 확대/축소 관련 단축키!!Frame: 디자인 요소를 담는 컨테이터 Frame 끼리 중첩할 수 있다.S

◎ 피그마는 오브젝트를 구분 짓는데 레이어의 이름을 활용합니다.특히 컴포넌트 단위에서 레이어 이름에 /를 사용하면 <그룹명/그룹명/오브젝트명>으로 각 요소를 단계별로 그룹화하여 관리할 수 있습니다.f를 눌러 프레임을 선택한후 프레임을 하나 추가해 준다.왼쪽 메뉴에

align-items 부모박스 안에서 세로로 자식박스를 정렬하는 속성 align-items를 사용하면 부모박스 안에서 자식 박스를 세로로 정렬할 수 있다. 이 때 '세로'는 부모박스의 top에 위치하느냐, middle에 위치하느냐, bottom부분에 위치하는가를 뜻한다

align-content: 컨텐츠 정렬 속성 플렉스된 컨테이너 안에 자식드이 매우 많을 경우 여러 줄이 형성된다. 이 때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다. 이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이

overflow 박스안에 컨텐츠가 많아 범위를 넘어갈 때 넘치는 부분을 어떻게 보여줄지 정하는 속성. overflow : hidden; ★ : height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨김. height속성이 지정되어 있

목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어할 수 있다.list-style 속성을 쓰면 list-style-type과 list-style-position을 한꺼번에 선언할 수 있다.

자손 선택자 부모 태그 안에 있는 자식 요소를 선택할 때 사용함. 후손 선택자는 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 계증 아래에 있던지 상관없이 모두 선택함. 하지만 자손선택자는 바로 아랫계층 안에 있는 자식

태그에서 어떤 특정한 속성을 가지고 있는 태그만 선택하는 선택자. 기본형 선택자속성{ 속성 : 값 ;}: 태그에 해당하는 속성이 있는 태그만 선택함. 선택자속성='값'{ 속성 : 값 ;} or 선택자속성="값"{ 속성 : 값 ;}: 태그에 해당하는 속성

부모 태그안에 동일한 태그의 자식들로 구성되어 있을 때 특정 자식요소를 선택하는 선택자. 기본형 \- 선택자:first-child{ 속성 : 값 ;}: 부모태그 안에 자식들 중에 첫번째에 위치한 태그를 선택함. \- 선택자:last-child{ 속성 :

상태선택자 상태선택자는 입력양식 태그의 상태를 지정할 때 사용하는 선택자. ** [기본형] 선택자 : checked** : 체크박스에 체크가 된 상태의 input 태그를 선택함. * - 선택자 : focus ★* : 초점이 맞춰진 i

웹 문서를 꾸미기 위해 배경 이미지나 여러 속성들을 적용할 수 있다. 기본형 1\. background-color : 배경에 색상을 지정함. 색상명이나 2\. background-image : 배경 이미지를 넣을 수 있음. url()속성값

배경 색상이나 글자에 그라데이션을 넣을 수 있다.배경에 적용할 경우 background-image속성을 이용하며 글자에 적용할 경우 color에 적용한다. 1\. Linear-gradient(각도 to 방향, 생상중단점1 시작위치%, 색상중담점2, 시작위치%,..

웹 표준 태그로 구조를 쉽게 파악하고 큰 영역들을 잡는 구조 태그.검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는 지능형 웹 태그. 또한 시각장애인들을 위한 웹 표준 방식.

position은 위치를 설정할 때 사용하는 속성. 위치 속성에는 절대좌표와 상대좌표라는 개념이 있다. 절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며 상대 좌표는 태그가 출력된 위치를 기준으로 움직인다.

form