WEB/CSS
👉🏻 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소(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) : 중괄호 안에서 셀렉터에 적용할 내용 작성한 것 선언 구분자(세미콜론, ; ) :..
