CSS6 (45) [CSS] 3일 반응형 웹(Responsive Web) 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 장점 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 뷰포트(Viewport) 웹 페이지가 사용자에게 보여지는 영역.반응형 웹(Responsive Web)은 모바일, 테블릿, PC 등 다양한 디바이스의 디스플레이에 맞춰 뷰포트가 변하는 웹 사이트를 말하는 것이다. 즉, 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태를 말한다. 뷰포트 속성 속성 의미 widt.. 2024. 4. 18. (45) [CSS] 3일 레이아웃과 포지셔닝 - Grid Grid Layout이란? 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 탁월하다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있다. Grid 구성 Grid는 복수의 자식 요소인 Grid Item과 그 상위 부모 요소인 Grid Container(그리드 컨테이너)로 구성된다. 정렬하려는 ㄴ요소의 부모 요소에 'display:grid' 또는 'display:line-grid'속성을 선언한다. Grid Container 속성 속성 의미 display 그리드 컨테이너를 정의 grid-tmplate-rows 명시적 행의 크기를 정의 grid-tmplate-columns 명시적.. 2024. 4. 18. (44) [CSS] 2일 레이아웃과 포지셔닝 - flex flex 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치,정렬, 분살할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식 장점. '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다 속성 display : flexbox는 정렬하려는 요소의 부모 요소에 display : flex 또는 display:line-felx 속성 값을 선언한다 flex-direction 플래스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정한다. flex-wrap flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지 결정하는 속성이다. justify-content 주 축의 정렬 .. 2024. 4. 17. (44) [CSS] 2일 레이아웃과 포지셔닝 overflow 요소의 박스에 콘텐츠가 넘칠 때 표현 방법을 지정한다. 속성값은 하나 또는 두개를 지정할 수 있으며, 두개를 지정한 경우 첫번째 값은 overflow-x 두번째 값은 overflow-y를 지정한다. 하나를 지정한 경우 양 축 모두 지정한다. visivle 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다.(기본값) hidden 넘치는 콘텐츠를 자르고 보이지 않게한다. scroll 넘치는 콘첸츠를 자르며, 항상 스크롤바를 표시한다. auto 넘치지 않으면 스크롤바가 보이지 않으며 넘치면 콘첸츠를 자르지만 스크롤바가 표시된다. overflow : 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정 default html css javascript jquery node.js react vu.. 2024. 4. 17. (43) [CSS] 1일 텍스트 및 배경 관련 스타일 글꼴 font-family : 웹 문서의 글꼴을 지정하며, 시스템 내 폰트 이름 중 하나를 사용한다. Web Fonts : 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할수 있게 하는 기술이다. font-size : 폰트의 크기를 지정한다 font-weight : 폰트의 굵기를 지정한다. white-space : 공백 처리 방법을 결정한다 letter-spacing : 글자와 글자 사이의 간격을 지정한다. word-spacing : 단어의 간격을 조정한다. text-overflow : white-space:nowrap; 로 지정하여 텍스트가 영역을 넘쳐도 줄 바꿈이 일어나지 않을 때 넘치는 텍스트를 처리하는 방법을 지정한다. white-space : 해당 요소의 공백.. 2024. 4. 16. (43) [CSS] 1일 CSS 기초 CSS란? 스타일은 HTML 문서 내에 서체의 종류,크기,색, 여백등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능. CSS 지정 방법 인라인 스타일 : inline Style은 HTML tag 속에 style 속성을 사용하여 직접 지정한다. 내부 스타일 시트 : 스타일 시트의 기본적인 사용 방법으로 html의 사이에 삽입하여 ... 외부 스타일 시트 imported style sheet : 이방식은 결과적으로 linked style와 같고 위치는 embedded 방식과 마찬 가지로 style block 속에 들어간다. 크기 단위 px : 픽셀은 디바이스 해상도에 따라 상대적인 크기를 갖는다. 디바이스에 따라 픽셀(화소)의 크기는 다르기 때문에 픽셀을 기준으로 하는.. 2024. 4. 16. 이전 1 다음
