'css' 태그의 글 목록

프로필사진

FE_Log

JunO3O

검색

분류 전체보기 (50)

태그 목록

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

즐겨찾기

Copyright © Design Maker - vlo.

'css' 태그의 글 목록

댓글수 · 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 ..

댓글수 · 2023.03.21

글자 속성 ㅁ 글자 크기 지정 : 글자 크기를 지정하는 font-size 속성에는 크기 단위나 키워드를 입력할 수 있습니다. : 글꼴을 지정하는 font-family 속성에는 사용자 컴퓨터에 설치된 글꼴을 입력할 수 있습니다. ㅁ 글자 크기 조정하기 : HTML 페이지에서 p 태그의 기본 크기는 16px인데 이것을 font-size 속성을 통해 변경할 수 있습니다. font-size 비교하기 32px 크기는 이렇습니다. 2em 크기는 이렇습니다. large 크기는 이렇습니다. small 크기는 이렇습니다. ㅁ 글꼴 사용하기 Arial 글꼴을 지정합니다. roman 글꼴을 지정합니다. ㅁ 글꼴 여러 개 사용하기 : 설정한 글꼴이 컴퓨터에 없는 경우를 대비해 여러 글꼴을 적용할 수 있습니다. Arial 글꼴..

댓글수 · 2023.03.21

배경 속성(background) : 배경에 이미지나 색상을 입력할 경우 배경 속성을 사용해 지정합니다. 속성 설명 background-image 배경 이미지 삽입 background-size 배경 이미지의 크기 지정 background-repeat 배경 이미지의 반복 형태 지정 background-attachment 배경 이미지의 부착 형태 지정 background-position 배경 이미지의 위치 지정 background 한 번에 모든 배경 속성 입력 ㅁ 배경 이미지 삽입 및 크기 지정 : background-image 속성은 배경 이미지를 지정하는 속성으로 스타일 값에는 URL 단위나 그레이디언트를 입력합니다. : 배경 이미지 크기는 background-size 속성으로 조정하고 크기 단위나 키워드..

티스토리툴바