WEB
👉🏻 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소(element)들이 하나의 박스가 됨 👉🏻 박스는 항상 직사각형이며 너비(width), 높이(height) 가짐 CSS를 이용해 속성과 값으로 박스 크기를 설정할 수 있음 1. 박스의 종류 : 줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline) block 박스 : 줄 바꿈이 되며 크기를 지정할 수 있는 박스 ex. , inline 박스 : 줄 바꿈이 일어나지 않고 크기를 지정할 수 없는 박스 ex. inline-block 박스 : 위 두 가지의 특징이 섞인 줄 바꿈이 일어나지 않으면서 크기를 지정할 수 있는 박스 span { background: yellow; display: inline-block; w..
🧑🏻💻 텍스트와 관련된 속성들을 알아보자! 1. 색상 👉🏻 color : 글자의 색상을 변경하는 속성 👉🏻 background-color : 요소의 배경 색상을 지정하는 속성 👉🏻 border-color : 테두리 색상을 지정 👉🏻 opacity : 요소의 불투명도 조절 ※ 삽입할 수 있는 값은 HEX(16진수로 RGB : Red, Green, Blue) 또는 색상 이름으로 동일 /* red class에 속성 적용하기 */ .red { color: #ff0000; color: red; background-color: #ff0000; border-color: #ff0000; opacity: 0.5; } 2. 글꼴 👉🏻 font-family: 글꼴 지정하는 속성 .emphasize { font-family..
💡 CSS(Cascading Style Sheets) ➡️ 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 ➡️ 좋은 사용자 경험을 제공하기 위한 도구 UI 와 UX? 👉🏻 사용자 인터페이스(UI, User Interface) : 웹 애플리케이션이 제공하고자 하는 웹 서비스와 사용자를 연결해주는 매개체 👉🏻 사용자 경험(UX, User eXperience) : 사용자가 특정 서비스를 사용하고 경험하면서 직/간접적으로 느끼는 종합적인 만족도 ⭐️ UI가 깔끔하고 직관적일 수록 좋은 UX를 이끌어낼 수 있음! 1. CSS의 문법 구성 셀렉터(Selector) : 태그이름, id, 클래스 선택 속성(Attribute) : 중괄호 안에서 셀렉터에 적용할 내용 작성한 것 선언 구분자(세미콜론, ; ) :..
💡HTML(HyperText Markup Language) ➡️ 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 📍HTML의 기본 구조와 문법 웹 페이지의 틀을 만드는 마크업 언어 tag 들의 집합 --> tag란? 부등호()로 묶인 HTML의 기본 구성 요소 🔎 시작 태그(opening tag)와 닫는 태그(closing tag)로 감싸져 있음 Tree Structure : 상위 태그가 하위 태그를 감싸는 형태 📍자주 사용하는 HTML 요소 : HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양, 스타일링 목적이나 같은 섹션에 포함된 여러개의 문단을 묶어 비슷한 방법으로 주석을 달거나 할 때 유용하게..
WEB의 개념 WWW(World Wide Web)이란 인터넷에 연결된 전세계 사용자들이 서로의 정보를 공유할 수 있는 장소를 의미 간단히 줄여서 WWW나 W3라고 불리며, 간단히 웹(WEB)이라고 가장 많이 불림 💡웹 클라이언트와 웹 서버 📍클라이언트 서버 아키텍처(2티어 아키텍처, 2-Tier Achitecture) 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 리소스를 사용하는 앱 : 클라이언트 리소스를 제공하는 곳 : 서버 쉽게 생각하자면 리소스에 접근하려는 앱은 손님과 같다. 커피를 마시기 위해 손님(클라이언트)은 점원(서버)에게 주문(요청)하고 점원(서버)는 커피(리소스)를 제공(응답)한다. ➡️ 클라이언트와 서버는 위와 같이 요청과 응답을 주고받는 관계, 요청이 선..
