본문 바로가기

Learn/CSS

 (4)
브라우저와 반응형 웹 브라우저의 특징과 웹의 동작 원리 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식 먼저, 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력 DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지를 생성해 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송되고, 이 요청 메시지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환 웹 서버는 이 변환이 된 정보에 해당하는 ..
UI 와 UX UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. ex) 핸드폰의 물리적 버튼 하지만 꾸준히 UI 발전하고 중요하게 됨에 따라 GUI가 중요한 역할을 하게 됨 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)란 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 EX) 우리가 보는 운영체제(Window, Mac OS)의 화면, 애플리케이션 화면, 키오스크 등등 UX 사용자가 어떤 시스템, 제품, 서비스를 직,간접적으로 이용하면서 느끼고 생각하는 총체적 경험 특정 정황과 목표를 갖는..
HTML/CSS 활용 복습 와이어프레임(Wireframe) 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 Flexbox Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법 부모 요소에 적용해야하는 Flexbox 속성들 1. flex-direction : 정렬 축 정하기 flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다. 2. flex-wrap : 줄 바꿈 설정하기 flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주..
CSS 기초 정리 CSS (Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 HTML로 구조를 세우고, 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성 사용자 인터페이스(UI; user interface) 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있게 만들어진 매개체. 사용자 경험(UX; user experience) 제품,시스템,서비스를 사용하면서 인간이 얻게 되는 지각과 반응의 합. CSS 내용 분해하기 셀렉터(selector) : 요소 이름이나 id 또는 클래스를 선택 선언 (Declaration) : 요소에 적용할 수 있는 내용의 속성을 작성 * id와 cla..

티스토리툴바