jh.nrtv

계산기 목업 만들기 (css) 버튼 입체감 만들기 box-shadow : 1px 1px 1px 1px black inset; box-shadow 속성에서 1px 1px 1px 1px black inset 값들은 차례로 각각 다음을 의미합니다. h-offset: 필수, 그림자가 수평방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 오른쪽으로 떨어진 위치에서 시작하고, 음수면 왼쪽으로 떨어진 위치에서 시작합니다. v-offset: 필수, 그림자가 수직방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 아래쪽으로 떨어진 위치에서 시작하고, 음수면 위쪽으로 떨어진 위치에서 시작합니다. blur: 선택, 그림자를 흐리게 할 정도를 결정합니다. 클수록 흐려집니다. spread: 선택, 그..

레이아웃 와이어프레임 : 레이아웃의 뼈대를 그리는 단계 목업( Mock-up) : 실물 크기의 모형 하드코딩 ;변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스 코드에 모두 출력하는 방법뿐입니다. Flexbox Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. 1. 부모요소 flexbox - 요소들의 정렬과 관련 1) display:flex; 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다. 2) flex-direction: row; - 정렬 축 정하기 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 설정 없을시 기본설정 'row' main { display: f..

CSS 기초 학습목표 CSS의 사용 목적을 이해한다. CSS의 기본 문법과 구조를 이해한다. CSS를 HTML에 적용하는 방법에 대해서 이해한다. HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다. CSS를 이용해 텍스트를 꾸밀 수 있다. CSS에서 쓰이는 단위의 두 가지 구분을 이해한다. 각 단위가 적합한 경우를 구분할 수 있다. MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다. - css는 좋은 사용자 경험을 제공하기 위한 도구 - 사용자 인터페이스(UI; user interface) ; 인터페이스는 컴퓨터와 교류하기 위한 연결고리. (원래는 불편한 CLI 사용) - 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다. - 무료..

웹 개발 이해하기 HTML은 구조를 만드는 마크업 언어, CSS는 스타일을 담당하는 디자인 언어, JS는 상호작용 HTML 기본문법 학습목표 HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다. 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다. , 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다. , , 요소가 무엇이고, 언제 사용해야 하는지 알고 있다. 요소에 type 을 설정하여 다양한 종류의 요소를 활용할 수 있다. id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(sementic) HTML 문서를 작성할 수 있다. HTML5 시맨틱 요소를 적..