전체 글

반응형 웹다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 재배치하며 반응하는 웹문서뷰포트현재 화면에 보여지고 있는 영역. 죽여 마땅한 사람들 - 피터 스완슨미디어 쿼리미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)미디어 타입과 조건에 대한 쿼리로 구성된다. 플렉스박스행 또는 열을 주축으로 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식이다. 플렉스 컨테이너 생성은 display 속성을 이용한다.display플렉스 컨테이너 지정flex: 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.inlne-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다. 콜드플레이 내한 셋리 Higher Pow..

브라우저는 다음 과정을 거쳐 렌더링을 수행한다.브라우저는 HTML, CSS, JS, 이미지 파일 등 필요한 리소스를 요청하고 서버로부터 응답을 받는다.브라우저의 렌더링 엔진은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.브라우저의 자바스크립트 엔진은 JS를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다.렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.1. 리소스 요청과 서버 응답1. 브라우저는 HTML, CSS, JS, 이미지 파일 등 필요한 리소스를 요청하고 서버로부터 응답을 받는다.렌더링에 필요한 리소스는 모두 서버에 있으므로 브라우저는 필요한 리소스를 서버에 요청하고 서버로부터 응답을 ..

transform: 요소의 크기나 위치를 바꿈. x축과 y축 기준translate(x, y): 지정한 크기만큼 x축, y축으로 이동scale(x, y): 지정한 크기만큼 x축, y축으로 확대 및 축소skew(x, y): 지정한 크기만큼 x축, y축으로 왜곡rotate(x, y): 지정한 각도만큼 회전 transition: 요소에 저장된 스타일을 다른 스타일로 변화. 변화하는 시간이나 속도 등을 추가할 수 있어 애니메이션 효과를 만들 수 있음transition-property: 변화 대상 속성 지정transition-duration: 변화 진행 시간 지정transition-delay: 변화 시작 전 지연 시간 지정transition-time-fun..

UI(User Interface) - 사용자 인터페이스UI는 사용자가 어떤 제품이나 서비스를 사용할 때 직접적으로 눈에 보이고 손으로 조작하는 시각적 요소를 의미한다. 버튼, 아이콘, 색상, 폰트, 메뉴 구조, 여백, 레이아웃 등이 모두 UI의 구성 요소다.UI 디자인의 목적은 사용자가 서비스를 사용할 때 직관적으로 이해하고 쉽게 조작할 수 있도록 시각적인 구조를 설계하는 데 있다. 다시 말해, 깔끔하고 일관성 있는 화면 구성과 시각적 흐름을 통해 사용자가 혼란 없이 인터페이스를 사용할 수 있게 해주는 것이 핵심이다. 예시)앱 로그인 화면에서 이메일 입력창, 비밀번호 입력창, 로그인 버튼, 비밀번호 찾기 링그 등UX(User Experience) - 사용자 경험UX는 UI보다 더 포괄적이고 전략적인 개념..

연결 선택자하위 선택자 (공백): 부모 요소에 포함된 모든 하위 요소 선택자식 선택자 (>): 하위 선택자와 달리 자식 요소만 선택인접 형제 선택자 (+): 형제 요소 중 첫 번째 동생 요소만 선택형제 선택자 (~): 모든 형제 요소 선택속성 선택자해당 속성이 있는 요소 선택[속성]: 해당 속성이 있는 요소[속성 = 값]: 지정한 속성값이 있는 요소[속성 ~= 값]: 지정한 속성값이 포함된 요소(단어별)[속성 |= 값]: 지정한 속성값이 포함된 요소{하이픈 포함, 단어별)[속성 ^= 값]: 지정한 속성값으로 시작하는 요소[속성 ^= 값]: 지정한 속성값으로 끝나는 요소[속성 ^= 값]: 지정한 속성값을 포함하는 요소a[href] { ... } // href 속성이 있는 a 요소a[target = _bla..

웹 문서 레이아웃display: 배치 방법 결정block: 인라인 레벨 요소를 블록 레벨 요소로 처리inline : 블록 레벨 요소를 인라인 레벨 요소로 처리inline-block : 인라인 레벨 요소로 표시하되 블록 레벨 요소의 속성을 추가. 마진과 패딩 지정 가능none: 화면에 표시하지 않음 국어 수학 영어float: 요소를 문서의 흐름에서 제외한 채 부모 또는 루트 요소를 기준으로 위치를 변경none: 기본값left: 문서의 왼쪽에 배치right: 문서의 오른쪽에 배치clearfloat 속성을 사용하면 그다음에 넣는 다른 요소에도 같은 속성이 전달된다. clear 속성을 사용하여 float 속성을 해제할 수 있다.left: float: left를 해제right: float: right를 해제..

배경backgound-color: 배경색 지정backgound-clip: 배경색의 적용 범위 조절border-box: 가장 외곽인 테두리까지 적용. 기본값padding-box: 테두리를 뺀 패딩 범위까지 적용content-box: 콘텐츠 부분에만 적용backgound-image: 배경 이미지 삽입background-image: url('이미지 파일 경로'); div { width: 350px; height: 350px; border: 1px solid #000; background-image: url('./img/profile.jfif'); }backgound-size: 배경 이미지 크기 조절backgound-repeat: 배경 이미지 반복 방법 설정 ..

MPA (Multi Page Application)멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 css, js, 이미지 파일 등의 리소스를 전달받아 화면에 보여주는 방식이다. 각 페이지마다 다른 html 파일을 만들어서 제공하거나 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다.싱글 페이지 애플리케이션이란 개념이 생기기 전에는 멀티 페이지 애플리케이션이 사용되었다. MPA는 사용자 인터렉션이 많고 다양한 정보를 제공하는 애플리케이션에는 적합하지 않다. 새로운 페이지를 보여줘야 할 때마다 서버 자원의 사용량과 트래픽이 증가할 수 있기 때문이다.SPA (Single Page Application)싱글 페이지 ..