px, em, rem 차이를 알아보자. 글꼴과 화면 등의 크기를 다룰때는 크기의 단위가 무엇보다 중요하며, 크기의 단위는 절대 단위와 상대 단위 두가지로 구분할 수 있다. 절대 단위 : px, pt 등 상대 단위 : %, em, rem, ch, vw, vh 등 절대 단위는 언제 사용 되나? 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 : px 사용 반응형 웹에서 기준점을 만들 때 : 디바이스 크기를 나누는 기준을 보통 px로 정함 상대 단위는 언제 사용 되나? 반응형 웹 단위 선택시 : 주로 rem 사용 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 : vw,vh 사용 정리 px : 고정된 크기를 나타내며, 사용자 설정에 따라 확대/축소되지 않는 고정 크기의 ..
레이아웃 리셋은 왜 필요하며, 언제 해야 할까 ? 요소가 가진 기본 스타일에 약간의 여백이 있을 때 width,height 계산이 여백을 포함하지 않아 계산에 어려움이 있을 때 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다를 때 기본 스타일링을 제거하는 CSS 코드 예시 * { box-sizing: border-box; } body { margin: 0; padding: 0; }
레이아웃 각각의 요소를 목적에 맞게 배치하는 것 와이어프레임 웹 & 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 선,도형으로 웹 & 앱의 인터페이스를 시각적으로 묘사한 것 목업 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성 ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드 코딩하는 방식 와이어프레임 & 목업 꼭 해야 됨? HTML 문서를 통해 화면을 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려움 설계도 없이 건물을 짓는 것과 같다. 레이아웃 리셋 기본 예시 레이아웃 리셋을 하는 이유 Body 요소는 기본 스타일에 약간의 여백이 있다. width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다. 브라우저 ..
1. CSS에 대해 알아보자. CSS가 무엇일까? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 가독성 및 전달력의 차이가 생긴다. 좋은 사용자 경험을 제공하기 위한 도구 - 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다. 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나이다. 무엇부터 만들 수 있을까? 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스부터 만들게 된다. (user interface) user interface란 무엇일까? 컴퓨터와 교류하기 위한 연결고리 2. CSS를 적용하는 방법 같은 줄에서 스타일을 적용하는 인라인 스타일 CSS파일 내에 작성하는 내용을 별도 파일로 구분하지 않고 style요소 내에 작성하는 내부 스타일 시트 외부 스타일 시트 실행 방법 inde..
HTML / CSS / JavaScript HTML 웹 페이지 구조 (틀) 담당 마크업 언어 CSS 디자인 요소를 시각화 스타일 시트 언어 JavaScript 웹 페이지를 프로그램으로 만들어 상호작용할 수 있게 함 프로그래밍 언어 HTML HTML - HyperText Markup Language 약자 Tag 정의 HTML은 Tag들의 집합 부등호 ()로 묶인 기본 구성 요소 기본적으로 열고 닫기가 지켜짐 ex) 열기 , 닫기 id & class id : 고유한 이름 붙일때 사용 (전체 통 틀어서 오직 하나일 때) class : 유형별로 분류할 때 (반복적인 유형을 분류할 때) 웹,앱 만드는 과정에서의 필수 과정 프로토 타이핑을 꼭 거쳐야 함 -개발 초기에 모형을 만들어 기능 요구 사항을 파악하고, 반영..
