'CSS' 카테고리의 글 목록

프로필사진

FE_Log

JunO3O

검색

분류 전체보기 (50)

태그 목록

공간 분할 반응 선택자 Udemy 아이디 선택자 중앙 레이아웃 구조 선택자 vscode 후손 선택자 요소 배치 위치 속성 one true 레이아웃 입력 양식 유동 속성 글자 속성 html 상태 선택자 the web developer bootcamp 수평 레이아웃 display 속성 배경 속성 목록태그 글자태그 자손 선택자 CSS 단위 태그 선택자 박스 속성 글자 생략 css 속성 선택자 그레이디언트

즐겨찾기

Copyright © Design Maker - vlo.

'CSS' 카테고리의 글 목록

미디어 쿼리

댓글수 · 2023.03.21

미디어 쿼리 # 미디어 퀴리 - 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하도록 하는 것을 미디어 쿼리라고 합니다. - https://colly.com 사이트의 경우, 브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라집니다. - PC 나 태블릿, 스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀝니다. # 미디어 쿼리 구문 - 미디어 쿼리 구문은 아래 형식을 기본으로 합니다. [only | not] 은 생략할 수 있습니다. @media [only | not] 미디어 유형 [and 조건] * [and 조건] 연산자 설명 and 조건을 계속 추가할 수 있습니다. , (쉼표) 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가합니다. ..

반응형 웹 디자인

댓글수 · 2023.03.21

반응형 웹 디자인 # 반응형 웹 디자인 - 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법입니다. - 다양한 화면 크기의 모바일 기기들이 계속 나오면서 그때마다 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적입니다. - 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 반응형 웹 디자인 입니다. # 반응형 웹 디자인의 장단점 - 장점 : 모든 스마트 기기에서 접속이 가능하다. : 가로 모드에 맞춘 레이아웃 변경이 가능하다. : 사이트 유지와 관리가 용이하다. - 단점 : 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부이다. : 즉, 모든 웹 브라우저에서만 지원된다. # 뷰포트(Viewport) - 뷰포트란 실제 내용이 표시되는 영역..

댓글수 · 2023.03.21

글자 생략 : 한 행을 넘어가는 글자를 자동으로 생략하는 기능을 필요로 할 때가 있습니다. ㅁ 글자 생략 : 글자를 생략하는 기능은 ellipsis 클래스를 만들어 쉽게 구현이 가능합니다. : 지정한 너비를 넘어가는 글자는 자동으로 생략할 수 있습니다. 글자를 생략하는 방법 위에서 h1과 p 태그의 width 값을 500px로 지정했기 때문에 글자의 너비가 200px이 넘는 경우 ...으로 표시하게 됩니다.

댓글수 · 2023.03.21

요소 배치 ㅁ 절대 위치를 사용해 요소 배치하기 : 자손의 position 속성에 absolute 키워드를 적용하라면 부모의 position 속성에 relative를 적용해야 합니다. 도형의 절대 위치 지정 ㅁ 요소를 중앙에 배치하기 : 중앙 정렬 하려는 div 태그의 position 속성을 absolute로 지정하고, left 속성과 top 속성을 모두 50%로 지정합니다. : 그 후 중앙에 정렬하려는 div 태그의 margin-left 속성과 margin-top 속성에 음수를 입력하면 요소가 왼쪽 위로 끌어당겨지면서 요소의 중심이 페이지 중앙에 위치하게 됩니다. : 이때 입력하는 값은 div 태그 너비와 높이의 반이어야 합니다. 요소를 중앙에 배치하는 방법 ㅁ 요소를 고정 위치에 배치하기 : 웹 페이..

수평 / 중앙 / one true 레이아웃

댓글수 · 2023.03.21

수평 정렬 레이아웃 : 수평으로 요소를 정렬할 때는 "자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용합니다." ㅁ 수평 정렬 레이아웃 : div.item 태그에 float 속성을 left로 적용하고, 부모의 overflow 속성을 hidden으로 적용해 요소를 수평으로 정렬합니다. 선택 1 선택 2 선택 3 선택 4 ㅁ 왜 overflow 속성을 지정해야 하는가? : width 속성과 height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는 너비를 모두 감싸는 특성이 있기 때문에 요소 위쪽과 아래쪽에 글자가 출력됩니다. ㅁ div.container 속성에 overflow : hidden 키워드 적용 여부에 따른 결과 비교 - ove..

그림자 / 그레이디언트 속성

댓글수 · 2023.03.21

그림자 ㅁ text-shadow 속성 / box-shadow 속성 : 그림자 속성에는 글자에 그림자를 부여하는 text-shadow 속성과 박스에 그림자를 부여하는 box-shadow 속성이 있습니다. text-shadow : 오른쪽 아래 흐림도 색상; /* text-shadow : 10px 10px 5px blue; */ box-shadow : 오른쪽 아래 흐림도 색상; /* box-shadow : 10px 10px 5px red; */ ㅁ text-shadow 속성 text-shadow 속성은 글자에 그림자를 주는 속성입니다. ㅁ 박스에 그림자 만드는 방법 박스에 그림자를 만드는 방법입니다. ㅁ 그림자를 중첩하는 방법 그림자를 중첩하는 방법입니다. ㅁ CSS3 Generator 를 사용하여 그림자 생..

댓글수 · 2023.03.21

유동 속성 ㅁ float 속성 : float 속성을 이용하면 태그를 오른쪽이나 왼쪽에 붙일 수 있습니다. : 일정한 위치에 고정하는 등 웹 페이지의 레이아웃을 잡을 때 자주 사용합니다. 키워드 설명 left 태그를 왼쪽에 붙임 right 태그를 오른쪽에 붙임 ㅁ 기본적인 페이지 모습 : float 속성을 사용하지 않은 기본적인 모습은 아래와 같습니다. ㅁ float 속성 사용 : float 속성을 사용하면 그림을 글자 옆에 작성할 수 있습니다. float 속성을 사용하면 그림을 글자와 함께 나열할 수 있습니다. ㅁ float 속성을 적용할 대상 만들기 : float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다. 가 나 ㅁ left 키워드 적용하기 : float 속성에 left 키워드를 적용하면 해..

댓글수 · 2023.03.21

위치 속성 ㅁ 위치 속성 : 요소의 위치 지정 형식을 설정할 때는 position 속성을 사용하면 됩니다. : 절대 위치 좌표를 사용하려면 position 속성에 absolute 나 fixed 키워드를 입력합니다. : 상대 위치 좌표를 사용하려면 static이나 relative 키워드를 입력합니다. 키워드 설명 absolute 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 relative 초기 위치에서 상하좌우로 이동 static 위쪽에서 아래쪽으로 순서대로 배치 ㅁ position 속성 absolute 키워드 : box 클래스를 가지는 div 태그의 position 속성에 absolute 키워드를 적용합니다. ㅁ position 속성에 absolute 키워드를 적용하고 left ..

1 2 3

티스토리툴바